Web Browser Dark Mode Compatibility Update

Frugal Flannel now looks great in dark mode! I spent some time this weekend tweaking settings, images, and reviewing past articles to ensure that everything on the blog is providing a great user experience for those who browse in both light (i.e. “regular”) and dark modes.

I remember trying browser dark mode extensions around a year ago and wasn’t impressed. Earlier iterations simply inverted the colors on the whole page to display white text on a black background. This meant the images were inverted too, so everything except text-only pages tended to look terrible. This was a disappointment for someone like me who occasionally likes a less bright screen experience to reduce eye strain at night.

I tried dark mode when web browsing again a few days ago and was pleasantly surprised by how far it has come. It’s not great on every website, but it works well on sites that put a bit of effort into checking out their site in dark mode and tweaking as needed.

Here’s an example of what Frugal Flannel now looks like in dark mode:

I played around with the idea of adding a dark mode toggle button to the site itself. There’s a few WordPress plugins that enable this, however I decided against it for a few reasons. Although it looked good on desktop, the toggle button was in the way for mobile users, and the best dark mode WordPress plugins locked movement of that button’s position behind a subscription fee. Additionally I like to keep my blog simple and clean for fast load times. Adding more and more plugins is antithetical to that.

Ultimately, readers who care about dark mode, probably care about it enough that they want to use it on multiple sites that they visit. For all of the above reasons, a client-side implementation makes more sense than server-side.

Browsers with built-in dark mode features don’t appear to be quite ready yet

Among all browsers, Chrome appears to be the only one currently playing with a built-in feature for dark mode. It’s an experimental feature, so unless you’re comfortable messing around with that stuff you probably want to steer clear. You can turn it on by typing chrome://flags/#enable-force-dark into your URL bar and enabling the feature. The actual dark mode feature itself looks very nice, however there’s no easy toggle button to turn it on and off outside of the flags list, and not everyone uses Chrome.

Personally I’m a Firefox guy, and I like a quick toggle since I prefer to browse in light mode most of the time (especially on my desktop) so that led me down the browser extension path.

Dark Reader: the best dark mode extension for every browser

The Dark Reader browser extension is the best way to implement dark mode that I have found. It is compatible with all major web browsers, renders content as well or better than Google Chrome’s experimental dark mode, and has an easy toggle switch. Best of all it is completely free.

Please let me know in the comments below if anybody notices something I overlooked that doesn’t look quite right in dark mode. Happy reading — now in light-on-dark, or dark-on-light!