light-dark()Baseline · Newly available
The light-dark() CSS function accepts two colors and uses one depending on the current color scheme.
Works in the latest version of every major browser, but older devices may not support it yet. Baseline since May 13, 2024.
Browser support
DesktopChrome
1–122Not supported
123+Supportedsince Mar 19, 2024
Current: 155Edge
12–122Not supported
123+Supportedsince Mar 22, 2024
Current: 154Firefox
1–119Not supported
120+Supportedsince Nov 21, 2023
Current: 157Safari
1–17.4Not supported
17.5+Supportedsince May 13, 2024
Current: 27MobileChrome Android
18–122Not supported
123+Supportedsince Mar 19, 2024
Current: 155Firefox Android
4–119Not supported
120+Supportedsince Nov 21, 2023
Current: 157Safari iOS
1–17.4Not supported
17.5+Supportedsince May 13, 2024
Current: 27How to use
Every current browser supports this, but it only became Baseline on May 13, 2024. Use it as a progressive enhancement, or keep a fallback if you support older devices.
Example
CSS
:root {
color-scheme: light dark;
}
body {
background: light-dark(#ffffff, #0f1115);
color: light-dark(#111111, #e8eaee);
}Feature detection
CSS · check before using
@supports (color: light-dark(black, white)) {
/* styles that use light-dark */
}
/* or in JavaScript */
if (CSS.supports("color", "light-dark(black, white)")) {
// use it
}