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

← Back to the glossary