Minimal Dark Mode · Jens Oliver Meiert

Minimal Dark Mode

Post from November 4, 2022, filed under Web Development (feed).

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 pointing 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—currently manager for Developer Experience at LivePerson—and author. I’ve worked as a technical lead for Google, I’m close to W3C and WHATWG, and I write and review books for O’Reilly. I love trying things, sometimes including philosophy, art, and adventure. Here on meiert.com I share some of my views and experiences.

If you have a question or suggestion about what I write, please leave a comment (if available) or a message. Thank you!