Over 80% of email users have dark mode enabled on at least one device. If you're not designing for dark mode, your carefully crafted emails might look terrible for the majority of your subscribers.
How Email Clients Handle Dark Mode
Email clients use three different approaches to dark mode:
1. No Color Changes (User's Original Design)
Some clients respect your design completely:
- Apple Mail (with
color-schememeta) - Outlook.com (partial)
2. Partial Color Inversion
These clients invert some colors while trying to preserve your design:
- Gmail (mobile app)
- Outlook 365 (Windows)
3. Full Color Inversion
These aggressively invert everything:
- Outlook 2019+ (Windows, aggressive mode)
- Windows Mail
The Color-Scheme Meta Tag
The most important dark mode tool is the color-scheme meta tag:
<head>
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
</head>This tells email clients that your email supports both light and dark modes, helping them make better rendering decisions.
CSS Media Query for Dark Mode
Use the prefers-color-scheme media query to provide dark mode styles:
<style>
/* Light mode (default) */
.email-body {
background-color: #ffffff;
color: #333333;
}
/* Dark mode */
@media (prefers-color-scheme: dark) {
.email-body {
background-color: #1a1a1a !important;
color: #f5f5f5 !important;
}
.header-image {
/* Swap to dark mode version */
content: url('logo-dark.png');
}
}
</style>Warning: Gmail strips <style> blocks in the mobile app, so always inline critical styles as fallbacks.
6 Dark Mode Design Best Practices
1. Avoid Pure Black and White
Pure black (#000000) and pure white (#FFFFFF) invert dramatically and create harsh contrast. Use near-black and near-white instead:
/* Instead of */
background-color: #000000;
color: #ffffff;
/* Use */
background-color: #1a1a1a;
color: #f0f0f0;2. Add Background Colors to Transparent Images
Transparent PNGs on a light background look great—until dark mode inverts the background. Solutions:
<!-- Option 1: Add padding/glow in the image itself -->
<!-- Export logo with subtle white outline -->
<!-- Option 2: Add background color to container -->
<td style="background-color: #ffffff; border-radius: 8px; padding: 10px;">
<img src="logo.png" />
</td>
<!-- Option 3: Use different images for dark mode -->
<style>
@media (prefers-color-scheme: dark) {
.logo { content: url('logo-dark.png'); }
}
</style>3. Test Icon Visibility
Social media icons and UI elements often disappear in dark mode if they're dark-colored. Use:
- White or light-colored icons on dark backgrounds
- Icons with visible borders/outlines
- Different icon versions for dark mode
4. Consider Gradient Backgrounds
Solid colors can look flat in dark mode. Subtle gradients add depth:
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);5. Increase Border Visibility
Light borders on light backgrounds may disappear. Use darker borders or increase opacity:
/* Light mode */
border: 1px solid #e0e0e0;
/* Dark mode */
@media (prefers-color-scheme: dark) {
border: 1px solid #444444 !important;
}6. Test Button Readability
Your carefully designed buttons might invert to unreadable combinations:
/* Original: Purple button with white text */
background-color: #7C3AED;
color: #ffffff;
/* Inverted: Could become light purple with dark text - hard to read */
/* Solution: Use !important in dark mode */
@media (prefers-color-scheme: dark) {
.btn {
background-color: #9F67FF !important; /* Lighter purple */
color: #ffffff !important; /* Force white text */
}
}Testing Dark Mode Emails
Mailglass Lite includes a dark mode preview toggle that simulates how email clients render your email in dark mode. It also validates for common dark mode issues:
- Pure black/white color detection
- Missing color-scheme meta tag
- Transparent image warnings
- Dark-on-dark text detection
Quick Dark Mode Checklist
- ☐ Add
color-schememeta tag to <head> - ☐ Replace #000000 with #1a1a1a
- ☐ Replace #FFFFFF with #f0f0f0
- ☐ Add backgrounds to transparent images
- ☐ Test all icons and logos
- ☐ Verify button text readability
- ☐ Check border visibility
- ☐ Test in multiple email clients
Email Client Dark Mode Support
| Client | Dark Mode Support | Media Query |
|---|---|---|
| Apple Mail | Full | Yes |
| iOS Mail | Full | Yes |
| Gmail (Web) | Partial | No |
| Gmail (Mobile) | Partial (inverts) | No |
| Outlook.com | Partial | Yes |
| Outlook 365 | Partial | Limited |
| Outlook 2019+ | Full inversion | No |
| Yahoo Mail | Partial | No |
Key Takeaways
- Add the color-scheme meta tag to every email
- Avoid pure black (#000) and pure white (#FFF)
- Handle transparent images with backgrounds or alternate versions
- Test in dark mode before every send
- Use !important to override client inversion where needed
Ready to test your emails in dark mode? Try Mailglass Lite for free dark mode preview and validation.