UPDATE
So after writing this post explaining why we added dark-mode to our website (and why you should too), we’ve gone and disabled it. Ironic huh? Here’s why.
—
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…
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!
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.
Why we disabled Dark Mode on our website
Dark-mode is awesome, and it’s still my preferred way of viewing general user interfaces (apps, websites etc), but after having it enabled on our own website for 6 weeks now, we’ve learnt that actually, there are some instances where it may not be appropriate.
Our business relies a lot on first impressions – we hope that people hear good things about us and are prompted to take a look at our website. When they pull up our website, depending on their settings, they will either see the light version of the site or the dark version.
So what’s the problem?
When we first designed the Speccy Media website it was done with that first impression in mind; the colours were specifically chosen to represent our personality, our brand – to reflect how we wanted to be presented online.
At the time no thought was given to what a dark version might look like, if it had then the structure of the site might be different, the fonts we used might be different, and the colours and textures almost certainly different!
So when the dark version of the website gets loaded up by a potential client, I cringe a little! Sure, it works and it doesn’t look bad, but it doesn’t look great either.
Those first few seconds are crucial to making a good first impression; if they don’t like how the site looks when it first loads, they might take it as an indicator that they probably won’t like the rest of our work.
That’s just not the impression we want to give.
So, for now, we’ve disabled dark-mode on our website. We’ll bring it back of course, but first, we’ll look at creating a design that reflects our personality in both light and dark-mode.