Mobile-First Email Principles
Build emails that render beautifully on smartphones first, then scale up to desktop.
Dark Mode Email Design
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.
Related Articles
Bulletproof CTA Buttons for Outlook
Create CTA buttons that render in every email client including Outlook, using VML and hybrid CSS.
Dedicated vs Shared IP Address
Choosing between a dedicated and shared IP affects your sender reputation and warmup requirements. This guide compares both options with clear recommendations.
More in Email Design & Content
View all →Bulletproof CTA Buttons for Outlook
Create CTA buttons that render in every email client including Outlook, using VML and hybrid CSS.
Mobile-First Email Principles
Build emails that render beautifully on smartphones first, then scale up to desktop.
Ready to start sending?
AcelleMail is the self-hosted email marketing platform you control end-to-end.
View Pricing