Supported by

Last year, I sent a product launch email that I was genuinely proud of. Clean layout, on-brand colors, beautiful hero image. I showed it to Matt and he goes, “Looks great. Did you check dark mode?”

I had not checked dark mode.

Our sleek dark navy header? Invisible. The logo? Gone. The CTA button with our signature coral background? Now a weird brownish-gray that looked like something you’d find in a hospital waiting room. The email didn’t just look bad in dark mode — it looked broken.

And here’s the thing: over 80% of people now use dark mode on at least one device. That means my beautiful email was broken for the majority of our audience, and I didn’t even know.

That experience kicked off a deep dive into dark mode that I’m still on. I’ve tested hundreds of emails across every major client, talked to developers in the #emailgeeks community, and spent way too many hours staring at prefers-color-scheme media queries. This guide is everything I’ve learned — the design principles, the actual code, the email client quirks, and the workarounds that actually work in 2026.

Whether you’re a designer who’s never touched HTML or a developer who dreams in <td> tags, this guide will help you build emails that look intentional in dark mode, not accidental.

Let’s get into it.

Why Dark Mode Matters (and It’s Not Just About Aesthetics)

You probably already know dark mode is popular. But the numbers are worth sitting with for a second.

According to an Android Authority survey, 81.9% of smartphone users have dark mode enabled on their devices. Litmus data shows around 35% of email opens are now happening in dark mode — and that number keeps climbing, especially among the 18-34 demographic that makes up a huge chunk of the SaaS and DTC audience we all care about.

But here’s what most marketers miss: dark mode isn’t just a visual preference. It’s a trust signal. When your email renders beautifully in dark mode, it signals to the reader that you care about details, that your brand is technically competent, and that you respect their preferences. When it renders poorly — invisible logos, clashing colors, broken layouts — it signals the opposite.

For lifecycle marketers especially, this matters. Your welcome series, your onboarding flow, your winback campaigns — these are high-stakes touchpoints. You can’t afford to have them look broken for 80% of your audience.

How Email Clients Handle Dark Mode

Before we talk about how to design and code for dark mode, you need to understand what’s actually happening when an email client renders your email in dark mode. Because not all email clients do it the same way.

There are three approaches, and they range from “totally fine” to “completely unpredictable.”

1. No Color Changes

Some email clients simply leave your email alone when the user switches to dark mode. The inbox UI goes dark, but your email renders exactly as you designed it. Apple Mail and some versions of iOS Mail work this way by default. This is the easiest scenario — your email looks exactly as you intended.

2. Partial Color Inversion

This is where things get tricky. Some email clients will invert some of your colors — typically light backgrounds become dark and dark text becomes light — but they’ll try to respect colors that are explicitly set in your HTML. Gmail on iOS and Android does this, and the behavior can be inconsistent. You might find that your white background becomes dark gray but your colored sections stay as-is, creating an awkward patchwork effect.

3. Full Color Inversion

The most aggressive approach. The email client overrides all of your colors, inverting everything regardless of what you specified. Early versions of Outlook on Windows did this, and it could produce some truly wild results — think neon green text on a purple background that you definitely did not choose.

Understanding which category your target email clients fall into helps you make smarter design decisions. You can’t control what the email client does, but you can build your emails to degrade gracefully across all three approaches.

Email Client Dark Mode Support (2026)

I wish I could tell you there’s one CSS rule that handles dark mode everywhere. There isn’t. Every email client does its own thing, and the behavior can change with updates. This chart is based on our testing and reports from the #emailgeeks community — but always check Can I Email for the latest, because this stuff shifts faster than you’d expect.

The big takeaway: Apple Mail and Outlook on macOS are the most predictable. Gmail is the most inconsistent. And legacy Outlook on Windows is where your best-laid plans go to die.

The Code: Targeting Dark Mode with CSS

Alright, let’s get into the actual code. There are three main techniques for targeting dark mode in email, and each works in different email clients.

Technique 1: The prefers-color-scheme Media Query

This is the standard CSS approach and works in Apple Mail, iOS Mail, Outlook (macOS), and a few others. It’s the most reliable method for clients that support it.

<style>
  @media (prefers-color-scheme: dark) {
    /* Dark mode styles go here */
    .email-body {
      background-color: #1a1a2e !important;
      color: #e0e0e0 !important;
    }
    .header {
      background-color: #16213e !important;
    }
    .cta-button {
      background-color: #e94560 !important;
      color: #ffffff !important;
    }
    .logo-light { display: none !important; }
    .logo-dark { display: block !important; }
  }
</style>

A few things to note. The !important declarations are necessary because you’re overriding inline styles, which is how email HTML works. Without them, your dark mode styles won’t take effect. Also, this only works in clients that support the media query — Gmail, notably, ignores it entirely.

Technique 2: Outlook’s [data-ogsc] and [data-ogsb] Targeting

Outlook.com and the Outlook mobile apps use their own proprietary attributes for dark mode. When Outlook renders your email in dark mode, it adds data-ogsc (Outlook Group Style Color) and data-ogsb (Outlook Group Style Background) attributes to your elements. You can target these directly:

<style>
  [data-ogsc] .email-body {
    background-color: #1a1a2e !important;
    color: #e0e0e0 !important;
  }
  [data-ogsb] .header {
    background-color: #16213e !important;
  }
  [data-ogsc] .cta-button {
    background-color: #e94560 !important;
    color: #ffffff !important;
  }
</style>

This is Outlook-specific, so you’ll want to use it alongside the prefers-color-scheme query to cover both worlds.

Technique 3: Meta Tags for Color Scheme Support

Adding meta tags to your email’s <head> tells email clients that your email supports dark mode. Without these, some clients may apply their own aggressive color inversion. With them, the client is more likely to respect your custom dark mode styles.

<head>
  <meta name="color-scheme" content="light dark">
  <meta name="supported-color-schemes" content="light dark">
  <style>
    :root {
      color-scheme: light dark;
    }
  </style>
</head>

A quick note: color-scheme is the valid CSS property that goes in your :root selector. The supported-color-schemes part only works as a meta tag, not a CSS property — I’ve seen a few guides get this wrong, including one I wrote. The meta tags in the <head> do the real heavy lifting here.

Think of these meta tags as saying “Hey, I’ve already handled dark mode — please don’t override my work.” It’s a polite request, not a guarantee. But it makes a real difference in Apple Mail and a few other clients.

Putting It All Together

Here’s a combined approach that covers the widest range of email clients:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <meta name="color-scheme" content="light dark">
  <meta name="supported-color-schemes" content="light dark">
  <style>
    :root {
      color-scheme: light dark;
    }

    /* Light mode defaults (inline these on elements too) */
    .email-body { background-color: #ffffff; color: #333333; }
    .card { background-color: #f5f5f5; }
    .heading { color: #1a1a1a; }
    .body-text { color: #555555; }
    .cta-btn { background-color: #e94560; color: #ffffff; }

    /* Dark mode overrides — Apple Mail, iOS, macOS Outlook */
    @media (prefers-color-scheme: dark) {
      .email-body { background-color: #1a1a2e !important; color: #e0e0e0 !important; }
      .card { background-color: #16213e !important; }
      .heading { color: #ffffff !important; }
      .body-text { color: #cccccc !important; }
      .logo-light { display: none !important; }
      .logo-dark { display: block !important; }
    }

    /* Dark mode overrides — Outlook.com, Outlook mobile */
    [data-ogsc] .email-body { background-color: #1a1a2e !important; color: #e0e0e0 !important; }
    [data-ogsc] .card { background-color: #16213e !important; }
    [data-ogsc] .heading { color: #ffffff !important; }
    [data-ogsc] .body-text { color: #cccccc !important; }
    [data-ogsc] .logo-light { display: none !important; }
    [data-ogsc] .logo-dark { display: block !important; }
  </style>
</head>

Is it elegant? Not really. Email HTML rarely is. But it works across the widest range of clients, and that’s what matters.

Which Technique Should You Use?

If you’re wondering where to start, here’s the decision-making shortcut:

If your audience is mostly Apple Mail / iOS users (common for DTC and consumer brands): prefers-color-scheme alone gets you most of the way there.

If your audience is heavily Outlook (B2B, corporate, enterprise): you need the [data-ogsc] targeting on top of the media query.

If your audience is Gmail-heavy (which is a lot of us): none of the CSS techniques will help — focus on defensive coding with explicit colors on every element and test obsessively.

For most teams, I recommend the combined approach above. Yes, it’s more code. But you write it once, template it, and then every email benefits. The five extra minutes upfront saves you from the “our logo disappeared for 40% of subscribers” conversation with your boss.

Designing for Dark Mode: The Practical Stuff

Code is only half the battle. The design decisions you make before you write a single line of HTML determine whether your email looks good in dark mode. Here’s what I’ve learned from testing hundreds of emails.

1. Choose Colors That Work in Both Modes

The biggest design mistake is choosing a color palette that only looks good against white. If your brand uses light pastels or subtle grays, they’re probably going to disappear against a dark background.

Instead of pure white (#FFFFFF) for backgrounds, use a soft off-white like #F5F5F5. Instead of pure black (#000000) for text, use #333333 or #1A1A1A. For dark mode backgrounds, we use #1a1a2e — a slightly warm near-black with a hint of blue — because pure black (#000000) feels flat and lifeless on OLED screens, while this shade has depth without being distracting. These subtle shifts make your light mode look softer and make the dark mode experience feel more intentional.

For brand colors, test them against both light and dark backgrounds. Some colors — particularly warm tones like coral, orange, and warm red — tend to look great in both modes. Cool blues and purples can get lost against dark backgrounds unless they’re bright enough.

Pro tip: Design your email in Figma with two frames side by side — one light, one dark. This forces you to consider both modes from the start rather than treating dark mode as an afterthought.

2. The Logo Problem (and Three Ways to Fix It)

Dark logos on transparent backgrounds disappear in dark mode. White logos on transparent backgrounds disappear in light mode. This is the most common dark mode fail, and there are three solutions:

Option A: Add a background shape behind your logo. Place your logo on a small colored rectangle or rounded shape. This works in both modes because the background provides contrast regardless of the surrounding color.

Option B: Add a stroke or outer glow. A subtle white or light-colored stroke (1-2px) around your dark logo makes it visible against dark backgrounds without affecting its light mode appearance. I showed how to do this in Photoshop in under 3 minutes in the video below — it’s one of the simplest fixes.

Option C: Swap logos with CSS. Serve a light-mode logo by default and use prefers-color-scheme and [data-ogsc] to swap in a dark-mode version. This is the most polished approach but only works in clients that support the media query.

<!-- Both logos in the HTML -->
<img class="logo-light" src="logo-on-light.png" alt="Your Brand">
<img class="logo-dark" src="logo-on-dark.png" alt="Your Brand">

Then the CSS handles the swap — light logo visible by default, dark logo hidden, and the media query flips them:

<style>
  .logo-light { display: block; }
  .logo-dark { display: none; }

  @media (prefers-color-scheme: dark) {
    .logo-light { display: none !important; }
    .logo-dark { display: block !important; }
  }
  /* Outlook targeting */
  [data-ogsc] .logo-light { display: none !important; }
  [data-ogsc] .logo-dark { display: block !important; }
</style>

One thing to remember: clients that don’t support prefers-color-scheme or [data-ogsc] (like Gmail) will always show the light mode logo. That’s why Options A and B are often more reliable — they work everywhere without CSS support.

3. Use Transparent PNGs (With a Caveat)

Transparent PNGs are your best friend for dark mode because they blend with whatever background is behind them. Icons, illustrations, decorative elements — anything with a transparent background will adapt automatically.

The caveat: if your transparent PNG has dark-colored elements, they’ll be invisible in dark mode. Always check your transparent assets against both light and dark backgrounds.

4. Watch Your Image Backgrounds

Product images with white backgrounds look fine in light mode but create harsh white rectangles in dark mode. The fix is either to use transparent backgrounds on product shots (if your ecommerce platform supports it) or to add a subtle colored background that works in both modes.

Some brands — DoorDash is a good example — use slightly off-white or light gray backgrounds for product images. The background is barely noticeable in light mode but blends much better in dark mode.

5. Rethink Your Dividers and Borders

Light gray borders (#E0E0E0) that separate content sections in light mode will either disappear or look weird in dark mode. Consider using slightly more visible borders (#CCCCCC or darker) or switching to spacing and padding to create separation instead of lines.

Dark Mode in the Wild: Brand Examples

Theory is great, but seeing how real brands handle dark mode is where the lightbulbs go off. Here are six examples from our inspiration library that show different approaches — and why they work.

Apple

Apple is the gold standard here, which makes sense — they invented dark mode as we know it. Their emails use generous spacing, a limited color palette, and product photography on dark backgrounds. The key thing: their emails look intentional in dark mode, not like an afterthought. Notice how the product shots sit naturally against the dark background. That’s not an accident — Apple shoots product images specifically to work in both modes.

Google Nest

Google Nest does something clever: they use colored card sections that hold up in both light and dark mode. Rather than relying on a white background for contrast, each content block has its own background color. When dark mode inverts the outer wrapper, the cards maintain their visual integrity. This is the “container approach” and it’s one of the most reliable design patterns for dark mode compatibility.

Dreamforce

Dreamforce (Salesforce’s conference) uses bold, vibrant gradients and saturated colors that pop in dark mode. This is a good example of how going bolder with color can actually make dark mode easier — when your palette is already rich and saturated, the contrast with a dark background feels natural rather than forced.

DoorDash

DoorDash nails the product photography challenge. Their food images use slightly warm, off-white backgrounds rather than pure white — which means in dark mode, you don’t get those harsh white rectangles around every product shot. It’s a small detail that makes a huge difference. If you’re in ecommerce or DTC, study how DoorDash handles image backgrounds.

BBC Nordic

BBC Nordic uses a dark-by-default design. Their emails have dark backgrounds even in light mode, which means dark mode doesn’t really change the experience — it just makes the inbox chrome match the email. This is an increasingly popular approach for media and entertainment brands. If your brand aesthetic leans dark already, lean into it for email too.

Polestar

Polestar’s minimalist approach shows how restraint pays off. Their emails use very few elements — a full-bleed product image, a short line of copy, and a single CTA. In dark mode, there’s barely anything to invert. This is the ultimate “less is more” strategy: the fewer colored elements you have, the fewer things that can break.

Want to see more dark mode email examples? Browse our inspiration library with dark mode enabled on your device — you’ll spot the patterns these brands use.

The Dark Mode Gotchas Nobody Warns You About

After testing dark mode across dozens of campaigns, here are the edge cases that have burned me:

Gmail’s auto-inversion is unpredictable. Gmail doesn’t support prefers-color-scheme, so it applies its own color inversion. The problem is that this inversion isn’t consistent — it depends on the colors you’ve used, the structure of your HTML, and possibly the phase of the moon.

The best defense is what I call “defensive dark mode coding” — set explicit background colors and text colors on every element, and never rely on inherited or transparent backgrounds. Here’s an example:

<!-- BAD: Gmail may or may not invert this -->
<td>
  <p>Your order has shipped!</p>
</td>

<!-- GOOD: Explicit colors give Gmail less room to improvise -->
<td style="background-color: #ffffff; color: #333333;">
  <p style="color: #333333;">Your order has shipped!</p>
</td>

It’s verbose, I know. But when you’re explicit about every color, Gmail’s inversion engine produces more predictable (though still not perfect) results. The biggest culprit is leaving <td> elements without a background color — Gmail sees those as “unset” and applies its own dark background, which can clash with elements that do have set colors.

Outlook on Windows is still chaotic. The new Outlook (based on web tech) is much better than the legacy desktop version, but many corporate users are still on legacy Outlook. If your audience is heavily B2B, test in both versions.

Animated GIFs with transparency can glitch. If you’re using animated GIFs with transparent frames, some email clients will render the transparent areas as white in dark mode, creating a flashing effect. Use APNGs instead where possible — they handle transparency more gracefully. For clients that don’t support APNGs, they’ll fall back to the first frame as a static image, which is usually fine.

Dark mode can break your image-only emails. If your email is mostly or entirely images (which we generally advise against for accessibility reasons anyway), dark mode will invert everything around those images, creating a jarring contrast. This is yet another reason to use a healthy mix of HTML text and images.

Accessibility in Dark Mode

Designing for dark mode and designing for accessibility aren’t separate concerns — they’re deeply connected. A few things to keep in mind:

Maintain WCAG contrast ratios. Your text-to-background contrast should meet at least 4.5:1 for body text and 3:1 for large text — in both modes. Use the WebAIM Contrast Checker to verify. I’ve seen designers nail their light mode contrast but completely blow it in dark mode because they assumed the auto-inversion would handle it.

Don’t rely solely on color to convey meaning. Links that are only differentiated by color (no underline, no bold) can become indistinguishable in dark mode. Add an underline or other visual indicator.

Always include alt text. If your dark mode logo swap fails (and it will in some clients), the alt text is your safety net. Make it descriptive and useful.

Test with actual users. The best accessibility testing isn’t automated — it’s sending your email to a few people who actually use dark mode daily and asking them to look at it on their devices.

Testing Dark Mode Emails

Here’s an uncomfortable truth: you can follow every best practice in this guide and still ship a dark mode disaster if you don’t test properly. I’ve been there. More than once.

Testing is where the real work happens, and most teams either skip it or do it half-heartedly. Here’s the process we use at Email Love — and the one I recommend to every team I work with.

Step 1: Design with dual frames. Before you write any code, build your email in your design tool with two frames side by side — one with a white background, one with a dark background (I use #1a1a2e). This forces you to spot problems at the design stage, where they’re cheap and fast to fix. Fixing a color contrast issue in Figma takes 10 seconds. Fixing it after it’s been coded, tested, approved, and scheduled? That’s a meeting.

Step 2: Code with the combined approach. Use the meta tags, prefers-color-scheme, and [data-ogsc] techniques from earlier in this guide. Remember: inline your light mode styles on every element, and add your dark mode overrides in the <style> block.

Step 3: Test in the Big Three. At minimum, preview your email in Apple Mail (or iOS Mail), Gmail, and Outlook. These three cover the vast majority of your audience and each handles dark mode completely differently. Use tools like Litmus, Email on Acid, or Testi@ to preview across clients without sending a hundred test emails.

Step 4: Send real test emails. Automated previews don’t catch everything — rendering tools have their own quirks, and nothing beats seeing the actual email on your actual phone. Send test emails to yourself, open them on your phone in dark mode, switch to light mode, check the desktop, and check webmail. Yes, this is tedious. Yes, it’s necessary.

Step 5: Check mobile and desktop separately. Gmail on iOS, Gmail on Android, and Gmail on web can all render the same email differently in dark mode. Same goes for Outlook. Don’t assume that testing one platform covers the others.

Step 6: Get a second pair of eyes. After staring at the same email for an hour, you’ll miss things. Send it to a colleague — ideally one who uses dark mode by default — and ask them to flag anything that looks off. Fresh eyes catch what tired eyes miss.

If you’re designing emails in Figma, our Email Love Figma Plugin lets you export responsive HTML directly from your designs — which means the design-to-test cycle is minutes instead of days. You’re not waiting for a developer to recode every tweak. Change a color in Figma, export, test, done.

Quick Reference: The Dark Mode Checklist

• Meta tags for color-scheme added to <head>
• prefers-color-scheme media query with dark mode overrides
• [data-ogsc] styles for Outlook dark mode support
• Logo visible against both light and dark backgrounds
• All transparent PNGs checked against dark backgrounds
• Product images don’t create harsh white rectangles
• CTA button colors maintain contrast in both modes
• Text meets WCAG contrast ratios in both modes
• Alt text present on all images
• Tested in Apple Mail, Gmail, and Outlook (at minimum)
• Tested on both mobile and desktop
• Animated GIFs/APNGs render correctly in dark mode

Where to Go From Here

Dark mode isn’t going away. If anything, adoption is accelerating as more people spend more time on screens and want easier-on-the-eyes experiences. The brands that treat dark mode as a first-class design consideration — not an afterthought — are the ones whose emails feel polished, intentional, and professional.

The brand examples earlier in this guide — Apple, DoorDash, Polestar, and the rest — all have one thing in common: they made dark mode part of their design process, not something they checked after the fact. You can find hundreds more examples in our inspiration library.

And if you’re building emails in Figma, our Email Love Figma Plugin lets you export responsive HTML that gives you full control over your dark mode styles. No more fighting with drag-and-drop editor limitations.

Dark mode doesn’t have to be scary. Start with the meta tags and the combined CSS approach, test in the Big Three email clients, and iterate from there. You don’t need to get it perfect on day one — you just need to stop ignoring it.

If you’ve got dark mode tricks or horror stories of your own, I’d love to hear them. Reply to this email or hit me up on Twitter. The #emailgeeks community is how we all get better at this stuff.

Additional Resources

• Litmus: The Ultimate Guide to Dark Mode
• Email on Acid: Dark Mode for Email
• Campaign Monitor: Dark Mode in Email
• WebAIM Contrast Checker
• Can I Email — Email Client Support Reference

Related: for the latest data on how brands are actually sending, see what we learned from 79,235 real emails.

Much love,
Andy

Email: [email protected]
Twitter: @emaillove