What's New in CSS - Ste Greig

The light-dark() Function

Instead of having to wrap light/dark styles in a prefers-color-scheme media query, we can now use the light-dark() function to specify a color for light mode and a color for dark mode (in that order).

You can use it anywhere you'd normally specify a color value!

You won't need to reach for this much if you're using Tailwind, but it's a really nice utility to be aware of if you're writing vanilla CSS.

:root {
  /* required */
  color-scheme: light dark;
}

body {
  background: light-dark(#fff, #000);
  color: light-dark(#000, #fff);
}
  
div {
  border-color: light-dark(black, yellow);
}

color-scheme

As mentioned above, it also requires the color-scheme property to be set (usually on the :root pseudo-class).

It should generally have a value of light dark so as to not override the user's light/dark mode preference, but you can force light or dark schemes by default if you wish.

You can also set this color-scheme property on any elements of your page to force a particular section to use light or dark mode.

:root {
  color-scheme: light dark;
}

:root {
  /* Force light scheme */
  color-scheme: light;
}

:root {
  /* Force dark scheme */
  color-scheme: dark;
}

Try it out

Use the light/dark mode toggle to switch theme and see how these rules take effect.

Hello

div {
  background-color: light-dark(antiquewhite, #283249);
  color: light-dark(#000, #fff);
  border: 10px solid light-dark(#dacebd, #969fb5);
}