CSS light-dark() Function
Example
Enable two color-value settings with the light-dark() function:
:root {
color-scheme: light dark;
--light-bg: snow;
--light-color:
black;
--dark-bg: black;
--dark-color: snow;
}
* {
background-color: light-dark(var(--light-bg), var(--dark-bg));
color: light-dark(var(--light-color), var(--dark-color));
}
Try it Yourself »
Definition and Usage
The CSS light-dark() function enables two
color-value settings, and will return the first value if the user has set a light
color theme, and the second value if the user has set a dark color theme.
To use the light-dark() function, the CSS
color-scheme property must have a value
of light dark.
Tip: Users can set their color-scheme preference through their OS settings (light or dark mode) or their browser settings.
| Version: | CSS Color Module Level 5 |
|---|
Browser Support
The numbers in the table specify the first browser version that fully supports the function.
| Function | |||||
|---|---|---|---|---|---|
| light-dark() | 123 | 123 | 120 | 17.5 | 109 |
CSS Syntax
light-dark(lightcolor, darkcolor)
| Value | Description |
|---|---|
| lightcolor | Required. Specifies the color value to use for the light color scheme |
| darkcolor | Required. Specifies the color value to use for the dark color scheme |
Related Pages
CSS reference: CSS color-scheme property.
CSS reference: CSS var() function.
CSS tutorial: CSS variables.
