Our insights into the world of web

We added Dark Mode to our website and you should too

by Dan
Last updated: March 1st, 2020

Depending on how you’ve set your OS or browser preferences, your visual experience on the Speccy Media website could be quite different. Some visitors will see the website with lots of white space and bright colours, while others will see, well, they’ll see this…

Speccy Media Dark Mode Enabled

What we’re doing here is detecting if you, the visitor, have told your Operating System or web browser that you prefer a dark theme. If you do, we then apply a different set of rules via CSS to serve up a darker colour palette.

Why do websites need a Dark Mode?

Websites don’t strictly need a Dark Mode for their website, but for users that are anything like me, it really is appreciated. I spend most of my day in front of a computer, I find that the usual bright white backgrounds quickly introduce eye fatigue.

I only have to be browsing a light-themed website for 2-3 minutes before I find myself straining to read words on the page and more often than not, I simply leave the site just to get away from it.

A dark-themed website, however, I find far easier to navigate. The high contrast of a dark background and light text makes reading easier and I can stay on the page for as long as I need to.

Dark Mode isn’t for everyone though. In fact, some usability studies have shown that using white text on a dark background actually makes content harder to read (using a light grey colour instead can make it easier, as the tone of the colour is more muted).

With this in mind, I still believe websites should offer a dark theme for the visitors that have dark mode set in their preferences; they probably did this to help increase the usability of the apps and websites they use, and we should help them.

How to add dark mode to your website

The good news is it’s actually pretty simple to implement. In this tutorial, we won’t be adding a theme toggle to allow users to switch between themes, but instead, we’ll detect the light/dark mode preferences set in their Operating system or web browser.

We’ll do this using a simple CSS media query:

@media (prefers-color-scheme: dark) {
    // Our CSS will go here
}

When I built the Speccy Media website, I used CSS variables to set the colour palette for the site, so all we’ll need to do is update the colour values these variables reference.

If your website doesn’t use variables, don’t worry, this media query can be used just like any other; just declare your styles inside of the query (I’ll give you an example a little further down the page).

Setting light theme colours

:root {
    --bodyBackground: #f9faf9;
    --colorWhite: #ffffff;
    --colorSalmon: #fd646f;
    --colorLightgrey: #e9e9e9;
    --heroBackground: #fcfcfc;
    --mainBackground: transparent;
    --servicesBackground: rgba(177, 208, 245, 0.5);
    --textColor: #313131; 
}

Setting dark theme colours

@media (prefers-color-scheme: dark) {
    :root {
	--bodyBackground: #323b44;
        --colorLight: #a7b2bf;
        --heroBackground: #3a4553;
	--mainBackground: #3a4652;		
        --servicesBackground: rgba(57, 62, 70, 1);
        --textColor: #f9faf9;
    }
}

In the two code snippets above we’re simply assigning colour values to our CSS variables. The media query activates when the browser detects that the user has prefers dark theme set in their preferences, and instructs the browser to use the new colour values. That’s really all there is to it!

Light Mode to Dark Mode transition

Updating colours without using CSS variables

If your website doesn’t use CSS variables, or if you need to change colours not declared in the :root you can use the same media query to update colours on the fly.

Let’s say you have a style block that looks something like this:

p {
    color: #000000; // black
    font: 400 16px/1.4 "Poppins", Arial, Sans-Serif;
}

To change the font colour for your dark mode theme, open up the media query and repeat the style block inside, adding only the styles for the block that you want to change.

/* Default styles */
p {
    color: #000000;
    font: 400 16px/1.4 "Poppins", Arial, Sans-Serif;
}

/* Dark Mode styles */
@media (prefers-color-scheme: dark) {
    p {
         color: #eaeaea;
    }
}

Repeat this for every style block you need to update and you’ll soon have a fully functioning dark theme!

If you’d like to add dark mode to your website (good thinking), but need a helping hand, we can do it for you. Use the form below to get in touch and we’ll get right back to you.

Recommended Reading

What is an SSL and why do you need one for your website?

There’s been a huge shift over the past years, with websites now being all-but-required to install what’s known as an…

Dark Patterns and how they trick us online

Dark Patterns are the tricks that websites and apps use to push you into doing something that you didn’t mean to. Here’s how they do it.

Social Media Marketing – Can’t I just do it myself?

Today I am tackling a common barrier that comes up from business owners, friends and family alike; “Why hire someone…

Why doesn’t my website rank on Google?

Lots of businesses struggle with displaying where they’d like to on Google Search results. It’s fantastic and exciting when you…

Get in touch

Ready to talk about your project? We'd love to hear from you no matter how small or big the job might be. Use the form to send us a message or request a call back.

hello@speccymedia.com