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.

1. Darken distant surfaces

In dark themes, background colours for UI elements follow one guiding principle: the closer the layer is to the user (e.g. modals), the lighter the surface area. This model is analogous to an environment in which a light source is cast from above. The further behind a layer, the less light it receives and the more it recedes into the background.

When creating a dark theme, it can be tempting to invert an existing 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.