Channel & craft
Dark mode email
Also known as: dark-mode email design
The practice of designing email templates to render correctly when the recipient's client is in dark mode — inverted colour palettes, logo variants that don't disappear on dark backgrounds, and colour-scheme-aware CSS.
Dark mode emails are an increasing default — Apple Mail, Outlook, Gmail (mobile), and most modern clients switch to dark backgrounds by default if the OS theme is dark. Badly-designed emails in dark mode produce illegible text, disappearing logos (a black logo on what was white becomes invisible), and broken colour palettes. Design practices for dark-mode safety: prefer SVG logos over PNGs (SVG can respond to colour-scheme CSS; PNG can't), design templates with inverted colour testing as a step in QA, use `@media (prefers-color-scheme: dark)` CSS to set dark-mode-specific styles (supported in Apple Mail and some Outlook clients), and avoid pure-black or pure-white backgrounds in source design since clients may auto-invert them unpredictably. Testing via Litmus or Email on Acid across 15+ dark-mode clients before send is the operator standard.
Try the tool
Read next
Email dark mode: the four render modes and how to not break any of them
Dark mode in email is four different render behaviours across major clients, each with its own logic. Design without knowing which mode you're hitting and roughly half your audience sees something you never approved. Here's what each client does and the defensive rules that survive all of them.
Email accessibility: the seven rules that make your emails readable by everyone
Roughly fifteen percent of your audience opens your email with a screen reader, on a cracked phone in direct sunlight, or with images blocked at the corporate gateway. Most programs accidentally design around them. Seven rules — most of them cheap, all of them learnable in an afternoon — close the gap.