Email design for Dark Mode

Dark Mode is a user interface option that inverts colors to make text and icons appear light on a dark background—which reduces the brightness of your screen.

Designing for Dark Mode (DM) is not a new way of designing emails, just a more conscious way to do it. Therefore, it’s good to address accessibility at an early stage in the design theme, instead of working retroactively.

In this article, you will get some tips on how to adapt your design to DM. You will also learn how Voyado can help you adapt your email design theme.

Why Dark Mode?

There are many reasons why to use DM, some of which are related to medical conditions, as DM allows better adjustment for our eyes to the environment. Other reasons are related to the energy savings derived from less electricity used to power up the whole screen. And an obvious reason—just because it looks nice.

Email design theme for Dark Mode

Since there aren’t any official fixes for DM in the email clients, we do not recommend doing specific adjustments in the code as it may only work for a short period of time. It may also only work for Apple Mail and Outlook mobile app (iOS and Android).

Instead, we strongly recommend working with your design and use logos and icons that work for both dark and light mode. This way it'll look nice in all email clients, and there won’t be any problems if there are any updates or changes regarding how the email clients read dark mode code.

How Voyado can help to adjust to DM when setting up the design theme:

  • Guidance in choice of text colors
  • Guidance in choice of divider colors
  • Guidance in choice of background colors

What to think about when designing for Dark Mode

When designing your content in the email editor in Engage, you will always have the option to send a test email. Why not switch over to DM on your phone and see how it looks?

Here are some tips for an email design that might help when you design with DM in mind:


Three ways to design and adapt your images to DM:

  • Use a logo/icon in a color that works for both Light and Dark Mode (e.g., grey).
  • Another solution is to have them thoughtfully clipped so their borders create a natural space around them in the inverted view.
  • Or just create a blurred outlined white border around the icons/logos.

To have a reversed logo version prepared beforehand in the design guides (white over black or color over black) is always a good idea in these cases.

Texts and backgrounds

The texts and backgrounds should always respect the Web Content Accessibility Guidelines on contrast and visibility.

If the colors are accessible, they usually keep the accessibility even when interchanged for their reversed versions which is why it’s good to avoid absolute opposites in colors.

  • Black against white and the other way around is considered high contrast and does not respect the Web Content Accessibility Guidelines. Then it is better to use a grade off from absolute white and a grade off from absolute black (ex. #202020, #f6ffff) to keep the accessibility.
Color Inversion

Some email clients turn the light colors into dark colors in the email and vice versa, to make emails readable in DM. This is usually done by manipulating the hue, saturation, and brightness of those colors.

  • One way of testing your design for DM is to create a mock‐up in Photoshop or in a suitable tool for email design. Try the design with a dark background and a lighter background. Turn up hue, saturation, and brightness and you will see how it could possibly look in DM.

Want to update your email design theme?

When setting up your design theme for the first time, it is always good to remember the Dark Mode aspect. But if you are already up and running and you need help with how to design for DM—contact your Account Manager to get more information on how to get started.

Was this article helpful?
1 out of 1 found this helpful



Article is closed for comments.