Intent to Prototype: CSS light-dark() with image values

[Chromestatus]

Contact emails

cg...@chromium.org

Specification

https://drafts.csswg.org/css-color-5/#light-dark

Summary

Extends the CSS light-dark() function to accept image values (url(), image-set(), none) in author stylesheets, allowing image properties like background-image, list-style-image, border-image-source, cursor, and content to automatically switch between images based on the user's preferred color scheme. Previously this was only allowed in UA stylesheets. This aligns with the CSS Color 5 spec and matches Firefox's existing implementation.

Blink component

Blink

Web Feature ID

light-dark

Motivation

Without this feature, web developers who want to switch images based on the user's color scheme preference must use @media (prefers-color-scheme) queries or maintain separate stylesheets for light and dark themes. This is verbose and error-prone, especially when the same element uses light-dark() for its color properties but must use a media query for its image properties. The light-dark() function already supports color values, making it the natural place for image values as well. Allowing url(), image-set(), and none inside light-dark() for properties like background-image, list-style-image, border-image-source, cursor, and content lets developers keep light/dark variants co-located and consistent with their color declarations. Firefox has already shipped this behavior. Aligning with the CSS Color 5 spec and Firefox removes an interoperability gap and reduces friction for developers building adaptive UIs.

Initial public proposal

No information provided

Goals for experimentation

None

Requires code in //chrome?

False

Tracking bug

https://chromium-review.googlesource.com/c/chromium/src/+/7675477

Estimated milestones

No milestones specified

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5123253146353664?gate=6278228337623040

This intent message was generated by Chrome Platform Status.