Website dark mode: Beyond aesthetics

Contents

A few years ago, it was a Nice-to-have - a progressive enhancement. Now, it borders on essential. Most major websites these days use a dark mode. Why? Why is it so popular? Why is it important? How do you implement it on your site? I will answer all these questions today.

This post will leave you feeling informed, educated and confident in your website dark mode knowledge. Let's dive in.

What is Dark Mode and Why Use It?

Dark mode refers to a colour scheme that uses a dark colour in the background and lighter ones for text and other content. It reverses the more common 'light mode', which uses white backgrounds with dark text.

Using a dark colour scheme is nothing new. It has been around as long as we have been able to change the colour of web pages. When we talk about dark mode now, we are talking about the ability to switch between dark and light colour schemes at will.

A word on skeuomorphism

It's pronounced "skew-morf-izum" and is a great word that makes you sound super clever and will impress all your friends. So, what is it?

Skeuomorphism is when digital designers make something to look like its real-life counterpart. Do you remember the first iPhone apps? A classic example is the original notepad app that resembled a real-life notepad.

The original Notes, News and Voice Recording iPhone apps showcasing skeuomorphism in action.

Designers do this to help people feel more familiar with a new technology. Increasing familiarity with something helps users feel more comfortable using it, leading to faster adoption.

Why have I brought this up? Think of a computer screen from the 70s and 80s. It is a black background with green text. There's no user interface, just black and green - like the Matrix. When the internet came around, webpages were white with black text. This colour scheme was skeuomorphism in action. They wanted webpages to appear more like books and brochures to create more familiarity with new users and faster adoption. That colour scheme became ubiquitous. The dark colour scheme went out of fashion - FAST.

So, what is my point? Dark mode is nothing new. We've seen dark colour schemes on computers since the invention of the first monitor. What's different now is the approach to dark mode. Old colour schemes were dark because they had to be. Modern dark colour schemes are that way out of choice. This choice delivers to users the many benefits of a darker colour scheme. But what are those benefits?

Benefits of Dark Mode

There are several tangible benefits to using dark mode on websites and apps. What are they? Let's have a look, shall we?

  1. Dark mode reduces eye strain. Most people spend a large portion of their day looking at a screen. Whether it is a laptop, tablet, phone or watch, OLED screens are everywhere. Looking at bright screens for long periods strains our eyes, especially in darker environments. Using dark mode reduces the screen brightness, easing the stress on our eyes.
  2. Dark mode is more energy efficient. It uses more battery to display brighter content on a screen. Dark colour schemes emit fewer light pixels. Less light emitted means less power used. Less power use means longer battery life.
  3. Dark mode can help improve our sleep. This idea could be a reach, but hear me out. Sunlight contains a lot of blue light. The light emitted from device screens also contains blue light. When we use our devices at night, the blue light confuses our brains into thinking it is daytime. That confusion can cause disrupted sleep and even insomnia. Look up Matt Walker on YouTube. He explains it better than me. Anyway, dark mode reduces the blue light as the darker colours emit less. Using dark mode later in the day reduces the blue light entering our eyes, potentially leading to better sleep.
  4. Dark mode can make content easier to read - for some people. Colour blindness and other sight impairments make bright screens harder for some people to read. They may find it easier to read content with a darker background. Offering a dark and light mode option presents a significant accessibility advance for any website or app.

That all sounds pretty rosy. Dark mode can be very beneficial. It is not all sunshine and rainbows. There are some drawbacks to consider. We'll look into those next.

Downsides of Dark Mode

There's no questioning that Dark Mode enhances user experience. It does not come without its drawbacks. We've looked at the pros. Now, it's time for the cons.

  1. Dark mode can make content harder to read - for some people. Similar to the fourth benefit of dark mode. The opposite is also true. Some people find it harder to read content on dark backgrounds. It's different strokes for different folks. That's why we need to offer both as an option.
  2. Dark mode does not fit with a lot of brand colour palettes. When discussing colour choices on websites and apps, we must consider branding. A company's website is the online representation of its business and brand. As such, it must stay in line with its brand guidelines. Some brand colours may not work in dark mode. In many cases, this leads to them abandoning dark mode.
  3. Dark mode still has compatibility issues. Implementing dark mode through CSS only became an option in 2019. Many devices are still in circulation that don't support this feature. As such, implementation can be tricky in older devices. It is not impossible. It does require some extra development work and testing.

As with anything, there are pros and cons to consider. The rise of dark mode's popularity suggests that the pros tend to outweigh the cons. Ultimately, the decision to include it lies at the feet of the website owner.

If you decide to use dark mode, you may wonder how to implement it. Never fear. I have you covered. Let's look at a few methods to add dark mode to your website.

Implementing Dark Mode on a website

There are a few ways to implement dark mode on a website. They're super easy and only require a small amount of code.

Using CSS for Dark Mode

This method is by far the easiest and most common. A user sets their global preference to dark or light mode on their device. The prefers-color-scheme CSS property detects this setting for us to harness. Our website then updates its colour scheme automatically.

The code to implement this is simple. Look below to see how easy it is to implement. Change your website colour settings inside the media query, then VOILA! You have dark and light modes enabled.

// This CSS code is taken from my own website https://jackchristian.com.au :root { --colour-background-light: #C2E4FF; --colour-background-dark: #001A38; --colour-text-light: #B33600; --colour-text-dark: #FF824D;}.colour-scheme { background-color: var(--background-colour); color: var(--text-colour);}@media screen and (prefers-color-scheme: light) { :root { --background-colour: var(--colour-background-light); --text-colour: var(--colour-text-light); }}@media screen and (prefers-color-scheme: dark) { :root { --background-colour: var(--colour-background-dark); --text-colour: var(--colour-text-dark); }}

Using JavaScript for Dark Mode

If you want to give users the option to change the mode on the fly, you need a toggle widget. You can do this with a small amount of JavaScript code that toggles a class on the HTML  tag.

const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');function switchTheme(e) { if (e.target.checked) { document.documentElement.setAttribute('data-theme', 'dark'); } else { document.documentElement.setAttribute('data-theme', 'light'); }}toggleSwitch.addEventListener('change', switchTheme, false);

WordPress and Dark Mode

DIY website builders like WordPress, Shopify and Wix offer numerous plugins that implement dark mode for you. You don't need to write any code. You only need to tell the plugin which colours to use in light and dark modes.

Best Practices for Dark Mode

We have already examined the pros and cons of dark mode. Using those as a guide, I have curated these best practices to make the most of dark mode. Let's look at those practices now.

  1. Use enough colour contrast. This point applies to both light and dark modes. You want your content to be readable for as many people as possible. Use a colour contrast checker to ensure your colours contrast enough so the maximum number of people can read your content (I have listed a contrast-checking tool in the key links).
  2. Don't use pure black and white. Again, this is true in both cases. Pure white (#ffffff) and black (#000000) contrast a lot but are so contrasting that they cause eye strain. Soften both using dark greys and off-whites instead.
  3. Maintain visual hierarchy. The same way you would for a light colour theme, you can use colours to guide a user's eye. Visual hierarchy is how designers lead a user through a page. Darker colours should not stand in the way of this process.
  4. Test, test and test again. We want the maximum number of people to have the best possible experience with our products. That means we must test in as many environments as possible. We should try to limit the users prevented from a better user experience because they use a slightly older device (unless they use Internet Explorer, that is the one exception 😅). 

Conclusion: The Future of Dark Mode in Web Design

Dark mode is not a passing trend. It is here to stay. It is fast becoming an expected feature on websites. It does not take much to implement. Whether you code it yourself or use a plugin, it will enhance your users' experience.

If you are building a new website, consider dark mode from the outset. If you are retrofitting it to your website, work with a Designer to ensure it ticks every box. It is no longer a trend. It is bordering on a necessity. Don't get left in the Dark!