Email design for Dark Mode

Dark Mode (DM) 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 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.

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!

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

Email design theme for Dark Mode

There are many ways to adjust to DM in your email design – but to begin with, you might want an adjusted design theme. Dark Mode is supported over various email clients, for both mobile and computer devices – but there is no universal display support for all clients and devices.

There are limitations and inconsistencies when it comes to DM but Voyado can help you to adjust to some of the email clients who have support for Dark Mode, which includes Apple Mail, and the Outlook app for iPhone and Android.

It starts with the design theme

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

  • Inverted versions of the logo in design theme
  • Inverted versions of icons
  • Guidance in choice of text colors
  • Guidance in choice of divider colors
  • Guidance in choice of background colors

Think about this when designing for Dark Mode

When designing your content in the email editor in Voyado, 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:

Images

Four ways to design and adapt your images to DM:

  • The main icons or logos in color or black should be transparent (e.g. Png).
  • 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 Dark Mode. 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 DM aspect. But if you are already up and running and you are interested in getting your design theme updated with support for DM – contact your client manager and you will get more information on how to get started. 

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

Comments

0 comments

Please sign in to leave a comment.