5 min read

Adding dark mode with automatic system preference selection

Creating a dark, or light, version of your website may seem like a daunting task if you think you need an entirely new color pallet. It's 2022 though and we have the widely supported invert CSS filter.

Light mode to dark mode swap
Author
Isaac Bythewood Isaac Bythewood
July 02, 2022

Luckily all modern browsers since 2015 have had a CSS filter to help with creating dark and light mode color schemes based on your current theme, invert. With roughly ~95% global support for this filter you can safely create a dark mode version of your site with it. I'm doing it on this site right now!

Here's the dark theme for this website:

One of the first things you'll want to fix when doing a global invert is images. The invert filter will invert literally everything, including pictures, which you probably don't want inverted. I made a global img option to reverse all image inverts by inverting it again. I've seen no noticeable performance loss or image issues from doing this thus far. My blocks of code are already "dark mode" so there's no point in inverting them. There is also a helper class .reverse-invert that can be used on the fly when I think it's needed. I also don't invert the entire page and I just invert my content since my navbar and footer work in both dark and light mode. You could easily change this to be body.dark to invert everything.

You now have a dark mode theme for your site. Spot check over things and add .reverse-invert when you think it's needed and maybe run a lighthouse check for color accessibility doing slight adjustments where required.

The next step is to make our color mode swapper, I add a little bit more CSS for this but mostly relied on Bootstrap classes.

Then for the HTML element I use a simple select field with some inline SVG icons that I got from Bootstrap's icon project.

And finally the JavaScript portion that makes the selector work. This entire system checks for your computer's preferred color scheme above all else and will use that unless you manually change it.

Once all added you'll have a selector that looks something like this that you can then swap between modes with.

Dark mode selector

You now have a fully working dark and light mode theme selector with an easy to use invert system to make future maintenance and additions easy.

Finally, an invert word of warning, I've found that some elements, like "position: fixed" and "position: sticky" sometimes don't preform as expected when being inverted unless you invert the "body" or "html" element of your website so always test. You may have to change how you invert based on your site's design.


Related posts

Some posts in similar tags to this one.

Caddy website
Caddy configuration for Django with some sensible defaults
Caddy is a great web server with sensible defaults but there a few things that I need to configure to have perfect synergy with Django.
Isaac Bythewood Isaac Bythewood
June 04, 2022
Django Dockerfile
Running a simple Django website in Docker
Using Docker to run a simple production and development environments with a few extras thrown in. Easily customized to your preferred language or framework.
Isaac Bythewood Isaac Bythewood
May 14, 2022
CodeMirror website
Using CodeMirror to show formatted code in Wagtail
Going through all the steps to use CodeMirror with Wagtail to show formatted code on the frontend of your site.
Isaac Bythewood Isaac Bythewood
June 11, 2022
© 2022 Isaac Bythewood. Some rights reserved.