Implementing dark mode in a handful of lines of CSS with CSS filters
Just updated the site and the post with a workaround that works on Firefox also (unlike other browsers, Firefox doesn’t apply the invert filter to the root element’s background).
@nicod_ @aral Yeah, there's something weird here on Firefox 78 on Linux. It looks like the "background-color: #eee" in the dark mode block is getting applied without then being inverted. If you change it to #111 it looks great, and is probably the intended effect.
I wonder if the background color on the html element is handled specially in Firefox, and escapes the filter. If you change that rule to target body, it works as desired (but you know, narrower).
@aral Not to spoil the fun, but this strategy is ill-advised. Tons of devices still get artifacts when using filters because your relying on seldom used GPU functions. Especially inverting something inverted produce undesirable effects. It’s okay for like an image or single secondary element, but you risk breaking the experience entirely when doing it to the entire page. Under-powered devices may also run into performance issues when applying filters to the entire page.
@da @aral This approach also seems like something that could be done across the board with a browser extension, which makes me inherently suspicious of the technique -- if it works, why don't people just use an extension?
(I don't use dark mode, so I have no idea what the failure modes are. Useful to hear about the GPU and CPU issues here, and I'm curious to hear more about what the visible artifacts are!)
@aral Hey man, this seems to work in Firefox if you add it to the <body> instead of <html>. Instead of centering the <body> the way you currently are, you could use a wrapper <div> instead.
@kieranbarker Thanks Kieran, just implemented it on body and set the background colour manually on the root element + updated the post: https://ar.al/2021/08/24/implementing-dark-mode-in-a-handful-of-lines-of-css-with-css-filters/
@kieranbarker Merci, just hacked together the simplest thing that could possibly work :) (Been on a yak-shaving spree recently so trying to pull myself back a bit.) :)
@LaBecasse To each their own :) If your eyes prefer light mode, use light mode. If they prefer dark mode, use dark mode. If they prefer light mode during the day and dark mode during the night, do that ;)
@aral I still wondered whether in general our eyes better read black over white or the inverse. I need to dig this up
@LaBecasse @aral I personally am unable to read dark mode due to astigmatism, but appreciate that some people need it, what bugs me is the recent trend towards claiming an apps new dark mode is "better for your eyes" when that can't possibly be a universal claim and as the article says, eye strain isn't caused purely by using light themes.
I have heard that using dark mode can make you less comfortable with light modes, especially if you flick quickly between apps in different modes or someone shares a bright screenshot (hence all the moaning on discord when one dares to post a light theme screenshot when us light themers are in the minority)
The social network of the future: No ads, no corporate surveillance, ethical design, and decentralization! Own your data with Mastodon!