light-dark() CSS function

The light-dark() CSS function picks one of two values based on the active color scheme: the first when the scheme is light, the second when it is dark. It lets you write light and dark styles in a single declaration instead of a separate media query, like background-color: light-dark(#fff, #111).

It now accepts images as well as colors, so a background can switch between two gradients or image files, and that works across Chrome, Firefox, and Safari as of Safari 27. The element or a parent needs a color-scheme set for it to respond, and it's a compact way to support dark mode without duplicating rules.