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).
@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)
This is my personal Mastodon.