Playing with light-dark() function in CSS

Having not tried light-dark() that much I decided to create a little demo experimenting with it. Here's the result:

It's the same component written twice in the markup, but in the CSS all the colors are defined with the light-dark() function, like so:
background-color: light-dark(#f2f5f7, #111). This function gives you the ability to set a color value for either light or dark mode, so that if a user changes their OS/browser theme settings it will choose the color value suited for that mode. For this function to, well, function you have to declare the property color-scheme with a value of light dark on the root selector of your document, either :root or html (or svg if you document is just an SVG).

html {
  color-scheme: light dark;
}

Neat!

To emulate the two color scheme in this demo I've declared what scheme to use for each of the two blocks, like so:

.theme-block:first-of-type {
  color-scheme: light;
}

.theme-block:last-of-type {
  color-scheme: dark;
}

It even supports using the color-mix() function inside, like my hover styles for the blue Bluesky-logo:

.header-logo:hover {
  color: light-dark(
    color-mix(in srgb, #000 20%, #0085ff),
    color-mix(in srgb, #fff 20%, #0085ff)
  );
}

Will definitely explore this more!