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. You will also learn how Voyado can help you adapt your email design theme.
Email design theme for Dark Mode
Since there aren’t any official fixes for Dark Mode in the email clients, we do not recommend doing specific adjustments in the code for 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 you work with your design and use logos and icons that will work for both dark and light mode. In that way it will work 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.
If you still want specific adjustments that work for only Apple Mail, and the Outlook app for iPhone and Android, Voyado can make the following changes.
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:
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.
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.
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.