by Frank Lämmer

How to get dark mode working with CSS

6IhWI0R8fkIDOnLoCUczJbGkbQMjjsbvkUSj
Mockup: Light browser, light website; dark browser, dark website.

I have been playing around with MacOS Mojave’s dark mode lately. It’s not 100% pleasing to my eyes, yet. But it’s especially useful when nerding out at night time with little ambient light.

Dark mode is a design trend. Many reading applications (Medium App, Twitter …) have it already. It’s not only about just inverting all colors, but it’s also about art direction.

7MXofS94AfNVI-oYG-rNDkZ9WH8i-PvyNcUB
In macOS Mojave you can turn your interface dark. Safari and Firefox are supporting it already.

Not everything is dark (yet)

One thing that can be a bit shocking when working in dark mode is the flash of light when opening a document with a big white background. This post explores how to deal with dark mode on the web and styling dark mode with CSS.

6vFnrxWHWhxykOVOCl6-jcsMpypqSQpbeNAf
The author opening this Medium post in dark mode with little ambient light.

Dealing with dark mode user settings

So wouldn’t it be nice if documents and websites would respect the current surrounding theme?

Automatic color conversion?

At least Safari and Firefox already have a “Reader mode” with support for light text on a dark background. Here, the <article> context gets rendered using custom styles for best readability and removing clutter, and there is a setting for inverting colors. Extending on that, browsers might invert websites automatically with smart styles. Sounds scary! But at least Apple Mail is doing so already. It even inverts colors for some HTML mail.

kSO148kZlhL9q5FvYT-08ooWX2eZXys6f4jI
OMG all colors inverted in a HTML mail in Apple Mail, macOS Mojave

Smart-inverting colors might or might not be a solution. What else?

Media query to the rescue!

I am not alone. Dark mode for CSS is currently (August 2018) being discussed in “CSS Working Group Editor Drafts”. The idea is to make that available as a media query. Something has already landed in Safari (private), see also here.

So in theory you can do this:

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

Let’s wait until all browsers are ready. I think there is some way to go for standardization. The OS makers might need to agree on something as well.

Inverted is not dark mode

K33cTogRj84FtU2LvVq19-VIXMpLli8sEFEs
Fun fact: You can invert the colors in dark mode as well.

Did you know: There already is a media feature for “inverted-colors” in Media Queries Level 4. That’s not the same as dark mode. A kind of “dark mode” has been around for a while. Windows has also High Contrast mode. There are many different takes on that.

Nevertheless, it would be really cool if website authors could decide if and how to deal with it when a user with enabled “dark mode” visited their site. So you, as the designer, have full control over how your website will look in “lights off mode”. Much more work for you? No, it’s easy. Read on.

Incognito is not dark mode

C6PA7T3Uj9e0HnFtBfltKMnXvOwLfhS-kVar
This is NOT dark mode!

When opening an incognito window for private browsing, many browsers will present a dark browser chrome to highlight the difference. That’s also not dark mode, but it’s dark.

Using CSS vars for theming dark mode

Thanks to “CSS custom properties” (also known as “CSS Vars”), we can now more easily than ever create themes with very little CSS. The most simple invert theme:

root: {  --text-color: DarkBlue;  --back-color: Azure;}
body { color: var(--text-color); background: var(--back-color)}
@media (prefers-dark-interface) {  root: {   --text-color: Azure;   --back-color: DarkBlue;  } }

Shameless plug: My (great new) CSS framework Teutonic CSS already makes use of such simple inverting:

2oe6YHeKR513YrwBo3gSPRqppu46nE27OEFj
Put “.inverted” on the outer container to invert all colors via CSS Vars. See it in action here.

Websites changing browser chrome

This article is about how a user setting can change the appearance of a website. It also works the other way around: a website can change the way the browser looks. There are some proprietary meta tags available, so far only for mobile browsers:

<meta name="theme-color" content="black"><meta name="msapplication-navbutton-color" content="black"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black">

ARGH!

Further readings

The article “OS: High Contrast versus Inverted Colors” by Adrian Roselli discusses the differences between “inverted” and “high contrast” in Windows and macOS.

The article “How “invert brightness” can improve accessibility and help us use our devices” by Matthew Atkinson discusses how inverting colors helps with the user experience. You can also find the concept of “smart inverting” colors there.

Summary

hNpXvSYGCgpEBw1FoDrNj0bKDeNCiEAQ1umU
A day/night switch on microsoft developer pages. Nice detail: this setting is persistent (localstorage or cookie).

The nice thing about standards is that you have so many to choose from.

While “night mode” is definitely a trend, different implementations are floating around. Raise your voice to make that ONE web standard. Get your CSS forward compatible so you can support that without too much hustle.