← Back to release summary

CSS light-dark() Color Function

Category
CSS
Type
Chromium catches up
Status
Enabled by default (Chrome 123)
Intent stage
None

Summary

Allows authors to provide separate colors for light and dark color-schemes on a per element basis. System colors and UA form controls are rendered with different colors depending on the color-scheme set on an element. Authors can have the same possibility through the light-dark() function: #target { background-color: light-dark(lime, green); } The #target element will have a green background if the used color-scheme for the element is 'dark'. Otherwise, the background will be lime.

Standards & signals

View on chromestatus.com