The CSS light-dark() Function

Using the CSS `light-dark()` function to declare light and dark colour values in a single line.

Content tagged light-dark

• Tutorial:One-Line Theme-Aware Colors with light-dark()

  A single declaration per color, resolved automatically for both light and dark mode.

  The light-dark() CSS function collapses a light value and a dark value into one declaration, resolved by color-scheme — no duplicate custom properties, no @media (prefers-color-scheme) block per themed property.