🌙 Dark Mode Demo
Toggle Dark Mode
with CSS Variables
Click the toggle in the top-right to switch between light and dark mode. Your preference is saved in localStorage and will persist on next visit.
How it works:
:root { --bg: #fff; --text: #111; }
[data-theme="dark"] { --bg: #0f172a; --text: #f1f5f9; }
body { background: var(--bg); color: var(--text); }
⚡
CSS Variables
All colors are defined as variables that change on theme switch.
💾
localStorage
Your theme preference is remembered across sessions.
🖥️
OS Detection
Respects prefers-color-scheme on first visit.
✨
Smooth Transitions
CSS transitions make the theme switch feel fluid and polished.