Minimal Dark Mode

Published on November 4, 2022 (↻ October 19, 2024), filed under Development (RSS feed for all categories).

What’s the easiest and fastest way to set up dark mode?

Unless you’re working only with user agent defaults ^*, that’s a great question. It’s certainly not the first time it has been asked though: Credit for the following goes again to some who explored this much earlier—notably François Best and Heydon Pickering.

So what’s the most minimal dark mode? From what I know, this:

@media (prefers-color-scheme: dark) {

  * {
    background-color: inherit;
    color: inherit;
  }

  html,
  img:not([src$='.svg']) {
    filter: invert(1) hue-rotate(180deg);
  }

}

Could you see the result somewhere?

Sure (simplified): Inverted Styling Test. (One day, I’ll move this all to my CodePen profile.)

What does it do?

1. apply styling when dark mode is active (prefers-color-scheme: dark);
2. ensure that every element has a background color (with the assumption it ultimately inherits one from body or html);
3. flip colors on everything except non-SVG images.

Is this perfect? (Define “perfect”!)

No: It doesn’t consider the color-scheme property, which you could use in conjunction.

But: Given the little code it needs and, therefore, how economic it is, it’s extremely good! In practice—I use this approach here on meiert.com as well as on uitest.com—, it works reliably, too.

Is there an equally reliable, more minimal dark mode? Please share your setup as a response to the toot for this post.

I write about minimal code all the time (check out my book series), but recently covered minimal social markup, too.

Many thanks to Sara Wallén for emphasizing the usefulness of color-scheme, prompting me to rework parts of this post, as well as Leon Paternoster for suggesting to be explicit about color.

^* In this case, something like html { color-scheme: light dark } would be all it takes—see color-scheme Test.

About Me

I’m Jens (long: Jens Oliver Meiert), and I’m a frontend engineering leader and tech author/publisher. I’ve worked as a technical lead for companies like Google and as an engineering manager for companies like Miro, I’m a contributor to several web standards, and I write and review books for O’Reilly and Frontend Dogma.

I love trying things, not only in web development (and engineering management), but also in other areas like philosophy. Here on meiert.com I share some of my experiences and views. (Please be critical, interpret charitably, and give feedback.)