Dark mode on the web

A recent trend in UI design has been the the dark mode, sometimes also called the night mode. Both of these are rebrandings of the old concept of a light-on-dark color scheme.

Light-on-dark themes have existed for a long time, and were generally available in those widget tookits and operating systems which allowed this sort of customization. A problem commonly encountered while using a dark theme, however, has been that websites are often dark-on-light, and so users of dark themes end up staring at blindingly white websites anyway.

While it is essentially impossible for a website to match every possible desktop color scheme exactly, it does make sense to match the two general categories: dark themes, and light themes. This is how we ended up with prefers-color-scheme.

Media features: not just for phones

You may have encountered media queries in the context of responsive websites. Media queries are what allows you to conditionally apply some CSS styling in certain circumstances, like when the website is being displayed on a smaller or larger screen. This is how you can reflow a website to look differently on a phone.

Screen sizes are not everything you can test for in a media query, however. prefers-color-scheme is a newer, not yet universally available feature, which allows you to check if the OS is set to prefer dark mode or light mode. The media feature recently arrived in Firefox 67, and so far is only supported in Safari besides that.

Which theme are we using?

Owing to the popularity of the so-called dark mode, operating systems like Windows, MacOS, and Android now have a global toggle to enable it. This makes it fairly easy for Firefox to figure out what mode is desired—simply query whatever API the operating system provides for figuring out which mode it's currently in.

On the other hand, explicit dark modes generally do not exist within your usual Linux desktop environments and widget toolkits—themes can be dark or light, but they do not have any metadata attached to them to identify themselves as such. What Firefox does, therefore, is grab the Window and WindowText colors from the current GTK theme, and checks which is lighter. If the text is lighter than the background, we're in dark mode; if we have dark text on a light background, we're in light mode.

If you would like to override Firefox's determination, you can use the about:config setting ui.systemUsesDarkTheme. This is an integer setting, where 1 means dark theme, and 0 means light theme.

Additionally, if your Firefox is set to resist fingerprinting, it will always choose the light theme.

How to use it

Using CSS for dark mode is pretty simple in practice: write a default style, and then override it inside a media query for a dark or light scheme.

article {
    color: black;
    background-color: white;
}

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

Example CSS with color scheme queries

You can, of course, also provide the media query in a <link> element.

<link href="light.css" rel="stylesheet">
<link href="dark.css" rel="stylesheet" media="(prefers-color-scheme: dark)">

Media queries in link elements

Although browsers will download all the stylesheets specified, they will only use the ones where the media query matches.

In the wild

If you are reading this on my blog and I haven't broken anything in the meantime, you may already be reading this in dark mode.

Screenshot of this article in dark mode

A screenshot of this article. The font is Fira Sans

Otherwise, there some other websites you can check out:

Chromium is supposed to start supporting this feature at some point in the future, so perhaps we will actually start seeing more extensive use in the wild.

  • Dark Website Forcer – A Firefox extension allowing quick toggling of dark mode in the browser. I haven't tried it yet.