How to Design Delightful Dark Themes
At Superhuman, we’re building the fastest email experience in the world. Get through your inbox twice as fast as before, and sustain inbox zero! Dark themes are the latest trend in app design. macOS introduced Dark Mode last year. Android launched Dark theme last month. iOS caught up in the last two weeks. Once rare, dark themes have become widely expected. When done well, dark themes have many benefits. They reduce eyestrain. They are easier to read in low light. And, depending on the screen, they can greatly reduce battery consumption. However, it is difficult to create a delightful dark theme. We cannot simply reuse our colors or invert our shades. If we do, we will achieve the opposite of what we want: we will increase eyestrain and make it harder to read in low light. We may even break our information hierarchy. In this post, we share how to design dark themes that are readable, balanced, and delightful. Most UI design in dark themes follows this principle: darken distant surfaces. This simulates an environment where light is cast from above, and conveys a physicality that is familiar and reassuring. When creating a dark theme, it can be tempting to invert our light theme. However, distant surfaces would become light and near surfaces would become dark. This would break physicality and feel unnatural. Instead, take only the main surface color of your light theme. Invert this color to produce the main surface color of your dark theme. Lighten this color for nearer surfaces, and darken this color for distant surfaces. In Superhuman, our dark theme is made of five shades of gray. Nearer surfaces use lighter grays; more distant surfaces use the darker grays. Nearer surfaces use lighter grays; more distant surfaces use the darker grays. When designing a dark theme by referring to a light theme, it is important to revisit perceptual contrast. This is how much contrast an element appears to have, regardless of what the numbers may suggest. For example, in our light theme, contact details are black with an opacity of 60%. But in our dark theme, we set contact details to white with an opacity of 65%. While both contrast ratios exceed AA standard, the extra 5% prevents fatigue, especially in low light conditions. There is no hard rule for these offsets. Instead, we adjust each item individually — considering text size, font weight, and line width — to ensure that the dark theme is as clear and as easy to read as the light theme. In light themes, we often use large blocks of bright color. This is usually fine: our most important elements are likely to be brighter still. But in dark themes, it does not work: large blocks of color pull focus from our most important elements. For example, consider our Remind me screen. In our light theme, the pink overlay does not distract from the even brighter dialog. But in our dark theme, the same overlay pulls our attention away. We removed the overlay altogether so that it is fast and easy to focus on what matters. Reduce large blocks of bright color to make it easy to focus on what matters. In Superhuman, we do not use any pure black or white in our dark themes. Here are four reasons to do the same. 4.1. Realism True black does not exist in our daily environment. (The darkest object in the world, a yet-to-be-named material developed at MIT, is still 0.005% shy of true black!) Our vision has therefore adapted to perceive relative darkness as true black. This is why #000000…
Like to keep reading?
This article first appeared on blog.superhuman.com. If you'd like to keep reading, follow the white rabbit.