Reduced eye strain
Reduces eye strain in low-light environments, making content more comfortable to read.
Dark Mode in Email — The Complete Guide
Over 40% of subscribers view emails in dark mode. This guide covers how email clients apply dark mode, CSS targeting methods, image optimization techniques, client-specific workarounds, and accessibility best practices — everything you need to deliver great emails in any colour scheme.
What Is Dark Mode & Why It Matters for Email
Dark mode is a display setting that replaces light backgrounds with dark ones and switches dark text to light. Originally the standard in the 1970s with green-on-black CRT monitors, dark mode made a mainstream comeback when Apple added it to macOS in 2018 and iOS in 2019. Google, Microsoft, and virtually every major platform followed. Today, over 40% of email opens occur in dark mode environments, making it a critical consideration for every email marketer and developer.
Better battery life
Extends battery life on OLED screens by turning off individual black pixels.
Lower blue light
Reduces blue light exposure, potentially supporting healthier sleep patterns.
Preferred aesthetic
Many users simply prefer the sleek, modern aesthetic of dark interfaces.
If you're ignoring dark mode, a significant portion of your subscribers are likely opening your emails to find broken layouts, invisible logos, or unreadable text. The good news: with the right techniques, you can deliver a polished experience in both light and dark environments.
How Email Clients Apply Dark Mode
There are three fundamentally different approaches email clients use when applying dark mode to HTML emails. Understanding these is essential for crafting a defensive strategy.
No Colour Changes
Some email clients change their UI to dark mode but leave your HTML email completely untouched. Apple Mail without dark mode meta tags, Gmail desktop webmail, AOL, and Yahoo Mail fall into this category. Apple Mail is a special case: if you include the dark mode meta tags but don’t provide custom styles, it applies a partial invert.
Partial Colour Invert
This approach detects areas with light backgrounds and inverts them to dark, while leaving areas that already have dark backgrounds untouched. Outlook.com, Outlook apps, Office 365 for Mac, and Gmail Android use this method. Most clients with partial invert support some form of dark mode targeting.
Full Colour Invert
The most aggressive approach: both light and dark backgrounds are inverted. Gmail app on iOS, Outlook 2021 for Windows, Office 365 on Windows, and Windows Mail use full colour inversion. These clients are the hardest to control because they generally do not support dark-mode media queries.
Dark Mode Email Client Support Chart
This chart shows how each major email client handles dark mode rendering and which targeting methods they support. Use it as a reference when planning your dark mode strategy.
| Email Client | Dark Mode Treatment | @media | [data-ogsc] | Notes |
|---|---|---|---|---|
| Apple Mail (macOS) | No change | ✓ | ✘ | Pure white backgrounds invert if dark mode meta tags are present. |
| iPhone / iPad (iOS) | No change | ✓ | ✘ | Same Apple Mail behaviour on iOS devices. |
| Outlook.com | Partial invert | ✘ | ~ | Lighter background colours darkened; image swap works if the image is linked. |
| Outlook 2021 (Win) | Full invert | ✘ | ✘ | VML sections can be targeted with MSO-specific CSS. |
| Outlook App (iOS) | Partial invert | ✘ | ~ | Lighter backgrounds darkened; light text on dark backgrounds may also darken. |
| Outlook App (Android) | Partial invert | ✘ | ~ | Similar Outlook mobile behaviour, so test separately. |
| Gmail App (iOS) | Full invert | ✘ | ✘ | CSS blend mode workaround is available for some colours. |
| Gmail App (Android) | Partial invert | ✘ | ✘ | Partially inverts light backgrounds. |
| Gmail (Web) | No change | ✘ | ✘ | Desktop Gmail webmail does not alter your email. |
| Office 365 (Win) | Full invert | ✘ | ✘ | Equivalent risk profile to Outlook desktop. |
| Office 365 (Mac) | Partial invert | ~ | ✘ | More controllable than Outlook Windows, but still needs testing. |
| Windows Mail | Full invert | ✘ | ✘ | Fully inverts light and dark surfaces. |
Dark Mode Targeting Methods
@media (prefers-color-scheme: dark)
This CSS media query works identically to responsive design media queries but targets dark mode interfaces. It allows fully custom dark mode themes with image swaps, hover effects, and background images. Supported by Apple Mail on macOS and iOS, Outlook 2019 for Mac, and Office 365 for Mac. Requires dark mode meta tags in the <head> to activate in Apple Mail.
@media (prefers-color-scheme: dark) {
.darkmode { background-color: #1a1a2e !important; }
h1, h2, p, span, a { color: #ffffff !important; }
.link { color: #91ADD4 !important; }
}[data-ogsc] / [data-ogsb] selectors
This method targets the Outlook app specifically. While not every CSS property works with it, it supports image swapping on Outlook.com and colour overrides on Outlook apps. Best practice: duplicate your @media dark mode styles with [data-ogsc] prefixes to cover both targeting methods with minimal extra effort.
[data-ogsc] .darkmode {
background-color: #1a1a2e !important;
}
[data-ogsc] h1, [data-ogsc] h2,
[data-ogsc] p, [data-ogsc] span {
color: #ffffff !important;
}
[data-ogsc] .link {
color: #91ADD4 !important;
}Step-by-Step Dark Mode Implementation
Step 1: Add Dark Mode Meta Tags
Include these meta tags in your email’s <head> to declare dark mode support. This tells email clients that your email is designed to work in both light and dark modes and enables the media query in Apple Mail.
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">Step 2: Add CSS Colour Scheme Declaration
Reinforce the meta tag declaration by adding a color-scheme CSS property in your embedded styles. This provides an additional signal to email clients.
:root {
color-scheme: light dark;
supported-color-schemes: light dark;
}Step 3: Write Your @media Dark Mode Styles
Add custom dark mode styles inside a prefers-color-scheme media query. Include classes for backgrounds, font colours, link colours, and image visibility toggles.
@media (prefers-color-scheme: dark) {
.darkmode { background-color: #272623 !important; }
.dark-img {
display: block !important;
width: auto !important;
overflow: visible !important;
max-height: inherit !important;
max-width: inherit !important;
}
.light-img {
display: none !important;
}
h1, h2, h3, p, span, a, b {
color: #ffffff !important;
}
.link { color: #91ADD4 !important; }
}Step 4: Duplicate Styles with [data-ogsc] Prefix
For Outlook app support on Android and iOS, duplicate all your media-query dark mode styles with [data-ogsc] prefixes. This is easy to implement because you’re reusing existing rules with a new prefix.
[data-ogsc] .darkmode {
background-color: #272623 !important;
}
[data-ogsc] .dark-img {
display: block !important;
width: auto !important;
overflow: visible !important;
}
[data-ogsc] .light-img {
display: none !important;
}
[data-ogsc] h1, [data-ogsc] h2,
[data-ogsc] p, [data-ogsc] span,
[data-ogsc] a, [data-ogsc] b {
color: #ffffff !important;
}Step 5: Implement Image Swapping in HTML
Use separate light and dark versions of your logo and key graphics. The light mode image is shown by default, while the dark mode image is hidden with inline CSS and revealed by the dark mode classes. Wrap the dark image in MSO conditionals to hide it from Outlook desktop.
<!-- Light mode logo (default) -->
<img class="light-img" src="logo-dark.png"
width="163" height="60" alt="Brand Logo" />
<!-- Dark mode logo (hidden by default) -->
<!--[if !mso]><!-->
<div class="dark-img" style="display:none;
overflow:hidden; max-height:0px;
max-width:0px; visibility:hidden;">
<img src="logo-light.png"
width="163" height="60" alt="Brand Logo" />
</div>
<!--<![endif]-->Step 6: Test Across All Clients
Email clients are constantly updating their dark mode rendering logic. Test every email in both light and dark mode across major clients. Use tools like Litmus or Email on Acid for comprehensive previews. Pay special attention to Gmail on iOS, Outlook on Windows, and Apple Mail — these three cover the widest range of rendering behaviours.
Image Optimization for Dark Mode
Images are one of the trickiest elements to handle in dark mode emails. Logos with dark text can vanish against dark backgrounds, and opaque image backgrounds can create jarring white rectangles. Here are proven techniques for handling images across all dark mode scenarios.
Use Transparent PNGs with a Glow Effect
Add a subtle light outline around dark text in transparent PNG logos. The glow is invisible on light backgrounds but keeps the logo legible on dark backgrounds in clients where you can’t control image swapping.
Create Separate Light & Dark Images
For maximum control, create two versions of your logo and key graphics — one optimized for light backgrounds and one for dark. Use CSS swapping to show the correct version.
Design with Midtones
Choose colours with enough contrast against both white and black backgrounds. Midtone colours naturally work well in both modes and are especially useful for icons and illustrations.
Use APNGs Instead of GIFs
Animated PNGs support proper alpha transparency and a wider colour range, making them much better suited for dark mode than animated GIFs with rough white edges.
Add Padding Around Image Focal Points
If your images have non-transparent backgrounds, leave enough padding around the focal point to avoid awkward contrast when the surrounding email background changes colour. Full-width images that fill their container completely avoid this issue best.
Accessibility Considerations for Dark Mode
Dark mode can be both helpful and problematic for accessibility. It may improve readability for users with cataracts, but can introduce issues for people with colour blindness or dyslexia. Since email clients apply dark mode inconsistently, you can’t fully control how all subscribers will see your email. These practices significantly improve the experience.
Ensure text meets WCAG Level AA contrast ratios in both light and dark modes: 4.5:1 for body text and 3:1 for large text.
Avoid relying solely on colour to convey information. Pair colour with icons, underlines, or other visual cues.
Use generous font sizes. Smaller text is harder to read in dark mode, so treat 14px body copy as the bare minimum.
Test with screen readers to ensure dark mode optimizations don’t interfere with assistive technology functionality.
Choose accessible colour combinations that remain distinguishable for people with colour blindness in both modes.
Respect your subscribers’ dark mode preference. Don’t use hacks purely to force a light mode appearance.
Best Practices for Dark Mode Email Design
Design Dark Mode First
Don’t treat dark mode as an afterthought. Consider it from the start of your design process and build a dedicated palette into your design system.
Avoid Pure Black & White
Use #000001 instead of #000000 and #fffffe instead of #ffffff. Apple Mail specifically inverts pure black and pure white hex codes.
Use Transparent Backgrounds
Transparent PNGs blend cleanly with both light and dark backgrounds and eliminate the jarring white boxes that opaque images create in dark mode.
Be Careful with Shadows
Shadows that work well on white backgrounds may disappear against dark ones. Test them in both modes and use other emphasis techniques where needed.
Use Live Text Over Images
Wherever possible, use HTML text instead of images containing text. Live text is more accessible and participates in colour inversion properly.
Test Extensively
Always preview in both light and dark mode across Apple Mail, Gmail, and Outlook. Client logic changes frequently, so test every campaign, not just your base templates.
Client-Specific Dark Mode Tips
Apple Mail Tips
Apple Mail inverts pure white and pure black when dark mode meta tags are present. Use near-white and near-black values instead. Without the meta tags, Apple Mail won’t modify your email at all.
Gmail Tips
Gmail doesn’t support @media (prefers-color-scheme: dark) on any platform. Gmail desktop makes no changes, Gmail Android partially inverts, and Gmail iOS fully inverts. Use workarounds only where legibility demands them.
Outlook Tips
Outlook on Windows uses the Word rendering engine and fully inverts colours in dark mode. Outlook.com supports partial [data-ogsc] targeting for image swaps. Test each Outlook variant separately — they behave very differently.
Dark mode email design requires a specialised approach that accounts for how different email clients render HTML emails when users enable dark mode. With over 40% of email opens occurring in dark mode environments, optimising for both light and dark colour schemes is no longer optional. Email clients apply dark mode using three distinct methods — no change, partial colour inversion, and full colour inversion — each requiring different CSS targeting strategies including @media (prefers-color-scheme: dark) queries and [data-ogsc] selectors for Outlook-specific support.
EmailDeer specialises in hand-coded HTML emails optimised for dark mode across all major email clients. We implement custom dark mode themes with image swapping, accessible colour palettes, and client-specific workarounds for Gmail iOS blend modes and Outlook Windows VML fixes. Whether you need a single dark-mode-ready template or ongoing production support, our team ensures your brand looks polished in every inbox, regardless of colour scheme preference.
Need Dark-Mode-Ready Email Templates?
We hand-code every email to look flawless in both light and dark mode across all major email clients. Get in touch and we’ll handle the complexity.
