Demo Editor Sign In →
Design Templates
~ 9 min read
53962 views
rate it
07 December 2019

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

Stripo / Blog / 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.

Dark Mode_Stripo

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.

Colors in Light Mode.EN

(Email in a light mode)

Colors in Dark Mode.EN

(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.

Dark Mode in Gmail App_Android.EN

(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. 

Dark Mode for Emails_Checking Version of the Gmail App

  • 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.

Gmail App on iOS_Dark Theme Email.EN

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. 

Emails in Dark Mode_Native Email on iOS.EN

  • 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.

HTML Email in Dark Mode_Apple Mail_Test.EN

  • 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.

Emails for Dark Mode_Gmail on macOS.EN

  • 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.

Dark Mode for Outlook_Test Emails.EN

  • 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.

Testing Dark Mode in Outlook_com.EN

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.

AMP Emails in Dark Mode_Outlook.EN

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:

Setting Dark Mode in Outlook

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:

Dark Mode_MailRu

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. 

Using Photos with Backgrounds for DArk Mode.EN

2. Work on logos

a) May your logos have no backgrounds

Bad Example of a Logo in Dark Mode.EN

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. 

Logo with a Shadow

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.

Email Content Background Color_Setting Colors with Stripo

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.

Background Color for Email Content.EN

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.

Text-only Emails in Dark Mode.EN

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.

Text-Only Emails in a Dark Mode in Outlook.EN

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;

Plain-text Emails in Apple Mail.EN

  • 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.

Use Email Templates To Target Dark Mode in Popular Email Clients

Ellis Edwards 1 year ago

Is there any way to disable dark mode on stripo emails? I have added white as background color of content in all my sections and it still switches to black on dark mode

You might be interested in

previous next
Greatest Examples of GIF animations in Emails_Cover Image
27 October 2021 · 10 min read
16 Great Examples of Animated GIFs in Emails

GIFs in emails will be of great use if you want to showcase your product, draw users’ attention to certain elements, or just slightly decorate your text. In this article, we have provided some of the best email gif animation examples. Examples of animated GIFs in emails Here’s a compilation of the best examples with GIFs in emails. Each GIF fulfills its mission. 1. Adidas (Source: Email from Adidas) Adidas used email animations to show what color options they have....

Design Marketing
24 September 2021 · 18 min read
Best Fonts for Email: Usage Tips and Tricks

One of the most striking concerns in the email production process is choosing the right font. Weight, height, width, color, shape, spacing… Does everything matter? Yes, it does, but also one of the most crucial things is to choose the font that is legible. In this post, we're gonna show you how to choose the best professional font for email. It is easy to work on fonts in emails with Stripo Get started HTML email fonts: General rules to follow...

Design Templates
08 April 2021 · 17 min read
14 Best Email Signature Design Examples

Good email signatures help us build our business, and make a good lasting impression on clients. Since email signature is the last thing people see in emails, we should make them creative and memorable. Let's examine the best email signature examples and their appropriate use in personal emails and newsletters. Please be advised that all types of businesses require different professional email signatures with detailed contact information. Use this email signature template to design your own email signature faster Use...

Design Marketing Templates
banner9
11 September 2020 · 15 min read
10+ Best Free Email Template Builders for 2021

Do all email template builders seem alike? You are now confused about which one to choose to create the best HTML email templates? No wonder, as there are so many of them. We are going to survey the most popular builders to figure out their distinguishing features to help you find the best HTML email editor for your current needs. I will try to create one template in all these editors with the same media files to see if the builders...

Design Marketing Templates
Be always wide awake in recent email marketing news, guides, articles and how-to’s