CSS light-dark() Function

Definition and Usage

CSS's light-dark() function allows setting two color values, if the user sets a light theme, it returns the first value; if the user sets a dark theme, it returns the second value.

To use light-dark() function, CSS's color-scheme The property must be set to light dark.

Tip:Users can specify their color scheme preference through operating system settings (light or dark mode) or browser settings.

Example

Usage light-dark() The function enables two color value settings:

: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

CSS Syntax

light-dark(lightcolor, darkcolor)

Technical Details

Browser Support

The numbers in the table represent the browser version that first fully supports this function.

Related Pages

Reference:CSS color-scheme property

Reference:CSS var() function

Tutorial:CSS Variables