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).


With thanks to @kieranbarker, @varx, @silmathoron, @cassidyjames, and others on the fediverse for their help.

@aral saving the web one eyeball and led pixel at a time

@aral Thanx for the post, but the contrast on your text is really bad :-(

(Firefox 91.0.1 on MacOs)

@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).

@varx @nicod_ Ah, thanks for catching that. Assuming it’s an order of application issue: on WebKit, the background colour is applied and then inverted. Firefox is apparently doing the opposite. Will have a play and fix it today :)

@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 would filter:unset work instead of inverting the invert? Haven't tried it myself.

@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: ar.al/2021/08/24/implementing-

@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.) :)

@aral Tanks for that ! I am also a big fan of dark mode, but I recently read this:

Now I don't know what to think about dark modes. Do you have more details about the advantages of dark modes for accessibility, readability, etc ?

@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)

@aral @kieranbarker @varx @silmathoron @cassidyjames You can merge the body line with the other inverters too.

/* Invert the body and undo inversion for the rest */
body, img, video, iframe { filter: invert(100%) hue-rotate(180deg); }

Sign in to participate in the conversation
Aral’s Mastodon

The social network of the future: No ads, no corporate surveillance, ethical design, and decentralization! Own your data with Mastodon!