Guide on Dark Mode in Email

What Is Dark Mode in Email?
Valeriia Dziubenko Valeriia Dziubenko 08 september 2022, 11:50 0
For beginners

Having caused quite a stir in the tech industry, especially in UI/UX departments across companies, dark mode has finally made its way to email.

Tech industry heavyweights like Apple and Gmail support Dark Mode, and it's no secret that it has become the default inbox appearance for most email users. As a result, ensuring that emails look great in this new reading environment has become a new challenge email marketers have to overcome.

In this article, we will discuss:

  • What is dark mode, and why do people use it?
  • How does dark mode impact email design?
  • Which email clients support dark mode?
  • Dark mode coding tips.

What is Dark Mode?

The dark mode is a darker color scheme for low-light or nighttime environments. It's a reversed color scheme that uses light-colored typography, UI elements, and iconography on dark backgrounds. Popular OS and apps like iOS, Android, Twitter, Slack, or Facebook Messenger now allow users to switch to this mode when using their platforms.

With the growing popularity of dark mode, it's no surprise that it's making its way to the inbox. The image below shows you how the light and dark email modes look.

What is Dark Mode?

Many users prefer dark mode for the following reasons:

  • It lessens the strain on the eyes. Using light text on a dark background significantly reduces eye strain in low-light situations.
  • It reduces screen brightness, which conserves battery life.
  • It can improve content legibility and make content consumption easier for some users on desktops and mobile.
  • They may prefer darker user interfaces.

How Does Dark Mode Impact Email Deliverability?

Dark mode can significantly impact deliverability for one primary reason: email users are a fickle bunch. Many email clients do not automatically optimize image email features (logos, pictures, etc.) for dark mode, which can make your emails look cluttered and difficult to read.

Most dark mode subscribers will not take the time to figure out how to read your ugly emails. What's the point? Instead, they will ignore them, delete them, or mark them as spam, reducing your deliverability in the long run.

On the other hand, if you take the time to ensure that your emails look good even in the dark, they are much more likely to be read and positively engaged. Also, remember that good email practices and engagement metrics result in good deliverability.

How Users See Dark Mode

Email clients use two types of dark mode color schemes:

  1. Partial color change: the email client converts light background colors to dark and lightens dark text. Dark backgrounds with light text keep their original appearance. Email clients using this color scheme have a custom dark mode setting.
  2. Complete color change: ​​the email client changes the light background color to a dark one and the dark background with a light text color to a light background with the dark text color. Email clients that use this color scheme do not support custom dark mode settings.

It may be easier for us to list which email clients do not have a dark mode interface. However, for your convenience, here are the top email clients that offer dark mode email settings:

  • Gmail (via Android, iOS mobile, and web browser);
  • Outlook.com (web browser, Mac, Windows, Android, and iOS mobile);
  • Apple Mail platforms (Desktop, iPhone, and iPad);
  • Yahoo (via web browser, Android, and iOS).

The majority of your email subscribers will use at least one of these providers. The problem is that each of these clients renders dark mode emails differently. Some automatically invert colors, while others do not. Some will support @media (prefers-color-scheme), while others (including Gmail) won’t. As a result, when sending emails, ensure they look good both in Light and Dark mode.

Let's look at how dark mode can affect your deliverability and how you can make your emails appear great in any mode.

How Can You Make Your Emails More Suitable for Dark Mode?

What simple changes can you make to your email design to optimize it for dark mode? Optimizing your emails for dark mode isn't too difficult. Here are some design tips for turning light emails dark and vice versa.

  • Use Images With Transparent Backgrounds

When you use transparent PNGs for your images, the background color change in dark mode appears seamless. Whatever color the background changes to will be reflected in the image's background. Email designers should use transparent png images in their emails as a best practice.

  • Use White Borders Around Dark Design Elements

Keep an eye out for black text and icons. Dark mode emails can make black text, icons, logos, and other elements invisible against dark backgrounds. While some graphic designers are not comfortable with the thought of putting white strokes around text and icons, it's an effective way to make your emails readable. The white border is not visible in light mode, but it makes things stand out in dark mode.

Use White Borders Around Dark Design Elements

How Do Email Clients Support Dark Mode?

The biggest issue with dark mode for email is the numerous variations in how clients like Gmail, Apple Mail, and Outlook render emails.

Some email clients automatically invert colors, some don't. Others only change colors when certain conditions are met. Some clients do not support media queries for dark and light color schemes. Here's how it works:

Email Client Auto inverts colors? Note
Apple Mail
(iPhone/iPad)
Yes Automatically inverts colors when the background is transparent or white (#fffff)
Apple Mail
(macOS)
Yes Automatically inverts colors when the background is transparent or white (#fffff)
Gmail
(webmail)
No Does not support the query @media (prefers-color-scheme)
Gmail
(Android)
Yes
(when not already dark)
Does not support the query @media (prefers-color-scheme)
Outlook
(iOS)
Partially It might darken the background color.
Outlook
(macOS)
Partially The only Outlook option supporting @media (prefers-color-scheme).
It might darken the background color
Outlook
(Windows)
Yes Consistently auto-inverts colors
Outlook.com
(webmail)
Partially Does image swap.
It might darken the background color
AOL
(webmail)
No Dark mode user interface unavailable
Yahoo!
(webmail)
No Dark mode user interface unavailable

Dark Mode Coding Tips

Email rendering is a developer's worst nightmare. And, of course, dark mode is no exception. Each client renders dark mode emails differently, so creating an email that looks the same across all providers is difficult.

In addition to the universal design recommendations, there are a few coding fixes you can use to create a personalized dark mode experience for your emails.

Use Meta Tags and Root Selector to Enable Dark Mode

To tell the email client that your email supports both light and dark mode, use the appropriate meta tags in thesection. If your user has this setting enabled in their email app, the following meta tags will ensure that dark mode is in effect:

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

The :root selector enables the email client to search for the color scheme style it requires without having to read through all of the styles.

  1. <style type="text/css">
  2. :root {
  3.   color-scheme: light dark;
  4.   supported-color-schemes: light dark;
  5. }
  6. </style>

Add Dark Mode to Styles Using Media Query

You can use custom CSS styles to control how different elements, such as logos, font color, background, and link text, appear in dark mode. To personalize these elements with your brand's preferred color values, add the following media query to your <style> block:

  1. @media (prefers-color-scheme: dark ) {
  2.    /* Shows dark mode logo */
  3. .dark-logo-wrapper,.dark-logo {
  4.        display: block !important;
  5. }
  6.    /* Hides light mode logo */
  7.        .light-logo {
  8.          display: none !important;
  9. }
  10.  
  11.    /* Creates a custom dark mode background color */
  12.   .body {
  13.     background-color: #282828 !important;
  14.     color: #ffffff  !important;
  15. }
  16.  
  17.  /* Sets the font color */
  18.   h1, h2, h3, p, td {
  19.     color: #ffffff !important;
  20. }
  21.  
  22. /* Sets the text link color */  
  23.   a { 
  24. color: #43D6B7 !important;
  25. }
  26.  
  27. /* More styles here */  
  28. }

Add this to your email's <style> section to create custom dark modes for iOS, Apple Mail, and some versions of Outlook.

Add the Appropriate Classes and Styles to Your Dark Mode Elements

If you have light and dark versions of certain elements, such as images, you must ensure that the styles you've created for both dark and light modes appear exactly when they should.

This is essential if you have a light and dark version of your logo and want to switch between them depending on whether or not the recipient is using dark mode.

Here is an example of how this would appear in your HTML:

  1. <!-- start HEADER_LOGO -->
  2. <a href="https://yoursite.com/" target="_blank">
  3.  
  4. <img src="https://www.yoursite.com/images/logo-light.png" class="light-logo" />
  5.  
  6. <!-- Hide the dark logo in Outlook and Win 10 Mail, will be revealed if dark mode is triggered -->
  7. <div class="dark-logo-wrapper" style="mso-hide: all; display: none;">
  8.    <img src="https://www.yoursite.com/images/logo-dark.png" class="dark-logo" style="display: none;" />
  9. </div> 
  10.  
  11. </a>
  12. <!-- end HEADER_LOGO -->

Not all of these fixes will work across all clients, and regardless of how hard you try, your dark mode emails may look slightly different across different apps and providers. Be sure to test your email rendering before sending.

Wrapping Up

Since its inception, email dark mode has grown in popularity. If you want engagement and deliverability scores to remain healthy, you should prepare to optimize your emails for different display modes.

Here are a few things to keep in mind while sending in dark mode:

  • Select images and logos that will pop in both light and dark modes.
  • When possible, use images with transparency.
  • Add a white border to make dark fonts, logos, and images stand out.
  • Consider sending plain-text emails if they fit your contacts well.
  • Most importantly, you should test your emails before sending them.

Make sure you test your emails on your list's most popular email clients. You can do this manually or with email testing software such as Litmus or Email on Acid. Let's be honest: it might give you a headache and get messy, but the dark mode isn't going away. Email dark mode has advantages in terms of deliverability and accessibility, so it's time to embrace it.