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…