I’ve written about light-dark() before here on bram.us, and last month I also wrote an article for web.dev about it.

The article takes a bit of a different approach, so it’s still worth a read even when you’ve seen my previous one before.

System colors have the ability to react to the current used color-scheme value. The light-dark() function exposes the same capability to authors.

I’m especially fond of this demo that I built. The page responds to your Operating System’s light/dark setting but also allows overriding light/dark mode by changing the value of the color-scheme to only light or only dark.

See the Pen
Color switching with light-dark() and color-scheme by web.dev (@web-dot-dev)
on CodePen.

CSS color-scheme-dependent colors with light-dark() →