vocab.design

pattern · email · theming

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 wantsay
a mail whose colours the client may invertdark mode email
the dark counterpart of a palette, not an inversion of itdark mode
the OS is imposing its own palette on your interfaceforced colors mode

Related

See also: Bulletproof button

Sources