light-dark()

One declaration that covers both themes

Caveatlight-dark() does not look at the media query, it looks at the computed color-scheme of the element. Leave that unset and it silently returns the first value forever — the second swatch above is the same CSS with color-scheme: normal, and it never changes. A theme that half works is harder to find than one that does not work at all, and this is the usual reason for it.

FallbackAn engine without the function drops the whole declaration, so the property keeps whatever value came before it in the cascade. Declare the plain colour first and light-dark() after: old engines keep the first, new ones take the second, and no feature query is needed.

.panel {
  /* without this, always the light one */
  color-scheme: light dark;

  /* old engines stop here */
  background: #f6f4ec;
  background: light-dark(#f6f4ec, #171d28);
}

Published 25 Aug 2026