Dark Mode Email Design: How to Look Good Everywhere
How each client inverts your colours, why logos disappear, and the two fixes that work without breaking light mode.
On this page
The short version
- Three different behaviours, not one. Some clients leave your colours alone, some invert only what they judge to be background, and some invert everything including your images.
- Transparent PNG logos in dark text are the most common visible failure — the logo becomes black on near-black and disappears entirely.
- The reliable fix is not clever CSS. It is choosing colours and assets that survive inversion, because the clients that ignore your dark-mode CSS are the ones causing the problem.
Dark mode in email is three separate problems wearing one name. Understanding which client does what is most of the work, because the fixes are different and a fix aimed at the wrong behaviour does nothing.
The unifying point is that you are not in control. Some clients rewrite your colours whether or not you asked, and no amount of CSS reliably prevents it. Design so that inversion is survivable rather than trying to forbid it.
The three behaviours
| Behaviour | What happens | What you can do |
|---|---|---|
| No change | Your palette renders as designed | Nothing needed |
| Partial inversion | Light backgrounds darken, dark text lightens; your set colours often survive | Set colours explicitly on everything |
| Full inversion | Almost everything flips, including images | Design assets that work either way |
Full inversion is the one that produces the reports of "our email looks broken", because it can turn a carefully chosen brand colour into its complement.
The disappearing logo
This is the failure people actually notice. A logo saved as a transparent PNG in a dark colour sits invisibly on a dark background — the transparency means there is no white panel behind it, and the dark artwork merges into the dark surface.
It has three fixes and one of them is much better than the others. Adding a solid light background to the image works and looks like a sticker. Swapping the asset with a dark-mode media query works where the query is honoured and fails silently elsewhere. Adding a light stroke or padding baked into the artwork works everywhere, because it does not depend on the client doing anything.
The third option is unfashionable and reliable, which describes most email design decisions.
Two approaches to the same logo
Media-query swap
Correct where honoured
- Looks ideal in clients that support it
- Fails silently where the query is ignored
- Two assets to keep in sync
- The failure mode is total invisibility
One asset that works either way
Slightly compromised, never broken
- A light outline or padded field baked into the artwork
- Renders on any background
- One asset
- The failure mode is looking slightly less refined
Colours that survive inversion
Mid-tone colours are safest, because inverting a mid-tone produces another mid-tone rather than flipping between extremes. A brand palette built on very light tints and very dark shades has the furthest to travel and the most to lose.
Where you use a brand colour on a button, check the contrast of the label against both the colour and its inversion. A button that reads white-on-purple in light mode and white-on-pale-yellow in dark mode has lost its label.
Borders are the quiet helper here. A one-pixel border around a content panel keeps the panel legible as a shape no matter which way the background goes, and costs nothing in light mode.
Testing it honestly
Preview tools cover the major clients and are worth using, but the check that finds real problems is opening a test on your own phone with the system set to dark. That is the configuration a large share of your list is in.
Look specifically at four things: the logo, any button, any panel with a background colour, and the footer. Those are where the failures concentrate, and three of the four are template-level rather than per-send — meaning one afternoon fixes them for every future email.
Dark mode check
- Logo remains visible on a dark background, without relying on a media query
- Text and background colours are set explicitly, not inherited
- Near-black and near-white rather than pure values
- Button labels remain legible against the inverted button colour
- Content panels carry a border so they survive as shapes
- Checked on a real phone with the system in dark mode
Frequently asked questions
Can I force clients to ignore dark mode?
Some respond to a colour-scheme meta declaration, several do not, and the ones causing the worst failures are generally in the second group. Treat it as a hint rather than a control.
Should we design a dedicated dark version?
Rarely worth it. You cannot reliably target it, so you would be maintaining a second template that some readers never see and others see instead of the one you tested.
Do dark mode failures affect deliverability?
Not directly. They affect whether the email is usable, and an unreadable email produces no clicks and eventually more unsubscribes, which does reach deliverability by the slow route.