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.
Gmail App (Android)
Gmail App (iOS)
Outlook App (Android)
Outlook App (iOS)
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.
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.