Jens Oliver Meiert

Minimal Dark Mode

Post from November 4, 2022, filed under (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.

Toot or tweet about this?

About Me

Jens Oliver Meiert, on September 30, 2021.

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!

Read More

Maybe this is interesting to you, too:

Looking for a way to comment? Comments have been disabled, unfortunately.

Cover: The Web Development Glossary.

Get a good look at web development? Try The Web Development Glossary (2020). With explanations and definitions for literally thousands of terms from Web Development and related fields, building on Wikipedia as well as the MDN Web Docs. Available at Apple Books, Kobo, Google Play Books, and Leanpub.

Learn about new posts by feed, on Mastodon, or on Twitter.

Found a mistake? Email me, jens@meiert.com.

You are here: Home → Archive → 2022 → Minimal Dark Mode

Last update: November 4, 2022

Professional frontend developers produce valid HTML and CSS.