Blog

Quickly add dark mode capability to your web app or website for improved accessibility

Imagine you’re a user who prefers dark mode and has it enabled system-wide. It could be you find it’s kinder on your eyes, or makes reading or understanding text easier. Or maybe you just think it’s cool.

Now imagine you’re reading something in dark mode on one app, then switch to your browser to check out a website and are faced with a page that isn’t in dark more. The blindingly-bright white background instantly ruins your flow, shatters your accessibility and leaves you wondering how long it’ll take before the makers of these sites catch up with the real world.

What is dark mode?

Dark mode is an accessibility feature. When enabled, a device’s operating system and any apps that are supported or which have their own dark mode setting, go from predominantly white-background with dark text to dark-background with white text. Some users find it easier. Some users just like it. Either way, finding yourself suddenly switching between them is like stepping out of a box and staring directly at the sun.

Here’s How to turn on dark mode on all your apps and devices from WIRED UK.

Why doesn’t everything support it already?

Dark mode has been around a long time. In fact, the first command I ever typed into a computer was in white text on a black background in Acorn MOS on the BBC Micro computer in about 1982. (In computing history terms, I was late to the party, but I was only five.)

But then windows-based operating systems took over the world and white became the new black for backgrounds, and there was a perceived divide between the bright lights of the consumer front end and the dark recesses of the geeky back end. It’s possibly why devs instinctively think it’s cool to put everything in dark mode. Or maybe it’s just kinder on their eyes when flipping between code editors and reddit in Night Mode.

Not every app or website maker is doing it though. Because it’s a ‘feature’ that has to be built in. And features cost time and money. And it’s traditionally been hard to sell accessibility to deadline- and budget- driven clients and managers.

Dark mode is actually quite easy

I’ve spent much of the last year working on a massively complex transformation project for IRIS Cascade. At it’s core is a new stylesheet that replaces years of coding style evolution. The ability to support dark mode has been mooted all along as a “we’d love to do that”, but has had me a little anxious, given the complexity of just getting light mode implemented.

In the end, I needn’t have worried. Having spent a year on the main stylesheet, it took me less than a day to implement the basics of dark mode using CSS Custom Properties. For this website, colinjamesfirth.uk, it took about an hour.

There is excellent browser support for CSS Custom Properties (caniuse.com). And, so long as you don’t need to worry about IE11 (there are some polyfills out there you can use if you really want to), you can go for it right now.

CSS Custom Properties (aka CSS variables)

This is going to be the easiest how-to section ever. I’m assuming you’re a dev with at least a little familiarity of css.

Step 1: Convert all your colours to use system properties

A basic CSS custom property is just a variable. It goes in as a line at the top of your css and looks a bit like this:

--color-text: #000;

You can scope variables in several ways, but for simplicity, just whack them on the :root element:

:root {
	--color-text: #000;
}

Then for your elements, instead of something like this:

.element {
	color: #000;
}

Do this:

.element {
	color: var(--color-text);
}

That’s it.

With a little planning, care and of course, testing, you can pretty much find-and-replace most colour values with variable references.

I personally use SASS most of the time, so the only difference for me was finding-and-replacing SASS variable names with custom property variable references. I ended up with something like this:

$color-text: #000;

:root {
	--color-text: #{$color-text};
}

.element {
	color: var(--color-text);
}

Step 2: Add the magic media query

Now for the magic.

If you’ve done any css for the last ten years, you should have come across media queries. We usually use them to help with responsive layouts, making changes depending on the screen size. Occasionally we use media queries for media types such as screen or print.

We also now have prefers-color-scheme, which caniuse.com confirms has excellent browser support.

So you can do this:

:root {
	--color-background: white;
	--color-text: black;

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

html {
	background-color: var(--color-background);
	color: var(--color-text);
}

The css for the elements don’t change. All we’ve done is added a media query into the custom properties and given it the same variables some alternative values.

Because only the variables change, you might also find print mode, or theming easier to do.

And because everything that makes dark mode happen is in a single code block, it’s easy to give users total control over when and where dark mode is implemented. Cascade, for example will soon have a user-level colour scheme accessibility setting with options along the lines of:

Auto (same as system) | Light mode | Dark mode

Do it yourself

There are lots of excellent, in-depth resources out there for learning more about CSS Custom Properties.

For starters, try Using CSS custom properties (variables) on the MDN Web Docs, or It’s Time To Start Using CSS Custom Properties on Smashing Magazine.

Or just give it go and see what happens.

Selling dark mode to your client or manager

In an ideal world, we wouldn’t have to convince people that this stuff is necessary. In absence of utopia, here’s a quick crib-sheet for when you’re promoting accessibility:

  • Accessibility is a requirement, not a feature
  • Accessibility is the law (applies in one form or another pretty much everywhere in the world)
  • By not doing it in the past, we’ve just been cutting corners at the expense of people with disabilities
  • It’s not actually all that hard or expensive to do
  • We might all appreciate it one day
  • It’s the right thing to do.

And if they’re still not convinced:

  • It might give us a competitive advantage.

Best of luck. Let me know how you get on.