light-dark()
Newly availableSince 202491% of users
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.
What's modern
From web-features, MDN's browser data and our snippets, checked dailyModernIn every major browser since May 2024. Widely available around November 2026.
The old way and the modern waySee the snippet: Dark mode colors without duplicating values →
Old way 10 lines
:root {
--text: #111;
--bg: #fff;
}
@media (prefers-color-scheme: dark) {
:root {
--text: #eee;
--bg: #222;
}
}Modern 4 lines
:root {
color-scheme: light dark;
color: light-dark(#111, #eee);
}See how modern your own CSS is.Check your CSS →
Quick example
:root {
color-scheme: light dark;
}
.element {
color: light-dark(#111, #eee);
background: light-dark(#fff, #1e1e2e);
}Related snippet
Dark mode colors without duplicating valuesColors →light-dark() browser support
BaselineNewly availableSince 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.
Usage91%of people can use this9% use a browser without it.
Browsers
123+
120+
17.5+
123+Mobile123+Android120+Android17.5+iOS
123+120+17.5+123+123+Android120+Android17.5+iOS