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! 🚀
Oldest comments (16)
Ooh! Reminds me of the early prototypes of dev.to's dark mode. Good times...
Hi Rik!
You would to do it more shortener
This selector will match everything(even html and body) except img tag)
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?
Crazy client:
One more thing. I wunna dark mode toggle pls.
Me now:
Here you go! (filter: invert(100%))
Just kiddin' [am I?]
Or don't lol
Awesome!
Really cool hack, thanks for sharing!
filter: invert(100%) is my new favorite thing.
It's a cool trick!
Some website's dark mode themes are so badly made that this would in fact look better 😅
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>
Haha this makes me a happy man 😂 😂 😂
Add hue-rotate(180deg) as well, makes it much better
So clever!
Sadly, as simple a thing as the invert filter could not be made consistent across browsers. Or is it just me?
(FTR, Firefox does it correctly, but I designed the image to match Chrome first, and now poor Firefox seems like the bad guy).
I reported the issue here bugs.chromium.org/p/chromium/issue...