Dark Mode Email: Your Ultimate How-to Guide


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. Certain email clients will always render your Light Mode designs by default (unless you specifically add code to trigger Dark Mode, which I’ll discuss later). Here’s a list of those clients:

  • Apple Mail
  • iPhone
  • iPad
  • Hey.com

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:

There are a few exceptions though: 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 accidentally leave Dark Mode <meta> tags in your template, Apple Mail / iPhone / iPad will auto-convert any instance of pure white #ffffff to dark gray unless you override it with your custom Dark Mode styles. Or alternatively, you can use an off-white like #fffffe instead.

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.

Litmus light mode email vs. custom dark mode email example

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:

email side-by-side comparison

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) and Outlook 2019 (Windows).

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.

side-by-side email example

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

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!

[data-ogsc]

This is a method first brought to our attention by Mark Robbins to target the Outlook app. 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.

 

#Dark #Mode #Email #Ultimate #Howto #Guide

Leave a Reply