Theming with CSS Variables: OS Dark Mode + Manual Override

intermediate

By FrontendAtlas Team · Updated Jan 30, 2026

Create a themeable panel using ONLY CSS custom properties. Define light defaults on :root, redefine the SAME variables for OS dark mode via @media (prefers-color-scheme: dark), then add a manual override using html.theme-dark that is declared AFTER the media query so it always wins. Toggle by manually adding class="theme-dark" to the <html> element (no JavaScript).

Guides

Shipping Code Under PressurePlaybook JavaScript Problems That Actually Show UpPlaybook Build Great UI in 60 MinutesPlaybook

Preparing for interviews? Use guided tracks for structure, then drill company-specific question sets when you need targeted practice.

Explore interview tracks Browse company questions

<html> HTML

# CSS

/* TASK
  1) Define variables on :root (light defaults):
     --bg, --text, --surface, --accent, --border, --accent-contrast
  2) OS dark mode:
     @media (prefers-color-scheme: dark) {
  :root {
  ...same vars, dark values...
}
}
3) Manual override:
     html.theme-dark {
  ...same vars, dark values...
}
IMPORTANT: place html.theme-dark AFTER the media query so it always wins.
  Constraint:
    - .panel and .btn must use ONLY variables for colors (no literal colors).
*/
/* Base page styles using variables (you will define them) */
html, body {
  height: 100%;
}
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  line-height: 1.6;
  background: var(--bg);
  color: var(--text);
  display: grid;
  place-items: center;
  padding: 2rem;
}
.panel {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  max-width: 520px;
}
.btn {
  background: var(--accent);
  color: var(--accent-contrast);
  border: 0;
  padding: .5rem .9rem;
  border-radius: .6rem;
  font-weight: 600;
}

Live preview updates as you type

Building preview…