Contact emails
[email protected]

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.

-- 
You received this message because you are subscribed to the Google Groups 
"blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to [email protected].
To view this discussion visit 
https://groups.google.com/a/chromium.org/d/msgid/blink-dev/69bb9df7.050a0220.1a988.00b8.GAE%40google.com.

Reply via email to