Laziest Possible Dark-Mode Toggle - Using :has() and invert()

By @edent · accessibility css HTML · 3 comments · 300 words

I'm not saying this is a good way to make a dark mode website. I'm not even saying it's a sensible way to do dark mode. But I'm pretty sure this is the laziest way of getting dark mode on your site. And it is all done with less than a handful of CSS rules.

It relies on the new-ish :has() CSS pseudo class and the positively ancient filter() CSS function.

Here's the code in all its glory:

 CSSbody:has( > #dark-mode-checkbox:checked ) {

  filter: invert(1);

  background: #000;

}



#dark-mode-checkbox:checked ~ img {

  filter: invert(1);

}

That does three things. If the body has an <input id="dark-mode-checkbox" type="checkbox"> which is selected, then:

Invert all the colours on everything on the site.
Manually set the background of the body, because the above is only filtering the descendants of the body.
Find any images and invert them, so they're the right colour.

Here's some minimum viable HTML:

 HTML<body>

  <input id="dark-mode-checkbox" type="checkbox">

  <label class="dark-mode-label" for="dark-mode-checkbox">Enable dark mode</label>

  <h1>Heading</h1>

  <p>Test</p>

  <img src="https://placecats.com/128/128" alt="A cute cat">

</body>

Demo

You can play with the demo.

It should look like this:

Caveat

A few issues:

This doesn't yet work on Firefox. Even if you enable layout.css.has-selector.enabled in about:config. Support is coming soon™.
Inverting colours isn't the same as a properly designed dark mode. You absolutely shouldn't use this in production.
There are no accessibility guarantees. Please test this before subjecting your users to it.
This doesn't remember your user's choice. So they'll need to toggle it on every page load.
Who knows what eldritch horrors this will unleash upon humanity.

3 thoughts on “Laziest Possible Dark-Mode Toggle - Using :has() and invert()”