CSS light-dark() function

Definition and Usage

of CSS light-dark() function allows setting two color values. If the user sets a light theme, the first value is returned; if the user sets a dark theme, the second value is returned.

To use light-dark() function, CSS 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.

Páginas relacionadas

Referencias:Atributo color-scheme de CSS

Referencias:Función var() de CSS

Tutoriales:Variables de CSS