Minimal Dark Mode

Published on November 4, 2022 (↻ February 5, 2024), filed under Web 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 being 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, and I’m an engineering lead and author. I’ve worked as a technical lead for companies like Google and as an engineering manager for companies like Miro, I’m close to W3C and WHATWG, and I write and review books for O’Reilly and Frontend Dogma.

With my current move to Spain, I’m open to a new remote frontend leadership position. Feel free to review and refer my CV or LinkedIn profile.

I love trying things, not only in web development, but also in other areas like philosophy. Here on meiert.com I share some of my views and experiences.