Minimal Dark Mode

Published on November 4, 2022 (↻ March 24, 2025), 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—and assuming a background color to be set—, 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.

Update (March 24, 2025)

After mixed reactions to a toot pointing to this article, I decided to test the current status, my understanding, and some assumptions.

I set up three tests: a HTML-only, a CSS color-scheme-only, and a “CSS-only” dark mode (based on this article).

The results so far, after testing in a Chromium browser (Vivaldi) and a WebKit one (Safari): The fewest issues—none from my view, but you might dislike the filter or something else—can be observed with “CSS-only,” which I think means it’s still a valid choice.

While these are quick tests where I probably have made mistakes (please share your observations and suggestions!), one thing is also clear:

On pages with no styling at all, <meta name=color-scheme content="light dark"> works, as a one-line HTML-only dark mode. (See it in effect on e.g. mirrors.meiert.org.)

^* In this case, something like <meta name=color-scheme content="light dark"> or html { color-scheme: light dark } could be all it takes (see color-scheme Test).

About Me

I’m Jens (long: Jens Oliver Meiert), and I’m a web developer, manager, and author. I’ve worked as a technical lead and engineering manager for small and large enterprises, I’m an occasional contributor to web standards (like HTML, CSS, WCAG), 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. (I value you being critical, interpreting charitably, and giving feedback.)