Table of Contents
- Introduction to Dark Mode
- Benefits of Using CSS Variables
- Setting Up Light and Dark Themes
- Detecting System Theme with Media Queries
- Switching Themes with JavaScript
- Accessibility Considerations
- Conclusion
1. Introduction to Dark Mode
Dark mode has become a widely adopted UI feature that allows users to experience websites with a darker color palette, which can reduce eye strain, save battery on OLED screens, and offer a visually appealing alternative to bright interfaces.
In modern web development, CSS Variables combined with Media Queries make implementing dark mode both powerful and efficient.
2. Benefits of Using CSS Variables
CSS Variables (also known as custom properties) allow you to define reusable values for colors, spacing, fonts, and more. This makes them ideal for theming.
Example:
cssCopyEdit:root {
--bg-color: white;
--text-color: black;
}
Now you can reuse these throughout your stylesheet:
cssCopyEditbody {
background-color: var(--bg-color);
color: var(--text-color);
}
If you later redefine the variables, all instances using them will update automatically.
3. Setting Up Light and Dark Themes
Default Theme (Light)
Start by defining your light theme in the :root
selector:
cssCopyEdit:root {
--bg-color: #ffffff;
--text-color: #000000;
--primary-color: #007bff;
}
Then apply these variables in your components:
cssCopyEditbody {
background-color: var(--bg-color);
color: var(--text-color);
font-family: sans-serif;
}
a {
color: var(--primary-color);
}
Dark Theme Override
Now define the dark theme inside a @media
query:
cssCopyEdit@media (prefers-color-scheme: dark) {
:root {
--bg-color: #121212;
--text-color: #f0f0f0;
--primary-color: #0d6efd;
}
}
When a user’s system is set to dark mode, the prefers-color-scheme: dark
media query will trigger, and your dark theme variables will override the defaults.
4. Detecting System Theme with Media Queries
The prefers-color-scheme
media feature detects the user’s system theme preference:
cssCopyEdit@media (prefers-color-scheme: dark) {
body {
background-color: var(--bg-color);
color: var(--text-color);
}
}
This is purely CSS-based and requires no JavaScript, making it very efficient and performant.
5. Switching Themes with JavaScript
To give users manual control over the theme (e.g., a toggle switch), you can override the system setting by updating a class on the root HTML element.
HTML Example:
htmlCopyEdit<button id="themeToggle">Toggle Theme</button>
CSS Setup:
cssCopyEdit:root {
--bg-color: #ffffff;
--text-color: #000000;
}
[data-theme="dark"] {
--bg-color: #121212;
--text-color: #f0f0f0;
}
JavaScript:
javascriptCopyEditconst toggle = document.getElementById('themeToggle');
const html = document.documentElement;
toggle.addEventListener('click', () => {
const currentTheme = html.getAttribute('data-theme');
if (currentTheme === 'dark') {
html.setAttribute('data-theme', 'light');
} else {
html.setAttribute('data-theme', 'dark');
}
});
This allows dynamic switching and gives users full control over their experience.
6. Accessibility Considerations
- Contrast: Ensure high enough contrast between background and text for both themes.
- Animation Reduction: Respect
prefers-reduced-motion
settings. - Persist Theme Choice: If using JavaScript to toggle themes, consider saving user preferences in
localStorage
.
javascriptCopyEdit// Save preference
localStorage.setItem('theme', 'dark');
// On page load
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
document.documentElement.setAttribute('data-theme', savedTheme);
}
7. Conclusion
Dark mode enhances the user experience and has become a standard feature in modern UI design. With CSS Variables and the prefers-color-scheme
media query, implementing dark mode is not only easy but also efficient and user-friendly.
By layering JavaScript logic, you can further personalize the experience and give users full control over their theme preference.