Only a few years ago now, dark interfaces went from a rare stylistic choice to a foundational, system-wide design imperative for any product.
And thank god it has; I'm really sensitive to light both physiologically (I find it really hard to sleep if I get a lot of it in the evening) and psychologically (it's really unpleasant to work without it sometimes). It's become so common now that I really resent when apps and websites don't support it (which is why this site does).
If anything, it seems like dark UI should have always been the default. There are so many benefits, that if we step back and really think about it, it actually just makes sense that that's how we'd build computers, right?
But computing interfaces have always followed a skeuomorphic path—we replicate the metaphors we're accustomed to from "real life"—and the real world is definitely not a dark interface:
- Most of humanity is predominantly awake during the day (it's really only an artifact of modernity that this isn't strictly true). We used to use computers pretty much only during the day.
- We're familiar with (white) paper and (dark) ink as the primary medium of information storage and exchange.
- We decorate our homes with generally light colors, like white paint on the walls (how many people reading this live in a black-painted room?).
- Humanity's earliest stories use brightness as a heavenly, safe metaphor, and darkness as a fearful, mysterious abyss. With computing new, dark wasn't a vibe that people wanted to associate with GUIs, especially after dark-UI command-line interfaces.
- Screens are backlit, so, we might say, brightness is in their nature. Historically it's been hard to get screens to show dark tonal values well—it tends to emphasize the limitations of the medium—but that's changed now.
All of these and so many more have meant that computing has almost always been light by default—at least, since the rise of the consumer GUI.
But then in 2018, just before the great pandemic, Apple decided with MacOS Mojave that it would support dark mode natively with system-wide support. And then everything fell into place for dark mode and personal computing has been so much better since.
All of this context isn't just fun history; it shows us something about how we've learned to understand dark mode and what it means for our interface design now. Let's start with that Mojave desktop background, users' first real touchpoint for dark mode from back then:
What do you notice about the way the dark and light views are shown? A few principles here that we'll return to throughout this exercise:
- The graphical interface is a metaphysical place subject to the same kinds of metaphors that you're accustomed to understanding for all 3D space. Whereas the desktop background was previously just a static background, this one changes and the windows in front of it change with it. And these mirror your physical environment's day/night state outside of your computer. That makes all computing somewhat ambient. It's time of day and lighting aware. Notice how light hits the sand dune from different places depending on the time of day.
- Nighttime isn't just dark: it's cold (in color temperature). Dusk and nighttime are blue-shifted experiences. Daytime is usually warm-shifted; even though it's technically full-spectrum, we associate bright sunlight with warm colors like yellow and orange. It was inspired by Apple to make dark mode's debut in a desert context for this reason—it really hit this metaphor home.
- Nighttime is a time of lower contrast. Nothing is too bright and we forgive cases where things are quite dark. We're more tolerant of color saturation in this context; that is, we don't code it as "bright color".
- At night, more than during the day, we rely on tonal change in the sky behind the dune to differentiate it from its background (the sky).
As you'll see, all of these fundamental parts of the human experience of day and night have come to define the way that we experience "dark mode".
Principles for designing dark interfaces
Perceptual saturation and tone isn't linear
Color and brightness is weird. People naturally want it to be a logical thing but the human brain's processing of the world doesn't work that way. For example, consider white (100% brightness) and black (0% brightness). Now think of a middle gray—something right in between, what you'd describe as halfway.
Now, what percent do you think that is? Most people will logically say 50% since it's halfway, right? And, well, you're sort of right.
But as photographers will know, our perception of the world is actually light-shifted, meaning what looks like correct exposure of a photo is actually very bright in absolute terms. We have a poor ability to detect and appreciate dark luminance values (remember that context from before about human experience?). So "middle gray" is actually 18% reflectivity of light against a surface. Meaning, if you average the luminance values from a properly-exposed photo, you get this:
Some folks may even think this is a bit light. This gets quite technical, with a lot of different "middle grays" but the point for our purposes is that you should abandon your ideas that color is not relative and weirdly nonlinear.
You can see this in the color scales below, too. Look at how big of a difference level 0 to 1 is relative to 8 to 9. I promise these are even gradations, but they don't at all look it, right? We care much more about subtle changes in lightness at high brightnesses than low ones. Accordingly, our tonal scale shouldn't be linear; it should be more like quad or quint, with smaller gradations on the light side and bigger ones on the dark side.
Dark colors also support higher levels of saturation than light ones without looking like that color. Take a look at this color scale:
What do you notice about level 1 vs level 8? Even though this color gradation—in hue, brightness, and saturation—is completely linear, the effect of the scale isn't from a perceptual standpoint: if we saw Level 0 in the wild, we'd say "that's a color; that's blue". But if we saw level 8, we might say that's just "dark" or a version of gray.
The lighter a color is, the less tolerant it is to being saturated and still looking neutral.
That means, conversely, darker colors are highly tolerant to saturation while still reading neutral. In fact, this can be a valuable way for them to feel richer and opinionated. You can blue shift, warm shift, etc. more liberally without it looking like oh wow there’s that color. Look at this scale:
Do you prefer this one above, or this one below?
The above two scales are identical in every respect except one: the latter, as it moves to darker, increases saturation. Now, if you were looking at this second one in isolation, would you notice that this is happening?
Many people find a straight grayscale to be a bit stale or inanimate, so I often like to increase saturation just a bit as you get to the darker end of the scale. Keep this effect very subtle though; it's very easy for it to become too loud. Arguably the above is too loud already.
We're taught to expect dark to be cold and light to be warm
As discussed above, just as we're accustomed to in physical life, there's a tendency to make dark UI cooler in tone to be aligned with the state of the physical world during the times dark UI is typically used: at night.
On screens, we're unaccustomed to seeing warm-tone darkness. Here's the slightly-color-toned grayscale from above, but this time shifted to warm tones rather than cool:
This looks positively brown and dingy. It's hard to believe—but it's true—that nothing has changed here except the hue.
Look at this example from LinkedIn:
When it comes to darkness, we're generally much more forgiving of cold than warm tones. This isn't a hard and fast rule, of course; even if it were, design is all about breaking those rules. Experiment and see what looks good for you.
Contrast is different in the dark
Avoid 100% black backgrounds and 100% white text, ideally. People are more sensitive to contrast at the high and low range, especially when reading type, in dark interfaces.
In my opinion, this issue has been widely overstated in UI design. The masses of very online™ designers who post clickbait LinkedIn comparisons like "which UI is better" are kind of dogmatic about this point because it's a "rule" and rules make design easier—but there’s some truth to this, especially on mobile screens and such that are more likely to be OLED and capable of rendering very high contrast ratios.
A completely black background and white text on OLED can sometimes be extremely hard to read, especially for any real period of time. One additional reason for this is that it hits more against our metaphorical assumption that documents are dark-on-light, so when this is subverted, however carefully, it's always a bit weird still for people.
Dimensional order and prominence
Depth of material elements and associated prominence/ordering is one of the hardest things about dark UI.
Probably because screen space is always so limited and window clutter can be so overwhelming, one of the most enduring metaphors of computing interfaces is shadow as a way to understand stack order. We’ve come to associate shadow as a metaphor for depth, and depth as a metaphor for navigational order.
But shadows are hard to see on dark, so what to do? With the ambient light condition already darker, elements need a much more aggressive shadow for that shadow to be visible. Whereas in light mode we might go with like a 15% black, dark mode requires that we go to like 50%.
Avoid the temptation to replace with a white glow, though if done right you can do that instead. I think it usually looks pretty bizarre though.
Other ways to achieve dimensionality
Brighten foreground backgrounds
Be more aggressive about lightening the background of foreground elements like a modal because the light that would cause shadow by them is now illuminating their surface. You don’t notice that “more bright” from light mode because it’s already white so it’s “clipped” by the view’s “camera” so to speak.
Another way to achieve this is to fade background elements a bit. We do this with light mode too through background shades. This is particularly relevant in the context of popovers or other modal-type experiences that take over the entire view:
Look how Linear's Command+K modal is made more foreground by lightening it slightly relative to its background. This is the same light that lights its edge (more on this below).
Importantly, the highlight for the row item is substantially different (in brightness, hue, etc.) relative to its background than the difference between the modal background and the view background behind it. The row also doesn't have edge lighting. This helps communicate that the row highlight isn't another UI layer—a stacked element—but a state of the modal element existing on the same z-axis plane as the modal.
Edge lighting
Just like a photographer does with a hair light in a studio, our modern graphical interfaces use edge lighting to increase the sense of dimensionality and depth in an interface:
Notice how much more prominent the edge lighting is in MacOS's dark mode. With the effectiveness of shadows reduced, we need to define window boundaries in other ways. Edge lighting is great at that.
In both, the lighting may actually be the same because this is an example of specular highlight, which should reflect equally regardless of the color of the surface. We can just see it more prominently against a dark background.
Linear is famous for this:
Dark mode is cultural
Interfaces, as metaphors, are based on our learned experience of them. That makes them intensely culturally-specific. Color is never culturally neutral: look at how red is used to mean error, danger, or financial loss in a western context, but the exact opposite of all of those things in, say, China.
Dark mode is the same way, and it's interesting how people use it and the associations they have with it. A few vignettes:
As my friend Q discovered when building The New Money Company, in Nigeria the power is very inconsistent; it can go out at random for extended periods. As a result, a lot of folks there like to keep their interfaces in dark mode all of the time so it more naturally flexes to those moments when all of the lights in their house go out due to a power outage. That's why for them, dark mode is essential.
Dark mode is still strongly associated with high-tech, developer/technical audiences, and power users. In brand contexts, it's used to reinforce that connotation. Take Linear, our example from above, for instance. Can you imagine that being presented in light mode by default? Never.
A lot of power-user apps have been exclusively dark mode or dark mode by default for a long time, even well prior to the advent of system-level dark toggles. "Pro" apps like Final Cut or Premiere Pro, Lightroom, etc.—particularly apps that are about color accuracy or artistic content—have always been dark.
Dark mode can also read as somewhat masculine for the same reasons. Imagine a dark-painted room. To many people, that's a masculine vibe.
Though I'm generalizing a lot to make a point here, one side effect of that is that some people, perhaps particularly women or older populations, may be more alienated by an interface presenting itself that way.
All of these things are things to consider when designing dark mode.
Dark mode can practically improve accessibility
Some folks with vision sensitivities need dark mode to make their device accessible.
Some folks use dark mode to reduce battery usage. Studies show that using dark mode can reduce battery consumption by as much as 9% on OLED/AMOLED screens, with typical usage, and as much as nearly 50% when using 100% brightness in some conditions. This isn't just a convenience; for some people with long days, older phones, or limied access to electricity, it can make a huge difference.
That's all for now. Like all articles I write here, I'll continually update this as I'm able to write more, so check back for updates! And if I missed anything, let me know!
