Using light-dark() without getting caught out

It’s important that we respect our users’ preferences, which includes their choice of Light or Dark Mode. Recently, I’ve been looking at a tidier way to do that in CSS. In 2024-ish, the light-dark() CSS function quietly became available in most modern browsers. It caught my attention as it’s a really efficient way of defining Dark Mode colours without using media queries (and SCSS mixins). This is how I’ve been tackling Dark Mode, using a media query: color: black; background-color: white; @media (prefers-color-scheme: dark) { color: white; background-color: black; } That would produce black text on a white background for Light Mode, and white text on a black background for Dark Mode. The light-dark() function tidies that up a wee bit: color: light-dark(black, white); background-color: light-dark(white, black); First things first Before light-dark() can do its thing, you have to tell the browser which colour schemes your website supports. You can do this in one of two ways; first, in…

Commenting on Bubbles has been removed. Why? If you want to talk about this post, write to the author, use the comments on their blog if it has them, or reply with a "RE:" post on your own blog. Suggestions? feedback@bubbles.town