Ultimate Guide to Dark Mode [+ Code Snippets, Tools, Tips from the Email Community]

What Dark Mode is and why people use it

Dark mode is a darker color palette for low-light or nighttime environments. This reversed color scheme uses light-colored typography, UI elements, and icons on dark backgrounds—and it’s one of the hottest digital design trends in recent years. From Apple’s OS to apps like Twitter, Slack, or Facebook Messenger, most popular operating systems and apps now allow users to switch to Dark Mode.

Dark Mode is a hot topic—and for good reason. Many people prefer Dark Mode because:

• It’s easier on the eyes. Light text on a dark background is much better for minimizing eye strain, especially in low-light situations.
• It reduces screen brightness, saving your battery life.
• It can improve content legibility and can make it easier for some users to consume content on desktop and mobile.

They may simply have a preference for darker interfaces.

3 ways Dark Mode settings impact email design

How are clients applying Dark Mode to my emails?

At the moment, there appear to be three fundamentally different types of color schemes that email clients use to apply Dark Mode to emails. Let’s look at them one by one (or jump straight to the Dark Mode Email Client Support Chart).

No color changes

Yes, you read right. Some email clients let you change their UI to Dark Mode, but that doesn’t have any impact on how your HTML email is rendered. Whether the app is set to Light or Dark Mode, your email will look exactly the same. Here’s a list of those clients:

• Apple Mail*
• Gmail Desktop
• AOL 
• Yahoo mail

*Doesn’t change color modes if you leave out the Dark Mode meta tags. If you include the Dark Mode meta tags but don’t put any styles in, they give you a partial invert.

Check out this email example in Apple Mail: The design of the email stays exactly the same, no matter if you view it in the dark or light email client UI:

Apple Mail has a few exceptions to this: First, plain text emails do trigger the application of a Dark Mode theme, and the minimum code that blocks Dark Mode from applying to a plain text email is a 2×1 image—this is to ensure that you can include a 1×1 tracking pixel while retaining a “plain text” feel.

Secondly, If you enable Dark Mode as described below, then Apple Mail will auto convert your email to a Dark Mode Version using a partial invert (also described below).

Dark Mode options: default vs. custom

There are quite a few email clients that will automatically force their default Dark Mode onto your email if you don’t do anything at all. But if you’re like most of us and you’re not a fan of these Default styles, you might want to go with the third option: design and code your own Dark Mode theme. Below, you can see a side-by-side of an email with a Light Mode theme, and a Custom Dark Mode theme.

Before we look into how to approach a custom Dark Mode theme though, let’s check out how other email clients treat their Default Dark Modes.

Default Dark Modes: partial color invert

The first Dark Mode theme is what I like to call a “Partial Color Invert”. It only detects areas with light backgrounds and inverts them so the light backgrounds are dark, while the dark text becomes light.

It generally leaves areas that already have dark backgrounds alone, resulting in a fully Dark Mode design. Fortunately, most email clients that use this method also support Dark Mode targeting, so you can override the client-default dark theme.

Outlook.com is an email client that partially inverts colors, like you can see in this screenshot:

Default Dark Modes: full color invert

The Full Color Invert is the most invasive color scheme: It not only inverts the areas with light backgrounds, but impacts dark backgrounds as well.

So if you already designed your emails to have a dark theme, this scheme will ironically force them to become light. Unfortunately, this is currently the tactic used by some of the more popular email clients, such as Gmail app (iOS), Outlook 2021 (Windows), Office 365 (Windows), and Windows Mail.

In the examples below, you can see the light backgrounds have been converted to dark versions of the original colors and areas that previously had a dark background with light text are now light with dark text.

Not only does this Full Color Invert scheme most radically change your email, but the email clients that use this logic also don’t allow Dark Mode targeting at the moment.

Email clients are still figuring out how to best implement Dark Mode and may be open to feedback from users—especially since not allowing email developers to target Dark Mode with their own styles can have a negative impact on legibility and accessibility.

In the interest of advocating for better Dark Mode targeting support and less invasive Dark Mode theming logic, you can communicate your thoughts directly to Gmail’s Accessibility team, and you can also contribute your screenshots of Gmail’s Dark Mode breaking your email.

Different Dark Mode targeting methods

How do I target Dark Mode users with my own styles?

As noted above, how email clients in Dark Mode handle your regular HTML emails will vary. But what if you’d like to apply your own Dark Mode styles that could very well differ from email clients’ default color schemes? There are two methods you can use.

@media (prefers-color-scheme: dark)

This method works in very much the same way as applying a block of styles inside a @media query for your Mobile Responsive view, except this CSS block targets any user interface that’s set to Dark Mode. @media (prefers-color-scheme: dark) allows you to create the most robust custom Dark Mode themes where you can implement anything from Dark Mode-specific image swaps, hover effects, background images… basically almost anything you can do with traditional CSS! This method requires you to add Dark Mode meta tags and styles to the <head> of your email in order to work in Apple Mail.

[data-ogsc]

This is a method first brought to our attention by Mark Robbins to target the Outlook app. Not every style works with it, but it does work for image swapping on Outlook.com. While it seems like a pretty narrow market share, it’s relatively easy to simply duplicate the @media (prefers-color-scheme: dark) styles you already applied and simply add the appropriate [data-ogsc] prefixes to each CSS rule.

Which email clients support Dark Mode?

These clients and apps currently offer Dark Mode—either as a setting that the user can set manually or by automatically detecting the user’s preferred color scheme:

Mobile apps

• iPhone Mail
• iPad Mail
• Gmail App (Android)
• Gmail App (iOS)
• Outlook App (Android)

Desktop clients

• Apple Mail
• Outlook 2021 (Mac OS)
• Outlook 2021 (Windows)
• Office365 (MacOS)
• Office365 (Windows)
• Windows Mail

Web clients

• Outlook.com

But just because all these email clients offer a way to set their UI to a dark color scheme, that doesn’t mean that they handle your emails the same way. Email rendering is complex. An email that looks great in one client might look broken in another. Now, Dark Mode is adding another layer of complexity. As we’ve already shown, there are various ways a Dark Mode email client might deal with your code.

And there’s no consistent support for the different targeting methods either. So which email client follows which color scheme by default? While some offer email designers no opportunities to target Dark Mode to optimize the reading experience, several email clients can be targeted with either the @media (prefers-color-scheme: dark) or [data-ogsc] methods.

We’ve tested the Dark Mode settings in the following email clients to see how they impact a regular email that doesn’t include any Dark Mode-specific targeting as well as support for targeting Dark Mode. Here’s what we found…

Email client support for Dark Mode

Dark Mode email client support chart (as of December 2022)

**Forcing the background color to stay the same color does not affect the font color and it will still invert. The only exception to this would be in clients that fully support @media or [data-ogsc]; or Gmail app where the color blend fix works.

Gmail iOS & Outlook Windows-specific targeting

Some #EmailGeeks out there have developed brilliant workarounds to control some of the Full Invert Default Themes we’ve been battling with. Each of these solutions are so thorough, they warrant their own guides—so be sure to check them out for a full explanation!

Rémi Parmentier came up with a tutorial on “Fixing Gmail’s Dark Mode issues with CSS Blend Modes” by combining mix-blend-mode and the Gmail hack from HowToTarget.email to retain your original background and text colors for Gmail App iOS.

Nicole Merlin put her email wizardy to work in “How To Fix Outlook Dark Mode Problems”, crafting two methods to target Outlook for Windows’ Dark Mode with MSO-specific gradient CSS properties and a really neat VML (Vector Markup Language) trick.

A word of caution when delving into these hacks, however: Because both of these methods have the intended effect of forcing the email client to render the original Light Mode text and/or background colors where applied, you run the risk of disrespecting your users’ preference for Dark Mode which goes against the spirit of accessibility. Make sure to use these sparingly, like improving the contrast ratio when the backgrounds or text convert to Dark Mode in an unreadable manner.

Though these targeting methods are relatively limited in comparison to what you can do with the @media (prefers-color-scheme: dark) or [data-ogsc] methods, they’re still handy tools to have in case you need to fix problems with Dark Mode breaking your text legibility.

How to design and code for Dark Mode

How to design and code Dark Mode emails

When targeting Dark Mode styles across different email clients, be sure to follow each of these six steps to improve the Dark Mode email experience for your subscribers.

1. Optimize your logos and other images for all styles

Add a translucent outline to transparent PNGs with dark text for legibility in email clients where Dark Mode customization is more limited, like Gmail App and Outlook 2019 (Windows).

This will help prevent any issues where the email client might decide to use either the Partial Color Invert or Full Color Invert settings—and make things easier on the eyes for your subscribers. Opting for transparent backgrounds wherever possible will help with this.

You can even have fun with a Dark Mode-optimized logo!

Below is an example of a fake logo I made where I not only added a light drop-shadow behind the text to make it stand out against dark backgrounds, but I also incorporated a starry texture behind it to suit the “NebulaCo” galaxy theme.

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

@media (prefers-color-scheme: dark ) {
  /* 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; }
}

/* Shows Dark Mode-Only Content, Like Images */
[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; }

<!-- start HEADER_LOGO -->
<a rel="noopener" target="_blank" rel="noopener" target="_blank" rel="noopener" target="_blank" href="http://litmus.com/" target="_blank">
 
    <img class="light-img" src="https://campaigns.litmus.com/_email/_global/images/logo_icon-name-black.png" width="163" height="60" alt="Litmus" style="color: #33373E; font-family:'proxima_nova', Helvetica, Arial, sans-serif; text-align:center; font-weight:bold; font-size:36px; line-height:40px; text-decoration: none; margin: 0 auto; padding: 0;" border="0" />
 
    <!-- The following Dark Mode logo image is hidden
    with MSO conditional code and inline CSS, but will be     	
    revealed once Dark Mode is triggered -->
 
    <!--[if !mso]><! --><div class="dark-img" style="display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden;" align="center">
          <img src="https://campaigns.litmus.com/_email/_global/images/logo_icon-name-white.png" width="163" height="60" alt="Litmus" style="color: #ffffff; font-family:'proxima_nova', Helvetica, Arial, sans-serif; text-align:center; font-weight:bold; font-size:36px; line-height:40px; text-decoration: none; margin: 0 auto; padding: 0;" border="0" />
    </div><!--<![endif]-->
 
</a>
<!-- end HEADER_LOGO -->

6. ABT: Always Be Testing!

As we always mention, email clients are constantly changing. Especially with a feature like Dark Mode, tweaks to rendering logic are frequent. The only way to be on top of it all? Test every email with a tool like Litmus.

QA test your Dark Mode emails Did you do it right? Find out with a free trial of Litmus. Preview how your emails look in over 100 email clients, apps, and devices. And ensure your emails are on brand and error-free, every time. START FREE TRIAL

 

Respect user preferences when it comes to Dark Mode

One of the biggest benefits of Dark Mode is its assistance with reducing eye strain for people in low-light conditions or for other personal reasons. But it’s not a matter of Dark Mode vs. Light Mode. It’s a matter of what your subscribers want—whether that’s a dark or a light experience. There’s no right or wrong answer.

So, if your subscribers are making the conscious decision to view emails in Dark Mode, it’s best to respect that. Just like you’d want to add ALT text in case your subscribers prefer to have images off by default, you should build emails that respect darker interfaces, too.

Originally published on November 20, 2019, by Alice Li. Last updated January 17, 2022.

How to design and code for Dark Mode

Below are nine code snippets from the email community to help solve your biggest Dark Mode challenges.

Dark Mode meta tags

Target Android/Outlook.com for Dark Mode

Target Apple/iOS for Dark Mode

Override Dark Mode background colors

Keep white text white in Gmail Dark Mode

Keep text the same color in Outlook’s Dark Mode

Show/hide images for Dark Mode

Fix VML button background colors for Dark Mode

Use off-white/off-dark colors to prevent color changing in Dark Mode

What Dark Mode best practices, tools and resources do your fellow #EmailGeeks rely on to learn more and overcome its challenges?

Check out this ever-growing list of external sources the email community recommends.

Is your favorite Dark Mode tool missing from this list? Let us know on Twitter or hello@litmus.com—we want to make sure this list is valuable to all users, and current.

1. To learn about Dark Mode in ⚡AMP Email

Visit https://dev.to/bdjang/exploring-dark-mode-in-amp-email-5gm7.

Credit: Benjamin Djang

2. Keep your text content as black text on a white background

“One simple thing that works well is to keep your text content as black text on a white background. It does mean some limitations on your design, but there is still plenty of opportunity to get creative around the outside of the text and make things look great.”

Credit to: Mark Robbins

3. Set base styles for Dark Mode, update colors based on design

darkbg { background-color: black !important; } 
.h1 { color: white !important; }
.h2 { color: white !important; }
.button { background-color: white !important; color: black !important; }

The Dark Mode Toolkit

We compiled our favorite Dark Mode resources in our Dark Mode Toolkit. Here’s what you’ll get:

• The Ultimate Guide to Dark Mode Email, our comprehensive guide to everything you need to know about Dark Mode
• A 1-hour recording showing how a Dark Mode email is coded in real time
• Code snippets to help you add Dark Mode support to your existing emails
• And a Dark Mode-ready template to get you started right away

Download The Dark Mode Toolkit and get started or level up your Dark Mode game today.

GET YOUR TOOLKIT