The Dark Mode Problem
About 35% of email clients render in dark mode by default. Without dark mode support, light backgrounds turn dark and light text becomes invisible — creating an unreadable email.
CSS Media Query
Use prefers-color-scheme to switch colors:
@media (prefers-color-scheme: dark) {
body, .email-wrapper {
background-color: #1a1a1a !important;
color: #f0f0f0 !important;
}
.email-header {
background-color: #2d2d2d !important;
}
a { color: #60b4ff !important; }
}
Forcing Dark-Friendly Colors
Some clients (Gmail Android) invert colors automatically. Use color-scheme meta:
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
Logo Handling
White logos disappear on dark backgrounds; black logos disappear in dark mode. Solutions:
| Approach | How |
|---|---|
| Transparent PNG | Works if logo uses mid-tones |
| Dark mode swap | Use <picture> element or CSS content swap |
| Outlined logo | Add a white outline/border on dark mode |
Testing Dark Mode
Test in:
- Apple Mail (macOS/iOS) — most reliable dark mode support
- Outlook 2019+ on Windows — partial support
- Gmail app (Android) — force-inverts, needs testing
- Samsung Mail — aggressive inversion
Use Litmus or Email on Acid to preview across clients before sending.