This article is part of a series that answers email questions we often hear from users. Send us any questions you'd like us to answer!
The first email was, likely enough, typed out in green text on a black background, from a CRT terminal connected to a PDP-10 computer. As was every email for years after. That, or orange on black, if you were lucky enough to use a system like PLATO in university. Then slowly white text on black backgrounds took over, until windowed interfaces declared Let there be light.
And so it was until the rise of dark mode in the mid-2010’s.
The ill-fated Windows Phone was early to the game, with a dark interface in 2010, followed by a basic dark mode in desktop Windows six years later. The rest of the industry caught up by the end of the decade, with dark mode showing up in 2018 with macOS Mojave, 2019 with iOS 13 and Android 10—all of which switch nearly every app and bit of UI dark.
It’s jarring to open a light mode website or email message, when everything else is dark. Yet to this day, there is no one perfect way to make a dark mode email theme. We’re left with workarounds to approximate the dark theme you want—and little more than the certainty that your email is bound to look slightly different, depending on your readers’ device, email app, and light/dark mode setting.
The good news is that you can guarantee your email will look dark or light, appropriately, on almost all devices and email apps. What you can’t do is guarantee that it’ll look the exact same everywhere.
How to build emails that include both dark and light themes.
The official, default way to add dark mode to an email template is with @media (prefers-color-scheme) CSS. That’s supported by 41.86% of email clients, according to the invaluable resource Can I email, which lists support by Apple Mail, Outlook.com and the iOS and macOS versions of Outlook, Fastmail, and more. Since Litmus estimates that nearly 65% of email opens comes from Apple Mail, that alone makes it worth building out a dark theme for your emails.
For the apps that do support it, building a dark email theme is similar to building a dark website theme. You define your light theme in the standard CSS theme, then add the CSS for a dark theme under the @media (prefers-color-scheme: dark) section like this:
You can continue, in a similar way, to include a light and a dark logo (PNG, of course, not SVG), with CSS rules to hide the light logo when dark mode is enabled and vice versa, and generally build fully customized light and dark themes that look exactly the way you want. You can hand-code your theme, or can get an LLM to code it for you; both Cursor and ChatGPT are adept at quickly retheming emails, especially if you already have an email template you want and tell them exactly which colors you want to change in dark mode. I was pleasantly surprised how easy it was to get a fully customized light and dark mode looking exactly like I wanted.
Those emails will render correctly in Apple Mail on iOS, iPadOS, and macOS (and, one could assume, Vision Pro). They’ll render equally well in Outlook.com, Outlook’s Mac and iOS apps, and in Thunderbird Mobile. And according to Can I email, they should also look great in Samsung Email, Fastmail, and a handful of other apps (as they should in many third-party iOS email apps, which internally use the same Webkit-powered rendering engine used by Apple Mail).
The only time Apple Mail changes how emails look is if they use pure white (#ffffff) backgrounds with pure black (#000000) text or are plain text, non-formatted emails. Then it’ll invert the colors for a quick dark mode fix. Use customized colors, though, and your email will render as expected (and if it’s sent with only a single CSS theme, it’ll always render in your preset colors, regardless of if the reader has dark or light mode enabled).
Some apps play by the rules. Others invert everything.
But perhaps it’s more notable which apps don’t support @media (prefers-color-scheme): Gmail, Outlook on Windows, Yahoo! Mail, and Thunderbird among others. Based on Litmus market share estimates, that means that around 33.4% of people won’t be able to see your email’s dark theme. The good news is that many of those people will still see your email in a dark theme; the bad news is, you have little control over said dark theme.
Gmail’s desktop web app, most notably, does not support dark or light mode switching at all. Every email in Gmail.com will render in its default color, and plain-text emails will come through with a white background and black text, even if you have a dark Gmail theme enabled. Yahoo! Mail’s web app behaves similarly.
Gmail on mobile does support dark mode, but in its own way: It inverts the colors of the email to look dark. Send an HTML email with a light-grey background and an off-white body section, and in dark mode it’ll render a dark-grey background and a somewhat creamy-dark body section. What it won’t do is read your prefers-color-scheme CSS; any dark mode colors or image substitutions you set there will be ignored. There’s no official documentation on how Gmail’s inverted colors are calculated, either, so you’ll have to send your light mode email to Gmail, open it on mobile, and see how it looks to confirm.
There is one Gmail dark mode workaround that almost works, if you’d rather ignore light mode altogether: Just design your email’s CSS in dark mode by default, without any substitutions, and Gmail should render it correctly. Mostly, that is. Our dark themed email’s background colors looked correct, but Gmail decided to darken our text enough that it was difficult to read—and rendered the correct, original text color only upon switching back to light mode. Even with a dark mode, you can’t fully trust that Gmail mobile in dark mode will render your email colors as intended.
Thunderbird on desktop, similarly, does not support @media (prefers-color-scheme) and has its own dark mode implementation. In our tests, that meant it turned dark text light and showed a dark background behind emails—but did not use the dark background color that we’d set. It does, however, have an optional toggle so you can see how an email was supposed to look in light mode, if you have dark mode enabled and receive an email that looks a bit off.
Or, just use plain text.
There is one dark mode hack that works everywhere with the sole exception of Gmail.com in a desktop browser: Plain text emails. If you type up and send a new email from Apple Mail, Outlook, Gmail, or most other email apps, it’ll render with a white background and dark text by default, but with a dark background and light text on almost every email app.
That works with email newsletters, too. In Buttondown, for instance, our Classic theme typically follows your device’s dark or light mode in most email apps. Our Modern theme, though, with its more customized CSS design, renders light in most email apps including Apple Mail, but shows up dark in Gmail on mobile with its automated color inversion.
Should you add a dark mode to your emails?
If you really care about how your emails look and want a branded dark and light reading experience for most of your readers, it’s worth taking the time to add a secondary dark theme to your email newsletter’s template CSS.
Just always remember to not use pure black and white in email themes as those colors are most likely to be substituted, and to ensure your logo and other images with transparent backgrounds are readable on both light and dark background colors. Preview the email in as many apps as possible. And if your theme looks good in a browser, it’ll look essentially the same in Apple Mail and other supported apps.
But it is somewhat like web fonts in email: You can use them, but only if you include a fallback font and are ok with things not looking perfectly the same everywhere.
That, or you could stick to a plain text email template. It won’t include your preferred style, but it will look like what your readers expect, every time, no matter which device and email app they’re using to read.
Because at the end of the day, what matters most is the folks reading your writing—and ensuring you’re not searing their retinas, or sending them something so dark they can barely make out what it says.
| Image | Credit |
|---|---|
| Header image | Paul Green via Unsplash |