light-dark()

ELI5 - The Vibe Check

light-dark() is CSS finally admitting that every site needs both a light and dark color and being tired of writing two separate media query blocks for it. You give it two colors, and it picks the right one automatically based on the page's color scheme. One line instead of a whole prefers-color-scheme media block.

Real Talk

light-dark() is a CSS color function that takes two color values and returns the first when the element's color scheme is light and the second when it's dark, based on the computed color-scheme property. It requires color-scheme: light dark to be set on the root element to activate, and eliminates the need for separate prefers-color-scheme media query blocks for simple color swaps.

Show Me The Code

:root {
  color-scheme: light dark;
}

body {
  background: light-dark(white, #1a1a1a);
  color: light-dark(black, #eee);
}

When You'll Hear This

"We replaced half our dark mode media queries with light-dark() and the CSS got so much shorter." / "light-dark() does nothing until you set color-scheme on , that tripped us up at first."