Dark Mode Toggle

💡 What is Dark Mode?

Dark mode is a user interface theme that uses dark backgrounds and light text. It reduces eye strain in low-light environments and provides a modern aesthetic.

⚡ Key Features

✅ Toggle between light and dark modes
✅ Smooth CSS transitions
✅ localStorage persistence
✅ CSS custom properties (variables)
✅ Responsive design

🎨 Easy to Customize

Change colors easily by modifying CSS variables. The entire theme updates instantly across all components with smooth transitions.

🎨 Color Palette

These colors automatically switch when you toggle dark mode:

Primary
#3b82f6

Background

Card BG

📝 Implementation

Here's how to implement dark mode using CSS variables:

:root {
                --bg-color: #ffffff;
                --text-color: #1f2937;
                }

                body.dark-mode {
                --bg-color: #1f2937;
                --text-color: #f3f4f6;
                }

                body {
                background-color: var(--bg-color);
                color: var(--text-color);
                transition: all 0.3s ease;
                }

JavaScript Toggle

Toggle dark mode and save preference using localStorage: