Dark Mode Email Design: A Complete Guide
Design emails that respect user preferences and look great in dark environments.
Dark mode has become the default for many users. Apple Mail, Gmail, Outlook, and most mobile clients now support dark mode. But each handles it differently, creating a complex design challenge.
This guide explains how email clients apply dark mode, techniques for controlling the experience, and testing strategies to ensure your emails look good in both light and dark environments.
How Email Clients Handle Dark Mode
Email clients use different approaches to dark mode:
1. No Change (User Controls)
Some clients (older Gmail web, some Outlook versions) do not modify email colors. Your design appears as intended regardless of client theme.
2. Partial Color Inversion
Clients like Apple Mail and iOS Mail intelligently invert colors. Light backgrounds become dark. Dark text becomes light. The client tries to maintain readability.
3. Full Color Inversion
Some clients invert all colors aggressively. This can cause issues with images, logos, and carefully designed color schemes.
4. CSS Media Query Support
The best scenario: clients that support prefers-color-scheme media queries. You can provide explicit dark mode styles.
The Media Query Approach
Where supported, prefers-color-scheme lets you define dark mode styles:
<style>
@media (prefers-color-scheme: dark) {
.body-bg {
background-color: #1a1a1a !important;
}
.text-primary {
color: #ffffff !important;
}
.text-secondary {
color: #b3b3b3 !important;
}
.card {
background-color: #2d2d2d !important;
}
}
</style>Support as of 2026:
- Apple Mail (macOS/iOS): Full support
- Outlook (macOS): Full support
- Gmail App (iOS): Partial support
- Outlook App: Limited support
- Gmail (web): No support (uses own algorithm)
Color Scheme Meta Tag
Hint to clients that your email supports dark mode:
<head>
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<style>
:root {
color-scheme: light dark;
supported-color-schemes: light dark;
}
</style>
</head>This tells clients you have provided dark mode styles. Some clients use this to decide whether to apply their own color changes.
Designing for Automatic Inversion
Since you cannot control all clients, design with automatic inversion in mind:
Avoid Pure White (#ffffff)
Pure white backgrounds may invert to pure black, which can be harsh. Use slightly off-white (#f5f5f5) for main backgrounds.
Avoid Pure Black (#000000) Text
Pure black text may invert to pure white. Use dark gray (#333333) instead. It inverts to a softer light gray.
Use Transparent PNG Logos
Logos with transparent backgrounds adapt better. If your logo is dark, consider providing a light version for dark mode:
<style>
@media (prefers-color-scheme: dark) {
.logo-light {
display: none !important;
}
.logo-dark {
display: block !important;
}
}
</style>
<img class="logo-light" src="logo-dark.png" alt="Logo">
<img class="logo-dark" src="logo-light.png" alt="Logo" style="display: none;">Add Padding/Border to Images
Images with transparent backgrounds can disappear against dark backgrounds. Add subtle borders or backgrounds:
<img src="icon.png"
style="background-color: #ffffff; padding: 8px; border-radius: 4px;"
alt="Icon">Button Design for Dark Mode
Buttons need to work in both modes:
<!-- Use mid-range colors that work in both modes -->
<table role="presentation">
<tr>
<td style="background-color: #007bff; border-radius: 4px;">
<a href="..."
style="color: #ffffff; padding: 12px 24px; display: block; text-decoration: none;">
Primary Button
</a>
</td>
</tr>
</table>Avoid very light button backgrounds (they may invert to dark with dark text). Mid-range brand colors typically work in both modes.
Testing Dark Mode
Manual Testing
Test in actual dark mode:
- Enable dark mode on your device
- Send test emails to multiple accounts
- Check in Apple Mail, Gmail, Outlook
- Test both mobile and desktop
Automated Testing
Litmus and Email on Acid include dark mode previews. See how your email renders across clients in both light and dark modes.
Dark Mode in Email Builders
Some email builders handle dark mode automatically. Sequenzy and similar platforms generate emails with dark mode considerations. The templates are tested in both modes.
If you are using a framework like MJML, you will need to add dark mode styles manually. The framework compiles your markup but does not add prefers-color-scheme queries automatically.
Practical Strategy
Given the complexity, here is a practical approach:
- Design for light mode first with colors that invert reasonably
- Avoid extremes (pure white, pure black)
- Add media queries for clients that support them
- Use the meta tags to signal dark mode support
- Test in major clients and accept that some variation is unavoidable
When to Ignore Dark Mode
Not every email needs perfect dark mode support. Transactional emails (receipts, password resets) matter more than promotional campaigns. Focus effort where it has the most impact.
Some brand-heavy designs may look better forcing light mode. This is a valid choice if your brand identity depends on specific color combinations.
The Bottom Line
Dark mode in email is a moving target. Client behavior varies and continues to evolve. Design with flexibility in mind, test across clients, and accept that some variation is inevitable.
The safest approach: use colors that work reasonably when inverted, add media queries for fine control where supported, and test before sending. Tools like Sequenzy with built-in dark mode considerations reduce the manual work.