Teresa Man

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 can feel so jarring, especially when set against lighter elements. It does not match anything we normally see.

4.2. Black smearing

Black smearing is a visual distortion that occurs when lighter content is dragged or scrolled across pure black backgrounds.

This effect occurs on OLED screens, which are increasingly common. On these screens, pure black pixels are turned off. (This is how dark themes can use less energy than light themes.) However, it is slower for these pixels to turn on and off than to change colors. This variable response creates the smearing effect.

Black smearing in the iOS Clock app (must be viewed on an OLED screen).

You can avoid black smearing by using dark gray, as then pixels will not turn off. This even works with a gray as dark as #010101 — and still uses much less energy than a light theme!

4.3. Depth

If you use true black in background elements, you lose certain techniques to convey depth.

For example, imagine your background is pure black. On top of this, you show a notification. The notification should float above the background, so you use a shadow to convey depth. Except the shadow is imperceptible, as nothing is darker than pure black.

If your background is not pure black, you can use shadows with different opacities and blur to convey depth. For example, consider the notification in Superhuman:

If your background is not pure black, you can use shadows to convey depth.

4.4. Halation

Pure white text against a pure black background produces the highest contrast possible: 21:1. In quantitative WCAG accessibility terms, this is the dream output.

However, when designing dark themes, it is important to be mindful of contrast ratios that are exceedingly high. Contrast that is too high can cause eye fatigue as well as halation.

When very bright text is set against a very dark background, the text can appear to bleed into the background. This effect is even stronger for those of us with astigmatism. According to Jason Harrison, Post Doctoral Fellow from Sensory Perception and Interaction Research Group:

People with astigmatism (approximately 50% of the population) find it harder to read white text on black than black text on white. Part of this has to do with light levels: with a bright display (white background) the iris closes a bit more, decreasing the effect of the “deformed” lens; with a dark display (black background) the iris opens to receive more light and the deformation of the lens creates a much fuzzier focus at the eye.

In Superhuman, we have to be particularly careful about halation, as our app is very text heavy. We set our white text to 90% opacity so that the dark background blends through. This balances contrast and brightness so that the app is easy to read in a wide variety of light conditions.

Since we toned down our text to avoid eye fatigue and halation, our colored accents and buttons may appear too bright. We now have to adjust these colors to work better in a dark theme. First, we reduce lightness so these colors do not overpower nearby text. Second, we increase saturation so they still have character.

For example, if we directly use the purple from our light theme, it appears too bright against nearby text. In our actual dark theme, we deepen this color so that users can focus on the text.

To create deeper colors for dark themes; preserve hue, reduce lightness, and increase saturation.

Dark themes have many benefits and are now widely expected. However, they are difficult to execute well. The simple approach of reusing colors and inverting shades will increase eyestrain, make it harder to read in low light, and may even break visual and information hierarchy.

We found a systematic way to build dark themes that are readable, balanced, and delightful. Just follow these steps:

  1. Darken distant surfaces
  2. Revisit perceptual contrast
  3. Reduce large blocks of bright color
  4. Avoid pure black or white
  5. Deepen colors

I hope this helps you design delightful dark themes. If you have any thoughts or questions, let’s chat! @ifbirdsfly, ?‍?

— Teresa Man, Lead Designer, Superhuman


  1. Hey! I know this is kind of off-topic but I needed to ask.
    Does building a well-established blog such as yours require a large amount of work?
    I am completely new to running a blog however I do
    write in my diary on a daily basis. I’d like to start a blog so I can share my personal experience and views online.
    Please let me know if you have any kind of ideas or tips for brand new aspiring bloggers.

    Appreciate it!

  2. You actually make it seem so easy with your presentation but I find this topic to be
    actually something which I think I would never understand.
    It seems too complex and very broad for me. I am looking forward for your next post,
    I’ll try to get the hang of it!

  3. My partner and I absolutely love your blog and find many of your post’s to be exactly
    I’m looking for. can you offer guest writers to write content in your case?
    I wouldn’t mind composing a post or elaborating on most of the subjects you write in relation to
    here. Again, awesome site!

  4. Hi, I do think this is a great site. I stumbledupon it 😉 I will return once again since I book marked it.
    Money and freedom is the best way to change,
    may you be rich and continue to guide others.

  5. Please let me know if you’re looking for a author
    for your site. You have some really good articles and I think I would be
    a good asset. If you ever want to take some of the load off, I’d really like to write some
    content for your blog in exchange for a link back to mine.
    Please blast me an e-mail if interested. Kudos!

  6. Good day! Would you mind if I share your blog with my zynga group?
    There’s a lot of folks that I think would really appreciate your content.
    Please let me know. Many thanks

  7. Hello there! Do you know if they make any plugins to help with SEO?
    I’m trying to get my blog to rank for some targeted keywords but I’m not seeing very good
    gains. If you know of any please share. Thank you!

  8. What’s up i am kavin, its my first occasion to commenting anywhere, when i read this post i thought i could also create comment due
    to this brilliant paragraph.

  9. I have been surfing on-line greater than three hours as
    of late, but I never discovered any interesting article like yours.

    It is pretty price sufficient for me. Personally, if
    all webmasters and bloggers made excellent content as you did, the net might be a lot more helpful than ever

  10. After looking at a handful of the blog articles
    on your web site, I truly like your technique of writing a blog.
    I added it to my bookmark site list and will be checking back soon. Take a
    look at my web site too and let me know your opinion.

  11. I truly love your blog.. Great colors & theme. Did you build this amazing site yourself?

    Please reply back as I’m looking to create my own site and would love to learn where you
    got this from or what the theme is called. Thank you!

  12. Wonderful post however , I was wanting to know if you could write a litte more on this topic?
    I’d be very grateful if you could elaborate a little bit further.

  13. It’s appropriate time to make some plans for the long run and it’s time to be happy.
    I’ve read this submit and if I may just I wish to recommend you some attention-grabbing things or suggestions.
    Maybe you can write subsequent articles regarding this article.
    I wish to learn even more issues approximately it!

  14. It’s really a cool and helpful piece of information. I am glad that you
    just shared this helpful info with us. Please stay us up to date like this.
    Thanks for sharing.

  15. It’s in point of fact a great and useful piece of info. I am glad that you shared this useful info with us.
    Please keep us informed like this. Thank you for sharing.

  16. My programmer is trying to persuade me to move to .net from
    PHP. I have always disliked the idea because of the expenses.
    But he’s tryiong none the less. I’ve been using Movable-type on numerous websites for about a year and am concerned about switching to
    another platform. I have heard fantastic things about
    Is there a way I can import all my wordpress posts into it?

    Any kind of help would be greatly appreciated!

  17. I am really inspired together with your writing talents as well as with
    the layout on your weblog. Is this a paid subject or did
    you modify it yourself? Either way keep up the nice high
    quality writing, it is rare to peer a great weblog
    like this one these days..

  18. I just like the valuable information you supply in your articles.
    I’ll bookmark your weblog and check once more right here regularly.

    I am fairly certain I’ll be told plenty of new stuff proper right here!
    Best of luck for the next!

  19. I know this if off topic but I’m looking into starting my
    own weblog and was curious what all is required to get setup?
    I’m assuming having a blog like yours would cost a pretty
    penny? I’m not very internet smart so I’m not 100% positive.
    Any recommendations or advice would be greatly appreciated.

  20. After checking out a handful of the blog posts on your web page, I really like your way
    of writing a blog. I book marked it to my bookmark site list and will be checking back in the near future.
    Please check out my website too and tell me what you think.

  21. Wow that was strange. I just wrote an really long comment but after I clicked submit my comment didn’t show up.
    Grrrr… well I’m not writing all that over again. Anyways, just wanted to say excellent blog!

  22. We’re a bunch of volunteers and opening a brand new scheme in our
    community. Your web site provided us with helpful info to work on.
    You’ve performed an impressive activity and our entire
    group will be grateful to you.

  23. It’s a shame you don’t have a donate button! I’d definitely donate to this superb blog!
    I guess for now i’ll settle for bookmarking and adding your RSS feed to my Google account.
    I look forward to brand new updates and will talk about this site
    with my Facebook group. Chat soon!

  24. Wow, awesome blog layout! How long have you been blogging for?
    you make blogging look easy. The overall look of your web
    site is great, let alone the content!

  25. An impressive share! I’ve just forwarded this onto a colleague who
    had been conducting a little homework on this.
    And he actually ordered me breakfast due to the fact
    that I found it for him… lol. So allow me to reword this….
    Thanks for the meal!! But yeah, thanx for spending time to talk about this topic here on your blog.

  26. I’m really enjoying the design and layout
    of your site. It’s a very easy on the eyes which makes it
    much more enjoyable for me to come here and visit more often. Did
    you hire out a designer to create your theme?

    Excellent work!

  27. Hmm it seems like your site ate my first comment (it was super long) so I guess
    I’ll just sum it up what I submitted and say, I’m thoroughly enjoying your blog.
    I too am an aspiring blog writer but I’m still new to everything.
    Do you have any points for rookie blog writers? I’d definitely appreciate it.

  28. Unquestionably believe that which you stated.
    Your favourite reason appeared to be at the internet the
    simplest thing to be mindful of. I say to you, I certainly get annoyed while folks
    think about worries that they plainly do not
    recognize about. You controlled to hit the nail upon the top as smartly as defined out the entire thing without having side-effects , other people
    can take a signal. Will likely be back to get more. Thanks

  29. Hey there I am so happy I found your webpage, I really found
    you by error, while I was looking on Bing for something else,
    Anyways I am here now and would just like to say cheers for a incredible post and a all round entertaining
    blog (I also love the theme/design), I don’t
    have time to look over it all at the moment but I have bookmarked it and also added
    your RSS feeds, so when I have time I will be back to read a great deal more,
    Please do keep up the excellent b.

  30. I just like the helpful information you provide
    on your articles. I will bookmark your blog and take a look at
    once more here regularly. I’m fairly certain I’ll be told plenty of new stuff
    right here! Good luck for the next!

  31. It’s the best time to make some plans for the future and it’s time to be happy.
    I have read this post and if I could I wish to suggest you few interesting things or suggestions.
    Perhaps you can write next articles referring to this article.
    I want to read more things about it!

  32. This is very interesting, You are an excessively professional
    blogger. I’ve joined your rss feed and look ahead to searching for extra of your great post.
    Additionally, I have shared your web site
    in my social networks

Leave a Reply

Your email address will not be published.