How to Create Dark Mode Compatible Emails That Still Look Great

2018 brought the dawn of Dark Mode in the world of email marketing. Apple brought Dark Mode to its desktop email client in that year. In 2019, iOS Mail extended its support for Dark Mode. During the same time, Gmail also joined the league and started supporting this latest trend.

Let’s first understand what Dark Mode is.

Dark Mode refers to a color inversion that displays light-colored fonts, icons, and visual elements on a dark background. Apart from emails, it has gracefully entered Twitter, Facebook Messenger, Slack, and many other apps.

It has gained pace owing to the plethora of advantages it presents to users.

Get affordable help designing emails on Fiverr.

Advantages of Dark Mode emails

• Light-colored fonts and UI elements on dark backgrounds reduce eye strain, mainly when the ambiance is less illuminated.
• It saves your battery life by reducing screen brightness. The battery consumption with Dark Mode gets reduced by up to 63% on OLED displays.
• Your content is likely to be more legible and readable, which will increase its consumption among users.
• Dark Mode makes the layout look classy and sophisticated.
• With Dark Mode, patients with photophobia can have a sigh of relief as it will not worsen a migraine.
• Most of the time, Dark Mode enhances the accessibility of the information.
• If you have someone sleeping next to you, using Dark Mode will cause minimum inconvenience to that person. That’s a perfect symbiosis.

Despite these benefits, Dark Mode presents some challenges for the email marketing fraternity.

Challenges with Dark Mode emails

Every email client renders Dark Mode according to their rendering engine. Because of this, it can sometimes hamper the subscriber’s experience.

Let’s understand this challenge by considering three different situations.

Suppose your subscriber is using a desktop, web, or traditional mobile email client. In such email clients, you will not face any issue with rendering (in most cases).

Even if the user changes the settings to Dark Mode, the email design will remain as it is. 

This email will look precisely like this even when opened in Dark Mode.

Although this comes off as the most favorable scenario, it poses a problem when a user accesses an email with bright colors and a light theme in a dark interface. The email will be too harsh on the subscriber’s eyes.

In the second situation, assume that your subscriber is using Outlook.com in Dark Mode settings.

Outlook.com leads to partial color inversion, which will reverse the light background and dark text.   

The same email will look something like this in these email clients:

In case your subscriber is using Windows.com, all colors will get inverted in the Dark Mode theme. This is known as full color inversion. 

Take a look at the screenshot below:

Now, this looks pretty much fine and is not too problematic for the reader. However, it can become frustrating when your email is dark-themed, but because of full-color inversion, the email becomes light-themed even in Dark Mode.

Other than Windows and Outlook.com, color inversions are also seen in the Gmail App on Android and iOS.

Apple is always more advanced than its competitors and counterparts. Dark Mode support is not an exception. Advanced Apple Mail allows the developers to design and code a customized Dark Mode compatible email. Using CSS, HTML metatags, and some other properties, email developers can successfully alter the font color, background, and visuals.

In addition to these challebges:

• Dark Mode email might not go well with every brand personality.
• If your Dark Mode email does not render well, it might activate the spam triggers. This will, in turn, hamper your brand reputation. (We shall discuss this in more detail in the last section on deliverability.)

Overcoming the challenges with Dark Mode compatibility

To ensure that an email gets displayed as desired even on Dark Mode, follow these simple practices.

• Crop the images and logos properly.

Keep sufficient margins while cropping the images.

Check out this image to understand what this means.

• Outline the logo for Dark Mode.

Add a white outline to your logo so that it looks good in Dark Mode.

Here’s an image to demonstrate it.

• Follow the same tip for all your social media icons, as shown in this image.

• Design calls-to-action with curved angles so that there are no rendering issues in Dark Mode

• Make all your images transparent. It is advisable to keep the images in PNG format.
• Make sure you don’t mix any background colors and images. If you do so, the email will look like this:

• Always test your emails. Be doubly sure and always test your emails before hitting the Send button. Litmus and Email on Acid are two of the most popular tools that will let you know how your emails will render in Dark Mode across diverse email clients.

Compatability of dark mode emails

Every Operating System comes with options for Accessibility and Display settings. Visually impaired people will be able to read better if a dark background is used with white fonts.

With the exceptions of legacy email clients and OS, the latest email clients and devices invariably support Dark Mode.

This table will give you a detailed insight into Dark Mode compatibility in email.

How does dark mode affect email deliverability?

The most important factor when it comes to email deliverability is subscriber engagement. If your email presents a broken layout in Dark Mode, it will compel the subscriber to unsubscribe or report your email as SPAM.

Your subscribers will refrain from opening future emails from you and delete the messages without even opening or glancing at them.

Inbox providers observe these red flags. Eventually, they will block the delivery of your messages. By building emails compatible with Dark Mode, you will be able to enhance your sender reputation by increasing the email open rate and click-through rate.

In a nutshell

Dark Mode in emails is still in the exploration phase. Email marketers and developers are trying to make the most of this new fad and optimize their emails to impart the best experience to their subscribers.

I have covered all the important tips and tricks in this article. I am sure it will help you get started with creating Dark Mode compatible emails.

If you are looking for more insights into Dark Mode email designing and coding, Email Uplers has created an attractive infographic around the topic: In the Limelight: Dark Mode in Emails.

Guest author: Kevin George is Head of Marketing at Email Uplers, one of the fastest-growing custom email design and coding companies, and specializes in crafting professional email templates, PSD to HTML email conversion and free responsive HTML email templates in addition to providing email automation, campaign management, and data integration & migration services. He loves gadgets, bikes, jazz and eats and breathes email marketing. He enjoys sharing his insights and thoughts on email marketing best practices on his blog.