light-dark()

Use With Caution Updated: Dec 17, 2025

A color function for defining two values, the first responding to light mode and the second to dark mode based on user preference or in response to an explicit value on color-scheme.

Baseline:
Newly
Functional:
Supported
Usage:
Cross-Boundary

The light-dark() function works fully within shadow DOM contexts: it inherits correctly, works through custom properties, with ::slotted(), and when set directly within shadow DOM. Requires a color-scheme value to be set. Note that light-dark() only applies to color values.

Ranked caution due to Baseline newly available status (May 2024). Unsupporting browsers revert colors to initial values, risking severe visual breakage.