Dark mode email
also called email dark mode (community), dark mode for email (litmus)
Designing a mail for clients that will invert its palette without asking, where a near-black behaves better than black and a logo needs a ground it survives on.
On the web, dark mode is a preference the page answers. In a mail it is something done to you.
The client reads the reader’s system setting and repaints your document, and the three behaviours
it might pick are all out of your hands: honour prefers-color-scheme and let you supply a
second palette, invert the document partly (grounds flipped, some declared fills kept), or
invert it wholesale. There is no reliable opt-out and no way to detect which client is doing
which, so the work is defensive rather than expressive. Litmus
reports that well over a quarter of opens now happen in dark mode, which makes this the single
rendering condition most likely to be the one your reader actually sees.
The failure everybody ships once is a grey. Partial inversion flips the ground under your copy
and leaves a colour it does not recognise as a pure value alone, so #3A3A3A body text that
looked considered on white sits on near-black and cannot be read at all. The two values at the
extremes have the opposite problem: several clients key their flip on exact #FFFFFF and
#000000, so writing #FEFEFE and #0E0E0E instead leaves those surfaces untouched, and text
in a near-black keeps the ground you gave it. Mid-tones are the safest fills of all, because a
colour already halfway up the scale is still halfway up it after a lightness inversion.
The other casualty is the logo, and it fails silently. A transparent PNG of a dark wordmark has no ground of its own, so it is invisible the moment the client darkens what is behind it, and no inversion algorithm will recolour the pixels of an image. The fix is to give the mark a ground it survives on: a plate of your brand colour behind it, or a stroke around it, or a version of the file with the background baked in. The same reasoning applies to anything else whose colour is locked into pixels rather than declared in markup, which in most mails means the whole hero image.
Two neighbours are worth keeping apart. Dark mode proper is the palette a product derives and ships on purpose, where the interesting question is whether the dark values were rebalanced or merely flipped. Forced colors mode is a reader’s contrast theme overriding your palette by design, and the honest response there is to stop fighting it. Dark mode in mail is neither: nobody chose your dark palette, the substitution is not documented, and the only thing you control is how much of the design still works after it happens.
Which word?
| If you want | say |
|---|---|
| a mail whose colours the client may invert | dark mode email |
| the dark counterpart of a palette, not an inversion of it | dark mode |
| the OS is imposing its own palette on your interface | forced colors mode |
Related
See also: Bulletproof button