light-dark()
Picks one of two colors based on the page's current color scheme. Pass a light-mode color and a dark-mode color, and the browser uses whichever matches color-scheme. No duplicate rules or media query needed.
Quick example
:root {
color-scheme: light dark;
}
.element {
color: light-dark(#111, #eee);
background: light-dark(#fff, #1e1e2e);
}light-dark() Browser Support
Newly available Since 2024 83% global usage
Since 2024 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Works in all modern browsers. May need a fallback for older browsers.
123+
120+
17.5+
123+