Dark Mode for the web
I generally prefer dark user interfaces wherever possible. My phone is set to a dark mode (as far as there is a dark mode in Android Pie), apps like Telegram are set to dark mode and on the desktop I prefer dark modes too. But the most important software I use everyday is a web browser. And most websites don’t support a dark mode yet (because there was no native browser feature for that until recently).
Because white websites annoyed me, I installed Dark Reader some time ago. Dark Reader is a browser add-on that turns light websites into dark websites by inverting some of the pages colors. On most pages it works quite well, but I found myself using the “add exception for this page” feature quite often to turn the plugin off for some pages.
But now that there is native support for dark modes since Firefox 67 (Safari already has this too and Chrome is coming soon), I decided to uninstall this plugin and make use of the native support. Not every website developer makes use of this new CSS feature yet, so there are still a lot of white websites. But the websites that support it already look much better with native dark mode than with using Dark Reader.
If you use Firefox but your system doesn’t have a setting for dark mode, you can force dark mode setting an option in
about:config: Create a new integer with the name
ui.systemUsesDarkTheme and the value
My websites already had a dark mode for some time using a toggle in the footer that changes some CSS variables depending on it’s state. Now I also added the native dark mode support using the CSS feature
prefers-color-scheme. Documentation for that is available in the MDN web docs.
My Hugo theme, which I use for all my websites, now also detects whether the browser already implements this new feature and has set
prefers-color-scheme to either
dark and disables the toggle then.
I encourage all developers making use of this new feature! I think I’m not the only one appreciating dark themes and preferring them over light ones. It’s much easier on the eyes.
Tags: CSS, Dark Mode, Firefox, Web