Designing Emails for Dark Mode: A Practical Guide
Your email looks perfect in your preview tool. You send it to 10,000 subscribers. Roughly 3,500 of them open it in dark mode — and see black text on a dark background, invisible logos, and washed-out buttons. This is not a hypothetical. Litmus data shows that 35% of email opens now happen in dark mode, and that number is higher still among Apple Mail users, where 40–56% of opens are in dark mode depending on the dataset. If you have never tested your emails in dark mode, you are almost certainly sending broken emails to a third of your list.
The good news: dark mode support is achievable without rewriting every email from scratch. It takes understanding how the major clients behave, one or two structural adjustments, and some targeted CSS.
Prerequisites
Before you start, you need:
- Access to your email HTML (or an email builder that lets you add custom code blocks)
- Basic familiarity with HTML and inline CSS — you do not need to be a developer, but you need to be able to paste code and understand what
colorandbackground-colormean - A test account on at least two clients: Apple Mail (iOS or macOS) and either Gmail on Android or a dark mode browser
If your platform does not allow any custom code, skip to Step 5 (Testing) — at minimum, you can verify the damage and make a case to your team for a platform change.
Step 1: Understand How Each Major Client Handles Dark Mode
Email clients split into three camps, and the fix differs by camp.
Camp 1 — Full CSS support (Apple Mail, iOS Mail, Samsung Mail, Thunderbird): These clients honour the @media (prefers-color-scheme: dark) media query, which means you can write specific CSS rules that only apply in dark mode. You have real control here. Apple Mail on macOS and iOS together account for roughly 50% of all email opens, so this camp is critical.
Camp 2 — Forced colour inversion (Gmail Android, Outlook Android, some Outlook desktop builds): These clients apply their own dark mode algorithm — they invert or darken colours without reading your CSS. Your white background becomes dark grey; your carefully chosen brand colours shift unpredictably. You cannot override this behaviour with CSS in most cases. Your defence here is structural: building emails in a way that survives inversion without looking broken.
Camp 3 — Partial or no dark mode (Outlook Windows 2016 and earlier, many webmail clients): These clients do not apply dark mode to email at all, or only apply it to the interface chrome, leaving email content unchanged. Your email renders in light mode regardless of the user’s system preference.
Step 2: Add the color-scheme Meta Tag
This one line tells supporting clients that your email is aware of dark mode. Without it, some clients apply more aggressive automatic inversion:
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">Add both tags inside the <head> of your email. The first is the standard; the second is Apple Mail’s preferred variant. Using both costs nothing and improves compatibility across the client spectrum.
This does not make your email dark mode friendly on its own. It signals to the client that you have considered dark mode, which can result in less aggressive auto-inversion from Gmail and Outlook while you apply your own CSS.
Step 3: Write Dark Mode CSS With prefers-color-scheme
For Camp 1 clients, you can target dark mode subscribers directly using a media query in your <style> block. This goes in the <head> of your email:
@media (prefers-color-scheme: dark) {
/* Main email background */
body, .email-wrapper {
background-color: #1a1a1a !important;
}
/* Body text */
.email-body, p, td {
color: #e0e0e0 !important;
}
/* Heading text */
h1, h2, h3 {
color: #ffffff !important;
}
/* Container / card background */
.email-container {
background-color: #2a2a2a !important;
}
/* Button */
.cta-button {
background-color: #ff6b35 !important;
color: #ffffff !important;
}
}A few things to note about this approach:
Use !important selectively. Inline styles override stylesheet rules in most email clients, and inline styles do not accept media queries. If your base email has style="color: #333333" on a paragraph, the media query rule for p { color: #e0e0e0 } will not win. The !important flag on your dark mode CSS forces the override. Use it in your dark mode rules, but avoid using !important in your base styles — otherwise you cannot override them.
Avoid pure black and pure white. #000000 and #ffffff are the most likely to trigger aggressive inversion in clients that auto-invert. Use near-whites (#f5f5f5 instead of #ffffff) for light-mode backgrounds and near-blacks (#1a1a1a instead of #000000) for dark-mode backgrounds. This also looks better — pure black feels harsh against text.
Test your specific class names. The class names above (email-wrapper, email-container, etc.) are examples. Use whatever classes your email template actually contains.
Step 4: Handle Images Correctly
Images are where dark mode most visibly breaks emails. The two main failure modes:
Problem 1 — Logo on a white background. A logo saved as JPEG (with a white background) against a dark email container looks like a white rectangle. Always export logos as transparent PNG. If you only have a light-mode version of your logo, create a dark version (white or light-coloured) for dark backgrounds.
Problem 2 — Automatic inversion of images. Gmail on Android sometimes inverts images it detects as light-background graphics. The most reliable fix is to add a dark border or very slightly off-white background around the image container so the client’s inversion algorithm sees it as already processed.
To swap images between light and dark mode in supporting clients:
<!-- Light mode image (visible by default) -->
<img src="logo-light.png" class="logo-light" alt="Company Logo" width="200">
<!-- Dark mode image (hidden by default, shown in dark mode) -->
<img src="logo-dark.png" class="logo-dark" alt="Company Logo" width="200" style="display: none;">@media (prefers-color-scheme: dark) {
.logo-light { display: none !important; }
.logo-dark { display: block !important; }
}This swaps the logo in Apple Mail, iOS Mail, and Samsung Mail. Gmail and Outlook will continue to show the default light-mode image — which is fine as long as the light-mode logo looks acceptable against whatever background Gmail’s algorithm applies.
Step 5: Test Before You Send
Testing email in dark mode requires checking across at least three environments:
Apple Mail on iOS: Toggle dark mode in iOS Settings → Display & Brightness. Open your email test send. This is the highest-stakes test because iOS Mail gives you full CSS control and has the largest dark mode audience.
Gmail on Android: Enable dark mode in Android system settings. Gmail’s behaviour is different from Apple Mail — you will see the auto-inversion at work and can judge whether your structural decisions hold up.
Outlook on Windows (desktop): Turn on dark mode in Windows Settings → Personalization. Note that older Outlook versions barely change the email content; this test is mainly to confirm your base design is clean and readable since your CSS will be ignored.
For systematic testing without maintaining a device lab, Litmus and Email on Acid offer screenshot previews across 90+ clients including dark mode variants. Both are paid tools (Litmus starts around $99/month, Email on Acid around $86/month at last check — verify current pricing on their sites), which is hard to justify for small senders. For smaller lists, a free Litmus account allows a limited number of previews per week — enough for your most important sends.
If you use MailerLite, their inbox preview feature (available on paid plans) includes dark mode previews for several clients:
MailerLite
Email marketing tools for growing businesses
MailerLite is known for its simplicity, affordability, and clean design. It's one of the best options for small businesses and beginners who want professional email marketing witho...
Brevo’s email editor also includes mobile and client previews, though dark mode coverage is less extensive. Brevo’s volume-based pricing makes it economical for larger lists — check current pricing at brevo.com/pricing:
Brevo (Sendinblue)
The most approachable CRM suite
Brevo (formerly Sendinblue) stands out with its unique pricing model based on email volume rather than subscriber count. This makes it particularly attractive for businesses with l...
For a direct comparison of their design tools, see our MailerLite vs Brevo comparison.
Common Mistakes
Testing only in your email builder’s preview. Most builder previews show light mode. Some builders have added dark mode previews, but builder previews in general are approximations, not real-client renders. Always send a test to a real email account before any significant send.
Using hex colours with no fallback. If you define a dark-mode background colour in CSS but forget to include background-color in your inline styles for the base state, clients that ignore your stylesheet may render white text on white background. Always define a complete, working light-mode email first, then layer dark mode on top.
Assuming your ESP handles it for you. Email service providers supply templates; they do not automatically optimise your content for dark mode unless they specifically say so. The fixes in this guide need to be applied to your actual content, not just your sender settings.
Treating dark mode as binary. Some clients partially darken — they darken the email chrome but leave your email container light. Others darken only the outer wrapper. Design defensively: make sure your email looks acceptable at every point between fully light and fully dark, not just at the extremes.
What Success Looks Like
A dark-mode-ready email meets these criteria:
- No invisible text. Body text, headings, and link text are all readable against the dark background — meaning you have either defined dark mode colours via CSS or your default colours survive inversion.
- Logo is visible. Your logo uses a transparent PNG or you have implemented an image swap.
- CTAs are clear. Your call-to-action button has explicit dark mode background and text colours, or it uses colours that survive inversion.
- Images look intentional, not broken. No white boxes around graphics. No colour-inverted product photography.
- Outlook users see a clean light-mode email. Since Outlook on Windows ignores your dark mode CSS, the base email must be complete and professional on its own.
This is not a high bar. Most of the work is a one-time investment in your template. Once your master template is dark-mode compatible, all campaigns built from it inherit the fixes automatically.
Which Tools Make This Easier
Not all email platforms give you equal access to custom code.
MailerLite allows custom HTML blocks, gives access to the full email <head> in HTML mode, and includes inbox previews on paid plans. It is the most accessible option for non-developers who need dark mode control. The weakness is that its automation depth falls short of platforms like ActiveCampaign or Klaviyo.
Brevo supports custom HTML editing and head-level code injection. Its pricing is based on emails sent rather than contacts, which makes it economical for large lists. The weakness: its dark mode preview tooling is more basic than dedicated testing tools.
ActiveCampaign and Klaviyo are stronger automation platforms than design tools. Custom HTML is supported, but neither leads the category for email design. If dark mode control is the priority, consider building your template in a code-forward tool and importing the HTML.
| Feature | MailerLite | Brevo (Sendinblue) |
|---|---|---|
| Rating | 4.6/5 | 4.5/5 |
| Starting Price | $10/mo | $9/mo |
| Free Plan | 500 subscribers | Unlimited contacts, 300 emails/day |
| Founded | 2010 | 2012 |
| Email Templates | 90 | 60 |
| Integrations | 140 | 60 |
| Deliverability Rate | 97% | 96.5% |
| Marketing Automation | ✓ | ✓ |
| A/B Testing | ✓ | ✓ |
| Landing Pages | ✓ | ✓ |
| Segmentation | ✓ | ✓ |
| Drag & Drop Editor | ✓ | ✓ |
| SMS Marketing | ✕ | ✓ |
| Ecommerce Features | ✓ | ✓ |
| API Access | ✓ | ✓ |
| Multi-Language | ✕ | ✓ |
| Web Push Notifications | ✕ | ✓ |
| Live Chat | ✓ | ✓ |
| Advanced Analytics | ✓ | ✓ |
For broader platform selection advice, see our guide to choosing an email marketing tool and our best email marketing tools for small business roundup.
Dark mode is not a future consideration — it is a current reality for a third of your subscribers. The fixes are not technically demanding, but they do require you to look at your email HTML and make deliberate decisions about colour and structure. Start with the meta tags, run a dark mode test on your existing template, and fix what you find.
MailerLite
Email marketing tools for growing businesses
Free plan · from $10/mo
Sources: Stripo Dark Mode Statistics · Dark Mode Adoption Data
Sources
- MailerLite — Official Website — accessed 2026-05-09
- Brevo (Sendinblue) — Official Website — accessed 2026-05-09
Related Articles
Email Copywriting: How to Write Emails People Actually Read
Learn how to write marketing emails that get opened, read, and clicked. Practical techniques for subject lines, hooks, body copy, and CTAs with real examples.
How-To15 Proven Ways to Grow Your Email List (With Examples)
15 specific tactics to grow your email list faster — from optimizing existing forms to referral programs and cross-promotions. No paid ads required.
How-ToHow to Read Your Email Marketing Analytics (Without Being Misled)
Most email marketers read their analytics wrong in 2026. Learn which metrics you can trust, which are broken, and how to build a reporting dashboard that means something.