Dark Mode Email Design: How to Support It Without Breaking Outlook
Dark mode is the default system setting for a growing share of your subscribers. Apple Mail, iOS Mail, macOS Mail, and Outlook 2019+ all apply dark mode rendering to HTML emails. If you haven't accounted for it, your carefully designed emails may arrive with inverted colors, white backgrounds turned black, or logos with halos.
This guide covers what actually happens to your email in dark mode across different clients, and the practical patterns to handle it — without breaking the clients that don't support dark mode.
How email clients handle dark mode
Email clients have three different behaviors:
Full inversion (avoid) The client inverts all colors automatically: white backgrounds go black, black text goes white. Images are inverted too. This is what older Outlook versions on Windows can do if you don't declare color-scheme support.
Partial inversion The client inverts background colors but tries to preserve text and image colors. Gmail on Android does this — it changes light backgrounds to dark but leaves images and some text alone.
Supports prefers-color-scheme (best)
The client respects your custom dark mode styles. Apple Mail, iOS Mail, Outlook 2019+, Samsung Mail, and Thunderbird all support @media (prefers-color-scheme: dark). You can define exactly what your email looks like in dark mode.
The goal: stop full inversion, and provide custom styles for clients that support them.
Step 1: Declare color-scheme support
The single most important thing you can do. Add these two meta tags to your <head>:
<meta name="color-scheme" content="light dark" />
<meta name="supported-color-schemes" content="light dark" />
And add this CSS:
:root {
color-scheme: light dark;
supported-color-schemes: light dark;
}
This tells the email client that you've intentionally designed for both modes, which prevents unwanted full color inversion in Outlook for Windows and some other clients.
Step 2: Write custom dark mode styles with prefers-color-scheme
Once you've declared support, define what you actually want the dark version to look like:
@media (prefers-color-scheme: dark) {
/* Email wrapper */
.email-wrapper {
background-color: #1a1a1a !important;
}
/* Content area */
.email-body {
background-color: #242424 !important;
}
/* Primary text */
.text-primary {
color: #f0f0f0 !important;
}
/* Secondary text */
.text-secondary {
color: #a0a0a0 !important;
}
/* CTA button — flip to light */
.cta-button {
background-color: #ffffff !important;
color: #000000 !important;
}
/* Dividers */
.divider {
border-color: #333333 !important;
}
}
The !important declarations override the inline styles that email clients can't override otherwise.
Which clients apply these styles:
- ✅ Apple Mail (macOS + iOS)
- ✅ iOS Mail
- ✅ Outlook 2019+ (Windows and macOS)
- ✅ Samsung Mail
- ✅ Thunderbird
- ❌ Gmail (ignores
prefers-color-scheme— handles dark mode its own way) - ❌ Outlook.com (strips
<style>blocks)
Step 3: Fix your logo and images for dark mode
This is where most emails break visually. A logo with a white background looks fine on a light email, but produces a white box on a dark background in dark mode.
Use PNG with transparent backgrounds for logos A transparent PNG works on both light and dark backgrounds without any special dark mode treatment. This is the simplest fix.
For images with white backgrounds that look wrong in dark mode:
Use the [data-ogsc] attribute selector trick (works in Outlook dark mode):
<!-- Show light image in light mode, hide in dark -->
<img
src="logo-dark-bg.png"
class="light-logo"
style="display: block;"
alt="Company logo"
/>
@media (prefers-color-scheme: dark) {
.light-logo { display: none !important; }
.dark-logo { display: block !important; }
}
And in your HTML, include both images:
<!-- Default: shown in light mode -->
<img class="light-logo" src="logo-for-light.png" alt="Company logo" />
<!-- Hidden by default: shown in dark mode -->
<img class="dark-logo" src="logo-for-dark.png" alt="Company logo" style="display: none;" />
Step 4: Design your dark palette
Good dark mode email design isn't just inverted light mode. A few principles:
Don't use pure black for backgrounds
Pure #000000 looks harsh and feels lower quality than dark brands like #1a1a1a or #121212. Use a near-black.
Lighten your text, don't go pure white
#f0f0f0 or #e8e8e8 is easier to read than #ffffff on a dark background — reduces eye strain and looks more intentional.
Keep color contrast WCAG-compliant in both modes A 4.5:1 contrast ratio is required for body text. Test your dark palette with a contrast checker — dark text on dark backgrounds is a common dark mode failure.
CTA buttons in dark mode If your primary button is dark (dark background, white text), flip it in dark mode to a white button with dark text — this maintains visual hierarchy.
Step 5: Handle Gmail's partial inversion
Gmail applies its own dark mode logic and ignores prefers-color-scheme. In Gmail dark mode on Android and iOS:
- Light backgrounds are changed to dark
- Dark backgrounds are left alone
- Images are not inverted
- Text colors are sometimes altered
The most reliable workaround: use #ffffff as your background color (not transparent). Gmail reliably converts white to dark grey in dark mode, which tends to look acceptable.
For elements you don't want Gmail to darken, set background to a genuinely dark color rather than white or light grey — Gmail leaves dark backgrounds alone.
Step 6: Test in real dark mode clients
Never rely solely on a dark mode toggle in a browser. The actual rendering varies between clients:
| Client | Dark mode support | Test method |
|---|---|---|
| Apple Mail | Full prefers-color-scheme |
macOS or iOS system dark mode |
| iOS Mail | Full prefers-color-scheme |
iPhone system dark mode |
| Outlook 2019+ (Windows) | Partial — color-scheme helps |
Windows dark mode + Outlook |
| Gmail (iOS/Android) | Partial inversion | Android/iPhone dark mode |
| Samsung Mail | Full prefers-color-scheme |
Samsung device dark mode |
| Outlook.com | Limited | Browser + Outlook.com dark theme |
Testing tools:
- Litmus — captures real screenshots in dark mode across clients
- Email on Acid — similar coverage
- Send test emails to your own devices and toggle dark mode manually
Designing dark mode emails in Figma
If you're designing in Figma, the most efficient approach is to maintain two frames: one for light mode and one for dark mode. Use Figma variables (color tokens) to define your palette, then swap between light and dark modes in the Variables panel.
The Marka Email Generator plugin exports both frames as a single HTML file with prefers-color-scheme media queries — the light frame becomes your default styles, the dark frame becomes your dark mode overrides. You define the design visually in Figma; Marka handles the CSS output.
Browse free email templates for Figma → that include dark mode variants ready to export.
Quick implementation checklist
- Add
color-schememeta tags to<head> - Add
:root { color-scheme: light dark; }CSS - Write
@media (prefers-color-scheme: dark)overrides for backgrounds, text, and buttons - Use transparent PNG for all logos
- Test in Apple Mail, iOS Mail, and Gmail (dark mode)
- Check color contrast in dark palette
- Verify CTA button is visible on dark background
