Dark mode: more than a quick costume change

I recently updated this website to appear differently for those with dark mode turned on in their device settings.

It was a chance to push my CSS skills. But it also put into focus what I think accessible brands and interfaces need to — more seriously — consider moving forward.

My eyes!

I prefer dark modes: dark colour schemes for interfaces. Especially for long reads.

For years I’d been using apps like f.lux to soften my screen colours — often the pure, default white of so many websites and apps. If you’ve ever walked past someone with a strange-looking, orangey screen, they are probably using a similar tool to create a more comfortable viewing experience for themselves.

My eyes easily strain after an hour or so of staring at a screen. Sometimes leading to migraines. Ideal for a web designer, huh?! Tools like this managed to at least blunt the knives in my eyes...

When Apple included ‘night shift’, a feature that offered the same effect, baked into Mac OS and iOS it made a big difference.

When they later went even further and provided a dark mode, as an alternative to the default ‘light mode’, I rejoiced!

A genuine user preference and accessibility need

Switching to dark mode — on an Apple device at least — adjusts OS menu bars, alerts, settings screens, etc. to a dark colour scheme. What was a light background with dark text is flipped to a dark background and light text. Much easier on my eye.

And I’m not the only one. Darker interfaces are the preference of many, such as those:

  • Using a device for long periods of time
  • Browsing at night
  • Susceptible to headaches and eye strain
  • Living with vision impairment

But whilst OS chrome is restyled, and some apps provide an alternative colour scheme, websites initially stay the same. A bright website experience won’t automatically change to suit dark mode.

Unless we step in and make adjustments to our design and code, allowing us to adapt to the user preference.

Honouring dark mode with our websites

Thanks to this media query it’s simple enough. Stick in extra styling rules for those with a dark mode preference:

@media (prefers-color-scheme: dark) { ... }

And it doesn’t have to be white on black. Dark mode is our oyster. Any dark colour background and light colour text (meeting WCAG AA guidelines) will work.

But the fun really starts with CSS custom properties. Rather than duplicating your entire stylesheet, to cover this alternative scheme we need only tweak a robust set of custom properties:

@media (prefers-color-scheme: dark) { html { --color-text-standard: var(--color-light-1); --color-text-headings: var(--color-light-2); --color-background-standard: var(--color-dark-1); --color-link: var(--color-brand-1); } }

Catering for alternative colour schemes really keeps you on your toes when it comes to the naming and logic behind these properties!

It’s also encouraged me to evolve my style.

Before

Before the change the design featured contrasting sections — light colour schemes and dark colour schemes within the same page:

Screenshot of the previous styling of this website

Now

Now light and dark modes show more distinction. Components and sections adhere to the scheme:

  • Dark mode

    Screenshot of the new styling of this website — when in dark mode
  • Light mode

    Screenshot of the new styling of this website — when in light mode

This is perhaps a little less impactful, but it is certainly more conscientious.

Accessibility-first branding

Which brings me back to a persistent frustration of mine. Inaccessible brands. In particular, brands with a colour scheme not planned with sufficiently contrastive combinations in mind.

I think we’re still yet to see a sea change of brand identities being prepared digital-first, with visual accessibility inherent in colour and typeface decisions. And now preferences for light and dark modes can be reflected in digital experiences, expectations for brands to adapt are even higher.

How can we evolve our brands to evoke not just the right personality, not just to look great at a glance, not just to offer colour sets offering sufficiently contrastive possibilities but also to be prepared for both light and dark mode preferences?

Oh, and that won’t be the end of it. Hopefully it’s only a matter of time before OS settings cover other preferences, allowing us to prepare interfaces for, for example:

  • Dyslexic people
  • Autistic people
  • Those with nuanced visual abilities and needs

Building these considerations into your core brand identity, that’s the future!