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

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()

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.