Dark mode interfaces have matured a lot in the past few years. We all know the "traditional" approach using media queries but in this article, Sara Joy demonstrates modern CSS features that make respecting user color scheme preferences pretty darn easy.
The short answer is: quite a lot. The long answer covers some accessibility issues, some new CSS, some slightly older CSS, some high level colour theory, a bit about SVGs, and some typography finessing; all of which I’ll cover in this post.
The one where Sara wrote a post for CSS-Tricks 🧡🎉
A day late and a dollar short, but there is still a lot to talk about this week.
A new CSS function that returns one of two color values based on the current color scheme.
A concise recap of my ramblings, shenanigans and more throughout November 2024
Some bookmarks that I saved throughout 2025
Advanced light and dark mode techniques with Style Dictionary using data attributes, CSS classes, and the modern CSS light-dark() function.
Hand picked links that I want to share
A collection of bad practices in HTML, copied from real websites.
While there’s no truly native way to build a light/dark color scheme switcher yet, we all try our best to build something that comes close. Some native HTML options are often overlooked in favor of hacky solutions. Let’s make them well-known and widely used while we wait for the proper built-in one.