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 will 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.
Clients that currently support Dark Mode include:
While several email clients officially support Dark Mode, how the email is rendered on the end-user's display can vary drastically.
|
Mobile Apps |
Desktop Clients |
Web Clients |
|
iPhone Mail iPad Mail Gmail App (Android) Gmail App (iOS) Outlook App (Android) Outlook App (iOS) |
Apple Mail Outlook 2019 (Mac OS) Outlook 2019 (Windows) |
Dark Mode Rendering:
There are four different types of color schemes that email clients use to apply Dark Mode to emails.
- 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.
- Background Converter: Converts areas with transparent backgrounds to darker colors.
- Auto-Inverted Colors for All Non-Dark Backgrounds: Detects light backgrounds and converts them to darker colors.
- 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.
How to keep your emails looking good:
We’ve put together a few tips to keep your emails looking beautiful in both light and Dark Mode.
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 your question has not been answered or if you are seeing issues not covered in this article, please reach out to our Customer Support Team so we can assist.
Related Articles
Remove white border from profile picture - support for dark mode viewing
If you have recipients using dark mode, it's possible that your profile picture will have a white border around it. See below: To correct this, you will need to upload a png file that has a transparent background. This will remove the white border. ...How to Assign New Email & Reply/Forward Templates
First, log into the Black Pearl Mail App: Logging in Once logged in, navigate to the “Groups” icon in the top navigation bar You will now be presented with the below screen To choose the default template for new and reply emails you simply click on ...Specify Branding for Internal Emails for M365
What will you need to do? You may wish to apply a specific template to all emails that are sent internally. This documentation will guide you through the steps required to set up in the Black Pearl Mail application and your M365 tenant. You will ...Disable Branding on Internal Emails for Office 365
What will you need to do? If you would like to turn off branding for all internal emails, then this can be achieved by modifying the existing Black Pearl Mail Office 365 rule to exclude internal emails from routing through Black Pearl Mail. If you ...Exclude Large Emails from Routing Through Black Pearl Mail
What will you need to do? The maximum size of an email that be sent through Black Pearl Mail is 18 MB. If you would like to send an email with an attachment larger than this, then we will need to exclude them from routing through Black Pearl Mail If ...