Bright screens strain your eyes after dark. You know the feeling. Dark mode changes that. It swaps light backgrounds for dark ones, and it boosts user satisfaction. Studies show over 80% of people prefer it at night.
System-wide design variables make this easy. These are reusable CSS custom properties. They let your site match the user’s OS settings automatically. No extra work needed. You’ll write less code, and your site adapts perfectly.
In this guide, we cover the steps. First, detect preferences with CSS media queries. Then, set up variables for both themes. Add a toggle for overrides. Finally, test everything. Follow along, and your site will feel modern and user-friendly right away.
Grasp How Browsers Detect System Dark Mode Preferences
Browsers check your operating system’s color scheme. They use a simple CSS media query called prefers-color-scheme. This query tells you if the user wants light or dark mode. Most modern browsers support it. Chrome handles it since version 76. Firefox works from 67. Safari supports it starting at 12.1.
The syntax stays straightforward. You write @media (prefers-color-scheme: dark) { }. Inside, you add styles for dark mode. Light mode uses the default outside the query. Older browsers ignore it. They fall back to your light theme styles.
This approach matters a lot. It creates a smooth experience without JavaScript. Users get their preferred look instantly. No clicks required. Your site respects their choice from the start.
For example, consider this basic setup:
body {
background-color: white;
color: black;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #121212;
color: #e0e0e0;
}
}
Test it now. Toggle your OS dark mode. Refresh the page. The change happens fast. This media query powers everything else we build.
Test Your Browser’s Color Scheme Detection Right Now
You can verify this yourself. Open your developer tools. In Chrome, go to the Rendering tab. Find “Emulate CSS media feature prefers-color-scheme.” Switch it to dark. Your page updates on the spot.
Different OS handle it uniquely. On macOS, check System Settings under Appearance. Windows users go to Settings, then Personalization, Colors. Android offers it in Display settings. iOS hides it in Control Center or Accessibility.
No libraries required. Browsers do the work. Try a simple HTML page with the media query above. Toggle modes across devices. You’ll see the switch in action. This confirms your setup before adding variables.
Real devices beat simulations sometimes. Grab your phone. Change the setting. Reload. It matches perfectly. Now you trust the detection.
Set Up Your Core CSS Variables for Light and Dark Themes
CSS custom properties act as your design variables. Declare them on the :root selector. They cascade everywhere. Start with essentials like background and text colors.
Define light theme first. Use --bg-color: #ffffff; for backgrounds. Set --text-color: #333333; for foreground. Add --accent-color: #007bff; for buttons. Include --border-color: #dee2e6; for lines.
Override in the dark media query. Change --bg-color: #121212;. Make --text-color: #e0e0e0;. Adjust --accent-color: #4dabf7; for better visibility. --border-color: #444444; works well.
Apply them simply. Write body { background: var(--bg-color); color: var(--text-color); }. Reuse across elements. This keeps code DRY.
Here is a full starter set:
--bg-color--text-color--accent-color--border-color--card-bg--link-color--button-bg--button-text--shadow--surface-color
Semantic names help. They describe purpose, not just color. Update values as needed. Your site adapts automatically.
:root {
--bg-color: #ffffff;
--text-color: #333333;
--accent-color: #007bff;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #121212;
--text-color: #e0e0e0;
--accent-color: #4dabf7;
}
}
This foundation scales. Add more variables later.
Pick Colors That Pop in Both Modes Without Hurting Eyes
Choose palettes carefully. Light mode needs off-white backgrounds like #f8f9fa. Pair with dark gray text at #212529. Dark mode uses near-black #1a1a1a. Light gray #e8e8e8 shines for text.
Meet WCAG standards. Aim for 4.5:1 contrast ratio. Tools like WebAIM Contrast Checker help. Pure black and white cause glare. Soften them instead.
Examples include:
Buttons get --button-bg: #007bff; in light, #0d6efd; in dark. Links use --link-color: #0d6efd; light, #4dabf7; dark. Cards take --card-bg: #ffffff; light, #2d2d2d; dark.
Generate palettes online. Sites offer previews in both modes. Test readability. Your eyes thank you later.
Avoid harsh contrasts. Users stay longer on comfortable sites.
Apply Variables Everywhere From Body to Buttons
Cascade works magic. Set variables on :root. Components pull them automatically. Buttons become background: var(--button-bg); color: var(--button-text);.
Navigation bars use background: var(--surface-color);. Forms inherit text colors. Cards stack with background: var(--card-bg); border: 1px solid var(--border-color);.
Images need tweaks sometimes. Add filters in dark mode. Use filter: brightness(0.9); for subtle dimming. Or picture elements switch sources.
SVGs inherit fills. Set fill: var(--text-color);. Headers and footers follow suit.
Every element connects. Change one variable. The whole site updates. Efficiency rules.
Handle Users Who Want to Override System Settings
Some users ignore system prefs. They want manual control. Add a toggle switch. Use JavaScript and a CSS class like .dark-mode.
Apply the class to html or body. Store choice in localStorage. Check it first on load. Fall back to media query if empty.
JavaScript starts simple. Query the media query with window.matchMedia('(prefers-color-scheme: dark)'). Then check storage. Apply class accordingly.
Toggle button lives in the header. Use sun and moon icons. Click calls document.documentElement.classList.toggle('dark-mode'). Save the new state.
CSS overrides use higher specificity. .dark-mode { --bg-color: #121212 !important; }. This beats the media query.
Users love options. Your site feels responsive.
Store and Recall User Choices Smoothly with LocalStorage
LocalStorage persists prefs. On load, run this script:
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
let isDark = localStorage.getItem('darkMode');
if (isDark === null) {
isDark = darkModeMediaQuery.matches;
}
if (isDark) {
document.documentElement.classList.add('dark-mode');
}
Toggle function saves changes:
function toggleDarkMode() {
document.documentElement.classList.toggle('dark-mode');
localStorage.setItem('darkMode', document.documentElement.classList.contains('dark-mode'));
}
First visits use system default. Incognito clears storage, so it resets. Perfect behavior.
Edge cases stay rare. Test reloads and switches. Users get consistency.
Test Thoroughly and Fix Common Dark Mode Glitches
Testing saves headaches. Use real devices first. Check desktop on Windows and macOS. Test mobile on Android and iOS.
Dev tools simulate well. Toggle media queries. Inspect elements for variable values.
Common glitches hit embeds. YouTube videos ignore your theme sometimes. Ads do too. Scope CSS to your content.
SVGs and canvas need fills. Set them with variables. Performance stays high. Variables compute fast.
Accessibility counts. Screen readers ignore colors. High contrast mode overrides anyway. Google indexes both themes fine.
Run Lighthouse audits. Fix issues early.
Catch Sneaky Problems Like Images and Fonts in Dark Mode
Images wash out in dark mode. Apply img { filter: brightness(0.8) saturate(1.1); } inside .dark-mode.
Fonts adapt with weights. Use font-weight: 400; light, 500; dark for punch. Colors come from variables.
Smooth transitions engage users. Add transition: background-color 0.3s ease, color 0.3s ease;.
Validate with tools. WAVE spots contrast fails. Lighthouse flags perf drops.
Animations shine brighter. Test scrolls and hovers. Polish every detail.
Your site looks pro now.
Dark mode starts with detection. Add media queries next. Set variables for themes. Build a toggle for choices. Test across devices.
You gain a modern, accessible site. Users stick around longer. Implement these steps today. Share your results in the comments. What glitches did you fix?
Future trends match system UI more. Stay ahead with variables. Your code adapts easily.