Dark Mode and Your Emails

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.


  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.


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. ...
    • Default Group: Templates and Domains

      First, login to 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 ...
    • 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 ...
    • Branding not applying on forward and reply emails

      Black Pearl Mail provides you with the option to use a different template for new emails and forward/reply emails. Also, the placing of the branding with the email also needs to be determined, based on whether it is a new email or a forward/reply ...