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.
