1 Thing A Week 1 Thing
A Week

Using CSS variables to create a dark mode for your site After embracing the power and convenience of CSS variables, I've finally seen the light!

Week 162.0 — 30th November '20

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 an absolute 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 1 Thing A Week 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!

More from 1 Thing A Week
« Re-designing my portfolio 2019 Gift Guide

Advertisement

Notable

Nothing notable this week 😞

Jump to notable items for Week #161 , view the notable archive or my favourites.

About 1 Thing A Week

A website curated by @cchana bringing you 1 Thing A Week, delivered every Monday morning.

You can find a list of all articles in the archive, or read the most popular.

Find out more about 1 Thing A Week or read the privacy policy.

Market

Visit the market and support 1 Thing A Week.

You can find 1 Thing A Week on Twitter, Facebook, Instagram & Reddit

Basic Analytics