Stop duplicating your CSS for Dark Mode 🌓

Stop duplicating your CSS for Dark Mode
February 21, 2026 · 4 min read · css Web Development

Hey everyone,

Supporting Dark Mode usually means writing your color variables twice, once for light and once for dark.

css 
/* The "Double Work" Way */
:root {
  --bg: #ffffff;
  --text: #000000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --text: #ffffff;
  }
}

It’s a lot of boilerplate to maintain, and it’s easy to miss a variable. Not anymore.

The Modern Way: light-dark()

The new light-dark() function allows you to define both values in a single line. The browser automatically picks the right one based on the user’s system settings or the color-scheme property.

css 
:root {
  /* No media queries required! */
  color-scheme: light dark;
  
  --bg: light-dark(#ffffff, #000000);
  --text: light-dark(#000000, #ffffff);
}

body {
  background-color: var(--bg);
  color: var(--text);
}

Why this is a win:

  • One Source of Truth: You see both states of a component in one place.
  • No More Media Query Nesting: Your CSS stays flat and readable.
  • Instant Reactivity: It responds immediately to system changes without any JS listeners.

Important Requirement:

For this to work, you must set the color-scheme property on the :root (or a specific element). This tells the browser, “I support both modes; go ahead and use the light-dark() logic.”

P.S. I’m a long-time subscriber of the unicornclub.dev newsletter. It helps you ship better interfaces. Check it out!

Happy coding!

Marko

Add to your preferred sources