How to Utilize Dark Mode_Stripo
timer ~ 9 min read
60767 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. In this blog post, we will talk in more detail about the dark mode in general, discuss dark mode email design tips, and how to add dark mode styles to your newsletter without mistakes.

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 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 scheme. Then applies dark backgrounds if it's not been set and applies contrast shades of email content colors.

Colors in Light Mode

(Email in a light mode)

Colors in Dark Mode

(Email in a dark mode)

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

What makes the dark mode so popular?

Dark mode for email 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, ophthalmologists still dispute on dark mode setting and its impact on our eyes;

  • it’s on-trend now

Well. This is true. Many people turn it on just because the dark mode is something new, and they want to try it out. As a result, there are 81.9% of users with dark mode on the phones alone;

  • it is just comfortable

Some users find it more comfortable to read in dark mode, 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% as it reduces screen brightness. However, it is relevant for OLED screens only;

Wired says the dark mode has no impact on the battery 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 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 Android and iOS devices with the latest versions of OSs support dark mode and render dark mode styles correctly. Now let's talk about which email clients support dark mode and how they manage it.

Note: Everything not on this list (desktop, web, and legacy mobile email clients) will not change anything, so dark mode emails may look odd in other email clients.

  • Gmail app on Android (Android 13)

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

We tested a wide variety of emails. One of them initially had dark backgrounds 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

(Dark mode email, 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. 

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 font colors as well as backgrounds. For example, light backgrounds with dark text color turn to dark colors with light font colors.

Gmail App on iOS _ Dark Theme Email

Important to note:

Gmail is still rolling out the dark mode 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)

Apple added dark mode support starting from iOS 13 in their native Apple mail app. This email client allows you to turn on the dark mode for the UI and the email area. If you have set transparent background color, then the iPhone Mail will turn it to the darker background.

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

Emails in Dark Mode _ Native Email on iOS

  • Apple Mail on macOS 

Same situation here. Apple Mail allows turning the dark mode on for the UI, but it does not affect the supported color schemes of your HTML emails in the dark mode. Besides that, Apple Mail on macOS allows you to add custom code to tweak dark mode to your liking through CSS. This includes HTML meta tags, CSS target, and updated properties that enable email developers to change the colors of fonts, visuals, background images, and so on.

HTML Email in Dark Mode _ Apple Mail _Test

  • Gmail on macOS and Windows

This one of the popular email clients on a desktop operating system does not invert colors or does it partially in dark mode — call it whatever you want.

The email client 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 mode.

Emails for Dark Mode _ Gmail on macOS

  • Outlook app on Android

It is said to invert colors partially. However, when I tested the dark mod on my Android device, no inverted colors were noticed. However, if you encounter such a problem, or if your dark mode email is incompatible with Outlook on Android, just add the data-ogsc prefix to duplicate dark mode styles. As a result, you should have something like this:

[data-ogsc] .light-mode-image { display:none; display:none !important; }
[data-ogsc] .dark-mode-image { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }
  • Outlook app on iOS

This email client is supposed to invert colors partially in dark mode. But I also do not have the Outlook app on my iPhone.

  • Outlook 2019 on macOS

When you enable dark mode in this email client shows reversed color scheme. It does just like Android 10 — leaves a dark color scheme the way it is and turns a light background to dark.

Dark Mode for Outlook _ Test Emails

  • Outlook.com

The situation with Outlook.com is very interesting.

When dark mode enabled, it is supposed to invert colors partially. But when I send an email with a dark color scheme, Outlook.com shifts colors to light in dark mode. And when I send an email with the design made in light mode colors, Outlook.com inverts colors to dark.

Testing Dark Mode in Outlook

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 in the email.

AMP Emails in Dark Mode _ Outlook

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

To turn on the dark mode effect for your emails, 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 custom dark mode in email so that your emails render as they do on regular modes. Because if people use this mode, they prefer the color scheme for a reason. And we should respect that.

So, in order to optimize your email template for the dark mode and target dark mode users, 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 with white diverse background sizes ruin the entire impression?

b) Be careful with transparent PNG images

You are supposed to use transparent images for product cards to create appropriate dark mode images for your newsletter. Don't forget to add a translucent outline to transparent PNGs with dark text to your dark mode email.

However, photos of people would look better if they had a specific background.  Besides that, it would be wise to use an outline and a colored or white background for dark images. Meanwhile, images with dark background colors will keep those backgrounds no matter how the email looks.

Using Photos with Backgrounds for Dark Mode

2. Work on logos

a) May your logos have no backgrounds

Bad Example of a Logo in Dark Mode

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 that ensures that the black logo is displayed in the light mode theme and the white — in the dark mode.

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

c) Apply light background (or white outline) and shadows to dark mode-specific logo

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

Logo with a Shadow

3. Add dark mode styles for @media via media query

In order for your email to display correctly in dark mode, you should add a special media query to each email media element. You should end up with something like this:

@media (prefers-color-scheme: dark ) {
.dark-mode-image { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }
.light-mode-image { display:none; display:none !important; }
}
}

This media query will help tweak your dark mod mailing lists for greater compatibility with email clients such as Apple Mail, iOS, Outlook.com, Outlook 2019 (macOS), and Outlook App (iOS). Just add (prefers-color-scheme: dark) query to your email’s <style></style> section to create custom dark mode styles.

4. Set background colors for email containers

If you do not want your email content to have dark backgrounds, you may set a custom light background color or custom dark mode with Stripo.

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

Email Content Background Color _ Setting Colors with Stripo

Set “transparent” color scheme 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

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 or dark mode appearances.

5. Do not add any extra code elements

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

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

Hence, it is not rocket science to optimize your fully dark mode design — you only need to work on email appearance to achieve outstanding dark mode versions of your emails. 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

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

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

  • 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 the dark mode experience 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 custom dark mode styles.

Second of all, the popularity of this feature is growing, and very soon, a larger number of our subscribers will turn this mode on, so you must be ready to implement dark mode in your newsletter.

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
banner9
06 June · 15 min read
10 Best Email Template Builders for 2022

Do all email template builders seem alike? You are now confused about which one to choose for your email campaigns, aren’t you? No wonder, as there are so many of them.  We will survey the most popular builders to find their distinguishing features to help you find the best HTML email builder 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 differ. The best...

Design Marketing Templates
24 May · 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 legible typography. In this post, we're going to show you how to choose the best professional font for email. Design beautiful emails with Stripo by using prebuilt templates Browse   HTML email fonts: General rules to follow There are three ground...

Design Templates
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
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
Be always wide awake in recent email marketing news, guides, articles and how-to’s