light-dark()
Picks one of two colors depending on the current color scheme.
Syntax
light-dark(light-color, dark-color)Parameters
| Parameter | Type | Description |
|---|---|---|
| light-color | color | The color for the light scheme. |
| dark-color | color | The color for the dark scheme. |
Examples
One declaration for both themes:
<style>
.card { color-scheme: light dark; padding: 12px;
background: light-dark(white, #222); color: light-dark(#222, white); border: 1px solid gray; }
</style>
<div class="card">Switch the system theme — this card follows it.</div>
<div class="card" style="color-scheme: dark;">This card is forced dark.</div>Notes
light-dark() works only where color-scheme allows both schemes. It saves writing a separate @media (prefers-color-scheme: dark) block for every color. Supported in all current browsers since 2024.
See also
- color-scheme — Tells the browser which color schemes the page supports, so built-in controls and scrollbars match.
- @media — Applies rules only under given conditions — the window width, the system theme and others.
- var() — Inserts the value of a custom property (a CSS variable).
Related recipes
In the tutorial
- Dark mode — How to make a dark theme for a site — the color-scheme property, the prefers-color-scheme media query, colors in variables, the light-dark() function and a theme switch.