☀️ 🌙
Light Mode

Dark Mode Toggle

Experience seamless theme switching with CSS variables and localStorage persistence. Your preference is saved automatically!

🎨 Quick Theme Selection

💾

Persistent Storage

Your theme preference is saved using localStorage and restored on every visit.

🎨

CSS Variables

All colors are defined using CSS custom properties for easy theme switching.

Instant Switch

Smooth transitions between themes with no page reload required.

2
Color Themes
20+
CSS Variables
0.3s
Transition Time
100%
Coverage

📝 Interactive Demo Components

💻 CSS Variables Code

:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f3f4f6;
  --text-primary: #1f2937;
  --text-secondary: #4b5563;
  --accent-primary: #3b82f6;
}

[data-theme="dark"] {
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --accent-primary: #60a5fa;
}
Theme changed!