Poor Man's Dark Mode Using CSS Filter

#css #webdev #html

Tap the "dark mode" checkbox in the top right corner.

The checkbox only toggles the dark-mode class on the <html> element.

What does the dark-mode class do?

html.dark-mode {
    filter: invert(100%);
}

html.dark-mode img {
    filter: invert(100%);
}

The filter property set to invert(100%) will invert all colours on the page. Because it's been assigned to img as well (and all images will be in the subtree of the <html> element) it will invert the colours again on each <img> element preventing the images from looking like photo negatives.

Voila! 🚀

Top comments (16)

Joe Beretta • Apr 15 '19 • Edited

Hi Rik!
You would to do it more shortener

:not(img) { filter: invert(100%) }

This selector will match everything(even html and body) except img tag)

Rik Schennink • Apr 15 '19

Apart from selector performance, which often is negligible, I wonder if filtering every element OR only the top one would result in a noticeable rendering performance. Also, would this not result in multiple elements inverting their parent element filter?

Rahul Dwivedi • Jun 9 '20

Add hue-rotate(180deg) as well, makes it much better

filter: invert(100%) hue-rotate(180deg);

Petee • Aug 26 '20

So clever!

Basti Ortiz • Apr 15 '19 • Edited

Ooh! Reminds me of the early prototypes of dev.to's dark mode. Good times...

Champi • Apr 15 '19 • Edited

Crazy client:
One more thing. I wunna dark mode toggle pls.
Me now:
Here you go! (filter: invert(100%))

Just kiddin' [am I?]

Gustavo Dezen • Aug 6 '19

Or don't lol

Bayu Angora • Sep 22 '19

Invert filter is only good for monochrome or minimal color. If you have so many color, then you have to add more filter to those part to avoid unnecessary inverted.

One question about dark mode. Observatory (grade checker by Mozilla) will downgrade score to website that still use inline or <script>. </p> <p>How to fix this issue while dark mode toggle needs "onclick" to trigger and switch the light / dark mode?</p>