Dark themes are all the rage. macOS introduced dark mode with Mojave in September last year. Microsoft shipped its system-wide dark mode in the October 2018 Windows 10 update and iOS 13 added a dark mode for iPhones in September this year. Google added a dark theme with its Android 10 release that same month.
Most browsers (Chrome, Firefox, Safari, and Opera) now support the ‘prefers-color-scheme’ CSS media query and will switch the website’s color scheme based on the system-wide setting (if the website defines it of course).
There is no system-wide ‘dark mode’ on Linux as far as I know, so how do you tell your browser you prefer a darker color scheme? Luckily you can configure each browser individually to request the website’s dark mode if the website supports it, but it requires a bit of digging.
Firefox doesn’t expose the setting in the interface. Type ‘about:config’ in the location bar and press enter. Right-click anywhere in the list and choose “New > Integer”. Enter ‘ui.systemUsesDarkTheme’ as preference and 1 as the integer value. Open a website that supports a dark mode CSS theme and… voilà. Search for ‘ui.systemUsesDarkTheme’ and change its value to 0 to deactivate dark mode again.
The interwebs explain you should be able to launch Google Chrome with the ‘--force-dark-mode’ option but I could not get it to work on Ubuntu 18.04. Google Chrome simply ignores it, Chromium does switch its UI to a dark one but does not seem to trigger the ‘prefers-color-scheme’ CSS media query so websites do not switch to their dark scheme.
Opera is by far the easiest to switch between a dark and light color scheme: simply click the “Easy Setup” button on the right side of the toolbar and choose ‘Dark’ from the ‘Themes’ section. Done.
Need a website to try it out? I added a dark theme to this website of course, try it out! Check the Github commit to see how it was implemented.
This post is open source. Did you spot a mistake? Ideas for improvements? Contribute to this post via Github. Thank you!