The CSS `light-dark()` function is being extended beyond colors to support `<image>` values, allowing developers to swap background images, masks, and logos based on color scheme in a single declaration. This eliminates the need for repetitive `@media (prefers-color-scheme)` blocks and respects local `color-scheme` overrides. Browser support is early: available behind a flag in Chromium 148+, shipping in Firefox 150 (stable April 2026), and not yet supported in Safari. A `@supports` detection snippet using `linear-gradient()` is provided for progressive enhancement. For non-color, non-image values, a 3-line CSS Custom Function workaround is also shown.

4m read timeFrom bram.us
Post cover image
Table of contents
The Missing PieceBrowser SupportFeature DetectionBut what about non- <color> and non- <image> values?
3 Comments

Sort: