Introducing the light-dark() function

A groundbreaking addition to CSS, the light-dark() function simplifies the process of establishing dynamic themes. This function enables the setting of foreground and background colors for various color schemes in just one line of code, eliminating the need for the prefers-color-scheme media queries.

Here is the syntax for this:

element {
  property: light-dark(
    [color for light or default],
    [color for dark]
  );
}

The light-dark() CSS color function returns the first value if the user’s preference is set to light or if no preference is set, and the second value if the user’s preference is set to dark:

:root {
  color-scheme: light dark;
}
.element {
  color: light-dark(black, white);
  background-color: light-dark(white, black);
}

Important: light-dark() is an experimental feature

Please note that this feature is experimental...