x ai css light-dark 2026-06-14

By Xah Lee. Date: .

x ai css light-dark

ai generated

light-dark()

The light-dark() function in CSS lets you define two colors in one property: one for light mode and one for dark mode. Here's how it works:

color: light-dark(#1a1a1a, #f5f5f5);
background-color: light-dark(#ffffff, #1f1f1f);

It automatically picks the first color when the page is in light mode, and the second when it's in dark mode. No extra JavaScript or media queries needed in the element itself.

You just set color-scheme: light dark; on your root element, and the browser does the rest. It's one of the cleaner ways to handle theming now.