Using CSS variables to create a dark mode for your site

These days, building a dark theme is easy thanks to media queries. Change the preferences on your computer of phone and see this page change from light mode to dark and back again

body {
    background-color: white;
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: black;
    }
}

This is how I’ve done it all for a couple of years, it’s simple and effective but it can also be a pain to maintain if you have a large amount of CSS to work with. I’ve been using a combination of LESS and SCSS for over a decade so variables was the obvious way to make this all more manageable.

As I was rebuilt my portfolio, something that requires around 400 lines of uncompressed CSS, I realised just how much effort was going into overwriting colours to cater for dark mode. I just knew there was a better way to do it than overwriting each colour, even with the benefit of SASS behind me.

CSS variables to the rescue!

As part of the original review process for SITEJOY I was inspecting a lot of CSS and kept coming across CSS variables where they were used just to specify the colours used on the site. Without any thought, it seemed odd given you could achieve the same with pre-processors, but then it hit me.

Whether it's dark mode specifically or for creating themes, using CSS variables means I only need to change the colour values. I no longer need to redeclare selectors and properties for overwriting, CSS variables take care of it all! (I know, I know, it's really obvious when you think about it)

Examples on Codepen

I've got three examples to explain my journey, you can test them by turning dark mode on and off on your computer or phone.

First, here is a Codepen for how I would have approached this before the days of CSS pre-processors:

Here's a Codepen for how I was doing this until recently, declaring multiple variables that were then only called depending on the theme chosen:

Lastly, here's how I'm approaching it now with CSS variables:

Even for this basic example, the CSS to create the dark them has reduced from 9 lines of CSS down to just 4 and I'm not having to declare variables that have nuanced names that are specific to bits CSS.

It's the way forward but problematic for older browsers. I'm not supporting them for anything I'm doing at the moment so while I'd like to find a solution, it's not a real concern for me at the moment. Next, I really need to tidy up how this is handled on my blog and on SITEJOY so that they are a little easier to manage. Not often I change things drastically, but if a new element is added to the page I shouldn’t have to think about how it works in either mode.

I feel like I was blind to what seems really obvious because o was already using variables, just in the ‘wrong’ post of the workflow!

Happy to say I’m no longer a CSS variables snob!