Dark Mode and Your Emails

While Dark Mode presents a lot of positives for users, it also presents challenges for application developers. Since email needs to look great across the ever-changing landscape of devices and email clients (including those that don’t support Dark Mode), developers must be proactive to ensure emails render properly. Any developer will remind you that it’s certainly tricky to stay on top of.

Being in the email business, questions about Dark Mode are common, especially if it’s causing issues with the look of an email. In this article, we’ll address some of the common problems and possible solutions. But before we officially get started, let’s make sure we all understand exactly what Dark Mode is.

What is Dark Mode?

Dark Mode is a color scheme option that changes the traditional look of an application by inverting the colors so that light elements sit on top of dark backgrounds. Sounds pretty simple, right? If not, we’ll make things clear in the Dark Mode Rendering section below.

Email Clients Currently Supporting Dark Mode

While several email clients officially support Dark Mode, how the email is rendered on the end-user’s display can vary drastically.

Mobile Apps 

• iPhone Mail
• Pad Mail
• Gmail (iOS)
• Gmail (Android)
• Outlook (Android)
• Outlook (iOS)

Desktop Clients

• Apple Mail
• Outlook 2019 (Mac OS)
• Outlook 2019 (Windows)

Web Clients

• Outlook.com
• Hey.com

Dark Mode Rendering

There are four different types of color schemes that email clients use to apply Dark Mode to emails.

1. No Change: You can enable the Dark Mode feature in these clients, but no actual changes are made to the color scheme. The email appears the same in light or Dark Mode.
2. Background Converter: Converts areas with transparent backgrounds to darker colors.
3. Auto-Inverted Colors for All Non-Dark Backgrounds: Detects light backgrounds and converts them to darker colors.
4. Inverted Text:Clients that invert an email’s background colors will also invert the text color to ensure it is readable.

Examples:
Here are a couple of examples where one client has rendered the email perfectly vs other email clients that have only been able to partially apply Dark Mode.

In the above image, you can see that the Webworks logo has disappeared, the profile image has a white border, and the social media icons are nearly invisible. Not to worry, we’re going to cover some quick fixes next.

1. Optimize your logos and other images for all styles.

If you’re using images that have a transparent background (PNGs or GIFs) and dark text, you’ll want to add a translucent outline to the dark text.  This will help prevent potential issues where the email client might decide to use either the Partial Color Invert or Full-Color Invert settings.

2. Padding in images.

If your images are not transparent and include backgrounds, make sure there is enough padding around your focal point to avoid an uncooperative contrast. At Black Pearl Mail we have built-in padding to account for this scenario, as such, you should not experience this with your Black Pearl Mail emails.

3. Don’t rely on images to display text.

Although this is a workaround to get your emails to work across a range of email clients, turning your entire email into a bunch of images creates email accessibility issues for subscribers who use screen readers to read your email or could be put into spam as it seems suspicious to security software.

4. Avoid putting pure white text on pure black backgrounds.

Pure white text creates a maximum contrast, which also causes eye fatigue (one reason users switch to Dark Mode in the first place). White text is not your only option, there is a large color palette to play with 😊.

Need further assistance?

Since technology is constantly evolving, it’s quite a challenge to stay on top of all email clients and devices. Our dev team is continually monitoring emails and current trends to try to stay ahead.

If you’d like to learn more about how Black Pearl can help ensure your emails look consistent and professional across all email clients and devices, start a conversation with a Black Pearl email expert.