light-dark() image valuesBaseline · Newly available
The light-dark() CSS function accepts, in addition to colors, two <image> values, such as a gradient or URL, 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 Sep 14, 2026.
Browser support
DesktopChrome
1–149Not supported
150+Supportedsince Jun 30, 2026
Current: 155Edge
12–149Not supported
150+Supportedsince Jul 2, 2026
Current: 154Firefox
1–149Not supported
150+Supportedsince Apr 21, 2026
Current: 157Safari
1–26.6Not supported
27+Supportedsince Sep 14, 2026
Current: 27MobileChrome Android
18–149Not supported
150+Supportedsince Jun 30, 2026
Current: 155Firefox Android
4–149Not supported
150+Supportedsince Apr 21, 2026
Current: 157Safari iOS
1–26.6Not supported
27+Supportedsince Sep 14, 2026
Current: 27How to use
Every current browser supports this, but it only became Baseline on Sep 14, 2026. Use it as a progressive enhancement, or keep a fallback if you support older devices.
Example
Full syntax and examples are on MDN — see the links below.
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
}