Dark Mode for Emails: What It Is & How to Optimize Emails

While designers and researchers widely discuss whether dark mode for email is healthy and necessary, people keep using it more and more.

What is dark mode?

The dark mode displays light-colored texts, icons, and UI elements on dark backgrounds. 

How does it work? Some believe that dark mode shifts colors to contrast ones (opposite ones from the color wheel) when an email is opened on a device with the dark mode.

But this is not quite true. It does not invert green to red, nor blue to gold or yellow. The dark mode utilizes lighter shades of the exact same colors (in case you did not set a specific color as a content background).

How does it do it? An email client detects the email content background color. Then applies dark background if it's not been set and applies contrast shades of email content colors.

(Email in a light mode)

(email in a dark mode)

However, when it comes to a black background — the dark mode turns it to white in Gmail on iOS and Android. Dark grey gets shifted to light grey, etc. 

What makes the dark mode so popular?

This feature is getting so popular for several convictions:

• it is recommended by ophthalmologists

Light text on a dark background is said to reduce eye strain. However, ophthalmologist still dispute on it;

• it’s on-trend now

Well. This is true. Many people turn it on just because it is something new and they want to try it out;

• it is just comfortable

Some users find it more comfortable to read on dark screens, especially when it’s night outside;

• it saves your battery life

Google confirmed that the dark mode on Android saves your battery life by up to 50%. However, it is relevant for the OLED screens only.
Wired says the dark mode has no impact on the battery life if we are talking about the LCD screens, which are widely used by Apple. Btw, Apple promised to drop all LCD screens in favor of the OLED ones.

List of email clients that support the dark mode, and how your emails render in them

The dark mode is just getting popular. Only the latest versions of OSs support it and render emails correctly.

• Gmail app on Android (Android 10)

It inverts colors fully: not only for the UI, but emails are displayed in the dark mode, as well.

We tested a wide variety of emails. One of them initially had a dark background and a white row/stripe with a menu. 

Android 10 did not invert dark to light colors, but it changed my white row to dark.

(email on Android 10, dark theme)

Important to note:

Like we said, only the latest version of Android — Android 10 — renders emails in dark mode. But there are other obligatory conditions to pay close attention to if you want to see emails in Android’s dark mode. They are as follows:

1. Your Gmail app should be downloaded from Google PlayStore, not the app that was on your phone by default. Samsung phones have them sometimes.

2. You should have the latest version of the Gmail app, preferably updated in November 2019. 

• Gmail app on iOS (iOS 13)

What does the Gmail app on iOS do?

My email was originally dark with the light menu row. iOS inverted dark to light colors, and light to dark colors.

Important to note:

Gmail is still rolling out the Dark Mode for emails on iOS. It is supposed to be fully visible and available to all users in like 2 weeks. But the same process for Android took Google approximately two months instead of two weeks. We just need to be patient.

• The iPhone Native Mail App (Native Mail on iOS)

The app allows you to turn on the dark mode for the UI and the email area. If you have set a transparent background color, then the iPhone Mail will turn it to dark.

Otherwise, your emails will look absolutely the same in both dark and light modes. 

• Apple Mail on macOS 

Same situation here. The app allows turning the dark mode on for the UI, but it does not affect the design of your HTML emails in the dark mode.

• Gmail on macOS and Windows

It does not invert colors or does it partially — call it whatever you want.

The app allows you to turn on the dark mode for the UI, but the email area remains light — so, it does not affect the email rendering at all. Your emails will look exactly the same in both dark and light modes.

• Outlook app (2019) on Android 

It is said to invert colors partially. Must confess, I could not try it out as I don’t have Outlook 2019 on my smartphone.

• Outlook app (2019) on iOS

It is supposed to invert colors partially. But I also do not have the Outlook 2019 app on iPhone.

• Outlook 2019 on macOS

Inverts colors fully. It does just like Android 10 — leaves dark design the way it is, and turns a light background to dark.

• Outlook.com

The situation with Outlook.com is very interesting.
It is supposed to invert colors partially. But when I send an email with a dark design, Outlook.com shifts colors to light on a night mode. And when I send an email with the design made in light colors, Outlook.com inverts colors to dark.

Interesting facts about the dark mode on Outlook.com:

1. Outlook.com does not affect the design of AMP emails at all.

If you’ve set a white background — this is what your users will see in this particular email client even with a dark mode on.

2. Outlook.com allows you to see email in both light and dark modes without changing the UI’s color.

To turn emails from light to dark and vice versa, you need to only click this button:

3. Outlook does not invert border colors.

Tips to optimize emails for dark mode

Do not try to hack the dark mode so that your emails render like they do on regular modes. Because if people use this mode, they do it for a reason. And we should respect that.

So, in order to optimize your email template for the dark mode, you should:

1. Work on the imagery

a) Use icons and images with transparent backgrounds or make sure their backgrounds are of the same size to avoid this:

Would you agree that this is not the best example of a dark theme email as images white diverse background sizes ruin the entire imporession?

b) Be careful with transparent images

You are supposed to use images with transparent backgrounds for product cards.

However, photos of people would look better if they have a specific background. 

2. Work on logos

a) May your logos have no backgrounds

b) May your logos be written not in black to render well across both dark and light themes

Some coders suggest that you use two logos and even provide a code sample which ensures that black logo is displayed in the light mode, and white — in the dark mode.

We tested — the code did not help. But made our email code much heavier.

c) Apply light shadows to black logos

If your logo has to be written in black, add light shadow to it. It will look nice, and it will comply with your brand design. 

3. Set background colors for email containers

If you do not want your email content to have a dark background, you may set custom one with Stripo.

The color that you set as the “Background color of content” will remain exactly the same in the dark mode.

Set “transparent” color to the stripe then — in this case, the chosen background color will be applied to email content, but not to the entire email area.

Be sure to set the same color scheme to all stripes/rows. 

4. Test your emails

Always test your HTML emails in both regular/light and dark appearances.

5. Do not add any extra code elements

Despite some recommendations to add special code elements in your dark theme templates that are said to enable your emails to render in a dark mode, these code samples do not solve any issues yet. At least, this is what numerous tests show.

Besides, email templates work pretty well in most email clients.

Hence, it is not rocket science to optimize your email designs for the dark mode — you only need to work on email appearance. No need to work with codes yet.

How does the dark mode impact plain-text emails?

Personal emails in a dark mode are said to always render correctly across all email clients that support this new feature.

But is this true? Let’s check:

1. Gmail on desktop does not invert our emails at all. Hence, we should not be worried about that.

2. Gmail on iOS, and Android shows light typography on dark background.

3. Outlook also inverts the colors of our plain-text emails in a dark mode.

4. Native iPhone, and Apple Mail Apps do invert background colors from light to dark, and text colors from dark to light when it comes to personal emails in the dark mode.

However, there are some things about plain-text messages in Apple Mail and in iPhone mail worth being mentioned:

• it only inverts colors if this is the only or the first email in a chain. Sometimes, the second and all next emails will have a white background and dark typography;

• even if this is the first email in a chain, but it contains an image, your personal email in a dark mode might go white. Your company logo which is included in your email signature is considered an image, as well;

• personal emails that were forwarded to you may also have white backgrounds.

Final thoughts

Of course, considering that only a small share of users can see the dark mode, we might be tempted to ask ourselves — is dark mode really worth the effort it takes? It is! First of all, people use it for a reason. We should respect that and optimize our email designs for the dark mode. 

Second of all, the popularity of this feature is growing, and very soon a larger number of our subscribers will turn this mode on.