Welcome to the Dark Mode Demo
Click the toggle button in the header to switch between light and dark modes. Your preference will be saved and remembered when you return!
How It Works
1️⃣ CSS Variables
We use CSS custom properties (variables) to define colors for both themes. This makes it easy to switch themes by changing one class on the body element.
2️⃣ JavaScript Toggle
When you click the button, JavaScript toggles a "dark-mode" class on the body element. This changes all the CSS variables, updating the entire page instantly.
3️⃣ LocalStorage
Your theme preference is saved in localStorage, so it persists even after you close the browser or refresh the page.
Sample Content
This is sample content to demonstrate how text and elements look in both themes. Notice how all colors transition smoothly when you switch modes.
"Design is not just what it looks like and feels like. Design is how it works."
Try toggling between modes to see how the entire page theme changes seamlessly. This technique is used by popular websites like Twitter, YouTube, and GitHub.