A Complete Guide to Dark Mode Email Design and Campaigns

Jyothiikaa Moorthy
ByJyothiikaa Moorthy

9 mins read

Every application on my phone and laptop is set to dark mode. Because the last thing I want is to feel like a vampire getting burnt by the sun every time I check my emails in the morning. And I'm sure I'm not the only one.,

Yes, ideally, people shouldn't be checking their emails right after they wake up but let's face it, everyone does.

And some people just like the look of the dark aesthetic when reading their emails. So, it's up to you now as a business to create dark mode-friendly emails to help create a pleasant experience for your subscribers when they read your email in the dark mode.

Here we'll tell you all about the dark mode in emails and how you can make your emails dark mode friendly.

What is dark mode in emails?

Dark mode in emails is a setting in email clients which displays the email's components of text, email icons, and UI elements as light-colored on a dark background.

Dark mode example:

image10.jpg

Light mode example:

https://lh5.googleusercontent.com/MvxJ7n4vOEnAcvcGVZADW5OSmYuIjX6RTRBQ2JF2Bh2Y5-EaWw3IzlE8aJq1trkn4exgjiMM7zvemKL-iC9Jx_adM8PUDGNVBpXCO_y_BBp0LhOFQRd4mEFTAQjCYjm9ZAPWTv-1

What are the benefits of dark mode emails?

Maximize your email performance with our free ebook

Optimize the right email metrics for higher ROI

The dark mode is a rising trend for its dark aesthetics, but it has many benefits apart from just looking good. Here are some reasons why using dark mode can be advantageous.

✅ Better reading experience

The dark background in dark mode minimizes the amount of blue light and screen glare, making it easier for people to read your email even in low--light environments.

In addition, it is helpful for people who work at night since the dark background helps reduce the strain on their eyes when reading something at night.

✅ Battery saving

It is commonly known that using dark mode can help you reduce energy usage by your device's battery, but it's not that straightforward. Because if you use dark mode on devices with OLED (organic light-emitting diode) screens, you will be able to save energy while using it.

But, if you have a device with LCD screens, the dark mode doesn't impact battery life. This is because devices with OLED screens turn off pixels in dark mode, thus drawing no power, but LCD screens will use the same energy for both dark mode and light mode.

✅ Improves email accessibility

While the light mode is suitable for most people, some with visual impairments would benefit more from the dark mode.

For example, people with Cataract, Photophobia, ADHD, Myopia have a better reading experience when using the dark mode.

So by making sure your email renders well in both light and dark mode, you ensure that your email is accessible for most readers.

Read more - What Is Email Accessibility and Why Is It Important.

Do email clients support dark mode?

Like any other feature in an email, the support of email clients for the dark mode feature varies among email clients.

For example, here's the chart of email clients that support dark mode. Some partially or fully convert your emails into the dark mode, while some show no color change for HTML emails in dark mode.

Dark mode email client support chart

Here's how email clients display dark mode emails by default:

1. No color change in dark mode

These email clients allow their users to select a dark mode in their settings but only change plain text emails to dark mode and don't change anything in an HTML email, as shown in the example below.

Examples of such email clients are Apple Mail, Hey.com.

Dark mode:

https://lh3.googleusercontent.com/84wO5gdYEK3JFgYz0WQkGsa60GtYoTvjQCCQ9hzP1HvlyN4_mWQWEUp8QKkdeVKYgt1cnaEisFjtFfYia7M1NTb-QmMxLXPT9FZUDxgaYl6Na_WZ5II5qLJveI3bWDeobU0KcXDU

Light mode:

https://lh4.googleusercontent.com/j2_0hJZ3_MAYw_O2pimH-gNec8W_FffYVTy7alQVQ8Sj0hFU3UIbgzcRFH6MTICOQhyVgk3JK3G2jMEo4FaupP6u4Lv_v8lipo12ZvpbdvduQrqxWaLRt12zm2joYMOU9K1rOY4G

For these clients, convert pure white (#ffffff) background to a dark grey by including a <meta> tag for dark mode . But if you don't change it, you can use an off-white (#fffffe) background instead.

We'll cover this meta tag later on in the guide.

2. Partial color invert

Partial color invert is when email clients detect light backgrounds, convert them into dark backgrounds, and make the dark text light in color.

Here is an example of partial color invert by Litmus.

https://lh5.googleusercontent.com/RLjkIq2ZYpHbA0NGjEHBBkKtjt1x7Qdiy8AVC8In3qW4ngRQychhd7cMdUv2sEk2IVF9jqWsSEpFbodxBu2Sd7l3YLKirRCYAfAjQIQZz_p9Tr1SfU1F4a4jdlcKU3J162kuhA5Z

Email clients who show partial inversion are Outlook.com, Outlook app (iOS & Android), Outlook 2019 (macOS), Gmail app (Android).

These email clients show partial color invert as a default, but they also support targeted dark mode. So you can display custom dark mode emails through these clients.

3. Full color invert

Default full-color inversion by some email clients is the most meddlesome change amongst all the other default changes. It inverts both a light and dark background. So even if you have a dark-themed email, it'll make them light.

Email clients who do this are Outlook 2019 (Windows) and Gmail app (iOS).

https://lh6.googleusercontent.com/NZdu_CfOf6Dloqt-pcqV9zDNIRAvxJZDmbHmdLESy02alewlSpjO7880RmZvsXoCHVtGseaqutgb54UwdE0DP8ddqEfRoMKOgr7XA18csEyDfSXt14Ar70XwW71RLNkvXnUJYK0M

In the examples above, the light background is converted as a dark version of the original color, and even the dark area with light text is converted to light with dark text.

How to optimize your email for dark mode?

Email clients automatically convert your emails, but this automatic conversion doesn't always work favorably. So it's best to optimize your email for dark mode. And here's what you need to do to optimize your email for dark mode.

1. Use transparent PNGs in the email

Transparent PNGs are images without a background and are usually indicated by a checkerboard pattern, as shown in the example below.

Using a transparent PNG lets you ensure that there won't be a jarring background for the image when email clients convert your email from light to dark mode. In addition, it will help improve the user experience when your subscribers read your email as they won't be subjected to bright backgrounds when reading in dark mode.

https://lh4.googleusercontent.com/WlZDG4qSo9rRJUj6Y1HTtrG4xDqG1DVjH7-rCuA4gyatnGL3CFtGga1VhCMS-hb3lbBXjI4QpKiZm5-fKaf64MZIxkQoUnSysI2FBO_Ws2aE0UcX9L_-fDXU30UVtq2_G7vJjB4t https://lh3.googleusercontent.com/IXGWRkUEql_LQyB9Qceb-P_IzqP1qVLjVW6TCRwk3MALIeT2ejGREzhwXBRZrKOHp5uoxMQO92r58m3w5ZH4GdusnLxmz5mFYSiddjlLNZw3Wf0nmas4PKYSAI_REFrqtuP2zFwo

However, if you use transparent PNGs in your email, make sure to reduce the size before adding it to the email, as they generally have a larger file size.

2. Add a translucent outline to dark text transparent PNGs

If the transparent image of the logo or text is in black, then there is a high chance of it disappearing into the background in the dark mode, like shown in the image below.

https://lh3.googleusercontent.com/IJzvhtqZz5NLFLdQoEOAk-4NjyyC6YBlf3X2ynEE2vLej3wPLDRGygqNvz97vsbZhjhNvSlUNfS5ecQshR18dYQgxlzWYe2i9IpAlvRCEji3pny8o-W1UYie40hzAAkd_PITvBpu

You can add a white stroke or border around the black elements to make the logo or text visible even in the dark mode, as shown in the example below.

https://lh4.googleusercontent.com/pLjwbnMaOgCusBksnLqEa5K_rPQzIok0FdEDdbKCQCSClyPaPHG71mZuxeJFpNQrNgraJNEJnpr8xkIx3D80_uzD4eVd-OKVDj0Y7iKdJjinHLMyMrO7MA4t6CLtvK9T5A2ciYfZ

Also, the white element will just blend into the background when viewed in light mode.

3. Add code to customize your dark mode emails

We have seen how email clients render your regular HTML emails for dark mode can vary among different clients. So one thing you can do to control the way it is displayed is to use code to add your dark mode styles to the overall code.

Firstly, add the following metadata in the <head> tag to ensure that email clients recognize that you have a dark mode email version for those users who have enabled it.

<meta name="supported-color-schemes" content="light>

<meta name="supported-color-schemes" content="light dark">

Now, if you want a custom dark mode style in email clients like iOS, Outlook.com, Outlook App(iOS), Apple Mail, Outlook 2019(macOS), then you can add the media query [@media (prefers-color-scheme: dark )] to the embedded <style> section in your email code.

For example :

  /* Shows Dark Mode-Only Content, Like Images */
  .dark-img { 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; }
   
  /* Hides Light Mode-Only Content, Like Images */
  .light-img { display:none; display:none !important; }
   
  /* Custom Dark Mode Background Color */
  .darkmode { background-color: #272623 !important; }
   
  /* Custom Dark Mode Font Colors */
  h1, h2, p, span, a, b { color: #ffffff !important; }
   
  /* Custom Dark Mode Text Link Color */
  .link { color: #91ADD4 !important; }

}

If you want the same model to be supported in the Outlook app (Android), add [data-ogsc] as a prefix.

For example,


[data-ogsc] .dark-img { 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; }
 
/* Hides Light Mode-Only Content, Like Images */
[data-ogsc] .light-img { display:none; display:none !important; }
 
/* Custom Dark Mode Background Color */
[data-ogsc] .darkmode { background-color: #272623 !important; }
 
/* Custom Dark Mode Font Colors */
[data-ogsc] h1, [data-ogsc] h2, [data-ogsc] p, [data-ogsc] span, [data-ogsc] a, [data-ogsc] b { color: #ffffff !important; }
 
/* Custom Dark Mode Text Link Color */
[data-ogsc] .link { color: #91ADD4 !important; }

4. Test the dark mode emails

Now that you have created a dark mode email, it's time to test it out and see if it renders well for all email clients. You can use tools like Litmus, BEE editor to get a preview of how your emails look before you send them out.

From the preview, you can identify any mistakes and correct them for the final campaign. Make sure you test what your email looks like in both light and dark mode to see if the changes you have done works for both versions.

If you don't want to use any external tools, send the email to yourself and check both dark and light mode to see if it renders well. If you have a few different email clients, you can better understand how it'll look for your subscribers.

Get a sample AMP email in your inbox

Experience the power of interactivity right now

5. Modify your email design elements

Colors, CTA buttons, icons, your email that looked good in light mode may not translate the same way in dark mode. So it's best to check and design something that works for both modes.

In terms of color, sometimes, if the color is a bit too saturated, it can be harsh on the eye in the dark mode. So to avoid this, use a slightly muted color than the original color you intended to use such that it works for both light and dark mode like in the example below.

https://lh5.googleusercontent.com/YQjx2yRdc36UHqXLzGx7iK71wQgUWM-hAwZn14SqHNtvLqyZ8C6FwPJ5ALmItE4CpYhrvplHRMoPjqyQWTFK_kXxKDnTMMCn-Cw51cbQLljVZ9HBwiQxBDTr06OchwxFg_U-61yV https://lh4.googleusercontent.com/yPwiotvACBUQSvnJn3Ja4CeyjHJu_2TuOxjwH_9wR4VPo00ggZPTUXMDWjRmxEOOwab5VnLZ4rV0Zq0BjeX-CBv45cepDVxAebx_6wXD8F91vbTzbt5R4Ai3QbmiZTGITXWdkgGn

And make sure your social media icons are visible in the dark mode, as sometimes, if there are no outlines around the icon, it can blend into the background.

Use color intentionally for buttons or links to make sure there is a good contrast between the background and content to attract the most attention.

Wrap up

The most important thing for any business is to satisfy the customer's needs and if they want dark mode, then so be it.

It's our responsibility to respect their decision and create emails that work well in dark mode and provide a good user experience for the readers.

Yes, it is a pain in the butt to create specifically for dark mode, but it has to be done. And, we hope that the article made it easier for you to know what to do to create a well-designed dark mode email.

What should you do next?

You made it till the end! Here's what you can do next to grow your business:

2_1_27027d2b7d
Get smarter with email resources

Free guides, ebooks, and other resources to master email marketing.

1_2_69505430ad
Do interactive email marketing with Mailmodo

Send forms, carts, calendars, games and more within your emails to boost ROI.

3_1_3e1f82b05a
Consult an email expert

30-min free email consultation with an expert to fix your email marketing.

Table of contents

chevron-down
What is dark mode in emails?
What are the benefits of dark mode emails?
Do email clients support dark mode?
How to optimize your email for dark mode?
Wrap up

Fresh Marketing Ideas, Every Week.

Get the latest marketing roundup & news

Get 3X conversions
with interactive emails

Check.svg

Create & send interactive emails without coding

Check.svg

Put revenue on auto-pilot with pre-built journeys

Check.svg

Save time with AI-powered email content creation

1000+ businesses grew with Mailmodo, including

Frame_1110165681_3_b26b1a7573
Group_1110165532_1_bf39ce18b3
Ellipse_Gradientbottom_Bg
Ellipse_Gradientbottom_Top
gradient_Right