Dark Mode Revisited
Dark mode has gone from an oddity to being fully supported on Safari, Firefox and Chrome. While this is great news (especially if you also get migraines), it also means that my hacked together dark mode post from less than a year ago is outdated. Time for round two.
Every major browser supports the CSS media query
@media (prefers-color-scheme: dark). This should now be the primary deciding factor in whether to display a site in light or dark mode.
Before I used local storage to permanently save someone’s preferences. This has flaws. I might open a site in the morning on my way to work and revisit it in the evening at home with different theme preferences.
Another positive change is more and more themes for major site generators already have a dark mode built into them. If you aren’t using or a theme or built your own, read on.
Step one: CSS variables everywhere
You can no longer hardcode colors into CSS if you want to switch between themes. Instead every color has to be declared with a variable.
Your CSS should look like this:
Don’t do this:
Simplicity: the buttonless solution
In the HTML element declare all of your light mode variables. It should look something like this:
Then create a media query for dark mode and declare your variables for dark mode.
The override button
I prefer to always have my computer set to dark mode but find it easier to read longer texts in light mode. To accommodate this, a site would need a button or switch to override the system preferences
<html> tag to
<html data-theme="dark"> (or light). This then sets the variables using the non-system color scheme.
Next we need a button that will do this for us:
First, we need to figure out what mode the page is currently in. It’s not so easy to find out what’s been computed, instead I use two indirect ways:
Based on the current mode, I display the text of the button as either light or dark mode:
Next, I added an event listener to detect if the system preferences change. This changes the site to match the system preferences.
The next function is called if mode switching mode is clicked. It overrides the system preferences using session storage. This keeps the theme consistent as you navigate around the site. The reason I opted for session storage rather than local storage, is that I still assume it’s more likely you’ll want to match your system preferences when you return. If not, it’s a single click to change it back to override the system preferences.
The function works by first figuring out which of the four possible states the mode is in:
- User selected dark mode (overridden)
- User selected light mode (overridden)
- System set light mode
- System set dark mode
Then the desired CSS is used by changing
<html data-theme="dark / light">, session storage set and the text of the button changed.
The last section checks if there is local storage set to override the system set theme. It’s important that this section come last, otherwise the event listener will always win out and display the system color mode.
I’ve tested this on Safari, Firefox and Chrome plus iOS without any issues.
The biggest potential problem would be a flash of the non-desired theme while your page is loading when the reader has selected to override the system preferences. Since this runs last in the code, it could take a split second to run if your site has a slow load time. If you’re using a static site generator like Jekyll, Hugo or Gatsby that shouldn’t be a problem.
If you do notice it though, add the last section of code to the top of your page as well as keeping it at the bottom. This will load the overridden theme first and when the event listener tries to overrule it, the last section of code will cancel it out.
The complete code
Happy dark moding! 🤓