Dark Mode CSS

Dark mode CSS is the set of styles that switch a page to a dark color scheme. Browsers expose the operating system setting through the prefers-color-scheme media query, and developers usually define colors as CSS variables so one block of overrides flips the whole theme.

Why it matters

Many users choose dark themes to reduce glare or save battery on OLED screens. Respecting the preference is expected, and a page that ignores it can flash bright white at night. A good implementation also needs readable contrast in both themes, adjusted images and a way to override the system choice with a manual toggle.

Example

:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --text: #1a1a1a;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #121212; --text: #e8e8e8; }
}
:root[data-theme="dark"] { --bg: #121212; --text: #e8e8e8; }
body { background: var(--bg); color: var(--text); }

color-scheme tells the browser to darken built-in controls and scrollbars too. The data-theme selector supports a manual toggle.

Common mistakes

• Pure black backgrounds with pure white text, which can be harsh; slightly softer values read better.
• Hard-coded colors that bypass the variables.
• Applying the stored theme after load, causing a flash of the wrong theme.
• Forgetting to check contrast in both modes.

Related

• CSS variables
• Media query
• WCAG
• CSS

This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.