Dark mode email design is the practice of building an HTML email that stays legible when the recipient's email client inverts or recolours it. The difficulty is that there is no single dark mode: Apple Mail, Gmail and Outlook each apply a different transformation to the same HTML, and two of them will change colours you never asked them to change.
If you have ever sent an email where your black logo became invisible on a black background, or your carefully chosen brand blue turned into a muddy grey, that is what happened.
The three behaviours you are designing for
Email clients fall into three groups, and knowing which is which explains almost every rendering surprise.
No change. The client renders your HTML as written, even in dark mode. Apple Mail on macOS and iOS behaves this way when you supply explicit colours, as does Outlook for Mac. These are the easy ones: what you build is what they see.
Partial inversion. The client swaps colours it thinks are backgrounds and text, but leaves anything it considers deliberate alone. Apple Mail does this when your email has no explicit background colour. The result is usually acceptable and occasionally strange.
Full inversion. The client forcibly recolours everything, including colours you set explicitly. Outlook.com and the Windows Outlook apps do this, and Gmail's mobile apps do a version of it. This is where designs break, because your #FFFFFF background becomes dark and your #111111 text becomes light whether you wanted that or not.
The rules that hold up
Never use pure black or pure white. #000000 text on #FFFFFF is the pairing most likely to be aggressively inverted, and pure black logos become invisible against inverted dark backgrounds. Use #1A1A1A and #FAFAFA instead. The visual difference is imperceptible; the behavioural difference is large.
Give every image a background it can survive on. A PNG logo with a transparent background and dark artwork disappears on dark. The fix is either a light padded area baked into the image, or a version of the logo with a subtle outline. Do not rely on the email's background colour to provide contrast, because that is the thing being changed.
Set colours explicitly, everywhere. Every table cell, every paragraph, every link. Colours you leave to inherit are the ones clients feel free to reassign. This is tedious and it is also the single highest-impact habit.
Declare dark mode support. Two lines in the head tell supporting clients that you have handled it yourself and they should stop helping:
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
Apple Mail and a few others honour this and back off their automatic inversion. Outlook.com ignores it entirely, which is why the rules above matter more than the media query below.
Then add the media query for the clients that respect it.
@media (prefers-color-scheme: dark) {
.body-bg { background-color: #1A1A1A !important; }
.body-text { color: #FAFAFA !important; }
.logo-light { display: none !important; }
.logo-dark { display: block !important; }
}
Swapping between a light and a dark logo variant with display is the standard technique, and it works everywhere the media query is supported. Where it is not supported, the light logo shows, which is why that logo needs to survive on its own.
Buttons and links
Bulletproof buttons — the table-based kind rather than an image — are the right choice here for the same reason they are elsewhere: a table cell with a background colour and a text colour is two explicit values, and explicit values are the ones that survive. An image button is a single asset that a client may or may not display at all, which is the separate problem covered in email image blocking.
Links inherit browser defaults more aggressively than any other element. Set the colour on the anchor itself, not on a parent, and pick something with enough contrast to work against both a light and a dark background. Mid-tone brand colours do this well; pale tints do not.
Testing without guessing
You cannot eyeball this. The minimum viable test set is Apple Mail on iOS in dark mode, Gmail's Android app in dark mode, and Outlook.com in dark mode, because those three cover the three behaviours. Send yourself a real campaign rather than a preview — previews render in a browser and skip the client transformations entirely, which is exactly the thing you are trying to observe.
Add these to your standard pre-send testing checklist rather than treating dark mode as a special occasion, because roughly a third of opens now happen in it and that share is still rising.
Accessibility overlaps with this
Contrast ratios that pass in light mode can fail after inversion, particularly for grey secondary text. If your body copy sits at 4.5:1 against white, the inverted version is not guaranteed to sit at 4.5:1 against the client's chosen dark background — because you do not choose that background. Building with slightly more contrast than the minimum gives you headroom. There is more on this in email accessibility.
Frequently asked questions
How many people read email in dark mode?
Estimates vary by audience and by how you count, but a third to a half of opens is the range most senders see, with mobile skewing higher because iOS and Android both default to following the system setting. If your list is consumer and mobile-heavy, assume the majority.
Why does my logo disappear in dark mode?
Almost always because it is dark artwork on a transparent background. The client inverts the surrounding background to dark, the transparent area lets the dark through, and dark-on-dark is invisible. Supply a light-mode and dark-mode logo and swap them with a media query, and make sure the light-mode version can survive on its own for clients that ignore the query.
Does Outlook support the prefers-color-scheme media query?
The Windows desktop apps and Outlook.com do not respect it in a way you can rely on — they apply their own inversion regardless. Outlook for Mac behaves better. Design so that a fully inverted version of your email is still readable, and treat the media query as an enhancement for the clients that honour it.
Should I just build a dark email so it works everywhere?
No. A dark email gets inverted to light by the same clients, so you have moved the problem rather than solved it. Build light, avoid pure black and white, set every colour explicitly, and supply the dark variants through the media query.