Come to the Dark Side, We (Don’t) Have Cookies

If you prefer using dark mode in browsers and apps, then I have good news for you! My website now automatically syncs with your browser’s dark mode preferences — no toggle or cookies required.

I have a small quality of life improvement to report: if you prefer using dark mode, this website now supports it. Simply ensure that you have dark mode enabled in your browser to view my content sans a blinding white background. That’s it! No distracting toggle button or intrusive cookie preferences necessary.

When I designed this website, I initially wanted dark mode enabled at baseline. I use dark mode whenever I can, as I personally can’t edit code without it and experience severe eye strain when I spend long amounts of time reading dark text on a light background. All the advice I ended up reading about modern website design cautioned against doing that, however, as light mode is still preferable for most end user applications.

Plugins Weren’t an Option

I briefly considered using a WordPress plugin to at least give frontend users a toggle for both modes. I use a dark mode plugin on my site’s backend, after all, to make editing easier for me. Unfortunately, none of the various plugins available were an option.

First of all, things I would consider to be “basic” features are gated behind the expensive “pro” versions of all these plugins. Imagine spending USD $50 every year, just so you can stick a toggle button in your menu or change a particular colour! I don’t mind spending money to improve user experience, but I’m also not dropping that kind of cash to unlock basic features.

Furthermore, I encountered a number of problems while testing various plugins. The worst one was the brief flash of white caused by every new page load when not logged in to my site. I don’t permit guest registration on my website, so this issue would have affected every single dark mode user that wasn’t me. It’s possible to fix this problem, but it irritated me on principle. Surely this shouldn’t be an issue on a “premium” USD $50/year plugin?

GeneratePress to the Rescue

Since plugins weren’t an option, I had to do it manually. As always, the GeneratePress forums had a wealth of information available. I ultimately ended up following the helpful advice on this post by Customer Support. If you’re also a WordPress blogger running GeneratePress, check it out if you want an easy way to add dark mode to your site.

What I love about this solution is that it’s extremely light on code. No unnecessary JavaScript bloat. I also like the fact that it does not necessitate adding anything to localStorage or installing a user preferences cookie. This means I don’t have to bombard you with irritating GDPR pop-up cookie banners! Best of all, I can customize all of my ideal dark mode colours (you know, a basic feature) without having to purchase a buggy USD $50/year plugin. 🙌

I tested this new feature out extensively in Edge, Chrome, and Firefox before launching it, and am happy to report that I’ve yet to encounter a single problem. That said, if you use a different browser that supports dark mode and run into any glaring issues, please give me a heads up.


Questions?

Do you have a question about the subject matter of this blog post that I didn’t answer above? Feel free to leave a public comment on my YouTube channel by clicking on the button below, and I’ll get back to you there as soon as I can.

See Also: