Design
How to Build a Dark & Light Theme with CSS Variables
Table of Contents
1. Why Dark Mode Matters
Dark mode reduces eye strain in low-light environments and can save battery life on OLED screens. Offering both light and dark themes improves user experience and accessibility.
2. Structuring CSS Variables for Themes
Use :root to define all your color tokens. For themes, use a [data-theme="dark"] selector or the prefers-color-scheme media query.
Best Practice: Keep all theme variables in one place. Never hard-code colors in components.
3. Using prefers-color-scheme
This media query detects the user's system preference. Combine it with CSS variables for automatic dark mode.
4. Adding a Manual Theme Toggle
Use JavaScript to toggle a data-theme attribute on the <html> element. This overrides the system preference and gives users control.
5. Testing Your Themes
Our Dark & Light Theme Tester lets you preview both modes side by side and export the final CSS variables.