Dark Mode Email Design: Tips That Actually Work for E-commerce Brands

You design a beautiful email campaign. The colors are on-brand, the layout is clean, and the product photography looks stunning. Then a subscriber opens it in dark mode and sees: white boxes around your images, invisible logos, and neon text on black backgrounds.

Over 80% of smartphone users have dark mode enabled, and most email clients now support it. If you're not designing for dark mode, a significant portion of your audience is seeing a broken version of your email. Here's how to fix it.

How Dark Mode Actually Works in Email

Unlike web browsers (where you control dark mode with CSS), email clients handle dark mode in three fundamentally different ways. Understanding these three rendering strategies is the key to designing emails that survive all of them.

Strategy 1: No Change

Some email clients display your email exactly as you coded it, regardless of dark mode. Your light background stays light, your dark text stays dark. No alterations whatsoever.

Strategy 2: Partial Invert

The email client changes light backgrounds to dark and dark text to light — but leaves already-dark elements alone. This is the most common behavior. If your email has a white background with dark text, it becomes a dark background with light text. But if a section already has a dark background, it stays unchanged.

Strategy 3: Full Invert

The email client inverts everything — all colors are flipped regardless of their original values. This is the most aggressive behavior and the one that causes the most design issues. Gmail's mobile app on Android uses this approach.

How Each Email Client Handles Dark Mode

The challenge is that every major email client handles dark mode differently:

The takeaway: you cannot rely on CSS to control dark mode across email clients. You need to design defensively so your email looks acceptable regardless of which rendering strategy is used.

The 7 Most Common Dark Mode Mistakes

These are the issues we see most often in e-commerce email campaigns:

1. Pure White Backgrounds

A #FFFFFF background flips to pure black in dark mode. If your brand uses a clean white aesthetic, this can feel jarring. The fix: use a very slightly off-white like #F9FAFB or #FAFAFA. Some clients treat near-white differently than pure white, reducing the aggressiveness of the inversion.

2. Dark Logos on Transparent Backgrounds

This is the most common dark mode disaster. Your dark logo sits on a transparent PNG, which looks great on a white email background. In dark mode, that background becomes dark — and your logo disappears. Always add a white stroke or padding around dark logos, or export them with a solid light background.

3. Text Baked into Images Without Contrast Buffer

If your hero image has dark text over a light section, dark mode won't change the image itself — but it will change the background around it. This can create an awkward contrast shift between the image and the email background.

4. Thin Typography

Light-weight fonts (300 or lighter) become harder to read when rendered as light text on a dark background. The thinner strokes lose definition. Use font-weight 400 or higher for body text to ensure readability in both modes.

5. Highly Saturated Colors

Colors that look vibrant on white can become eye-straining on dark backgrounds. Saturated reds, greens, and blues appear to glow in dark mode. Test your brand colors against dark backgrounds and consider using slightly desaturated versions for email.

6. No Alt Text on Images

When images fail to load (which happens more in dark mode due to some clients' image blocking behavior), alt text is the only fallback. Without descriptive alt text, your email becomes a blank page.

7. Not Testing Before Sending

The biggest mistake of all. Send test emails to Gmail (mobile), Apple Mail, and Outlook with dark mode enabled. A 5-minute test can prevent your campaign from looking broken for a large portion of your audience.

CSS Techniques for Dark Mode (and Their Limitations)

If you're coding HTML emails, there are CSS techniques you can use — but they only work in some clients:

The Meta Tag Declaration

Adding <meta name="color-scheme" content="light dark"> to your email's <head> tells supporting clients that your email is designed for both modes. Apple Mail respects this. Gmail ignores it.

The prefers-color-scheme Media Query

You can write CSS rules that only apply when dark mode is active: @media (prefers-color-scheme: dark). This lets you specify alternative colors, swap images, and adjust layouts for dark mode. The catch: only Apple Mail and some macOS Outlook versions support it reliably. Gmail and Yahoo ignore it completely.

Outlook's Proprietary Approach

Outlook desktop uses its own dark mode system with [data-ogsc] attribute selectors. You can target Outlook dark mode specifically, but it requires separate CSS rules from the standard prefers-color-scheme approach. This means maintaining two sets of dark mode overrides.

The honest truth: CSS-based dark mode control is fragmented and unreliable. You're writing custom code for 3-4 different rendering engines, and Gmail — the largest email client — ignores all of it.

The Image-Based Solution

Here's what most e-commerce brands have figured out: image-based emails are completely immune to dark mode.

When your email content is rendered as images (designed in Figma and sliced into sections), dark mode literally cannot alter your design. Email clients can only invert HTML elements — text, backgrounds, borders. They cannot change the pixels inside an image.

This means:

• Your colors stay exactly as designed
• Your typography renders with the exact fonts you chose
• Your layout doesn't shift or break
• Your logos remain visible on the correct background
• Zero CSS overrides needed for any email client

This is why brands like Nike, Zara, and ASOS use image-based emails for their marketing campaigns. The visual consistency is worth the trade-off. If you want to learn more about this approach, read our full comparison of image-based vs HTML emails.

Practical Checklist: Dark Mode-Proofing Your Emails

Whether you use HTML or image-based emails, follow this checklist before every campaign:

• Test in Gmail mobile (Android) — the most aggressive dark mode rendering. If it looks acceptable here, it will look fine everywhere.
• Check all logos — ensure they're visible on both light and dark backgrounds. Add strokes or solid backgrounds if needed.
• Avoid pure white (#FFF) and pure black (#000) — use slightly off-white and dark gray instead for less harsh inversions.
• Use font-weight 400+ for body text — thin fonts become illegible in light-on-dark rendering.
• Add descriptive alt text to every image — the safety net when images don't render.
• Test CTA button contrast — buttons must remain legible and tappable in both modes.
• Consider image-based for visual campaigns — product launches, seasonal sales, and brand storytelling emails benefit the most.

Frequently Asked Questions

How do I test my email in dark mode?

Send test emails to Gmail (mobile app), Apple Mail (with dark mode enabled in system settings), and Outlook (desktop and mobile). For broader coverage, use Litmus or Email on Acid — both offer dark mode rendering previews across multiple clients.

Does dark mode affect image-based emails?

No. Dark mode only alters HTML elements (text, backgrounds, borders). Image content is untouched. This is one of the biggest advantages of the image-based approach for marketing campaigns.

Why does my logo disappear in dark mode?

Your logo is likely a dark-colored image on a transparent background. When dark mode changes the background to dark, the logo becomes invisible. Fix it by adding a white stroke around the logo or exporting it on a solid light background.

Does prefers-color-scheme work in email?

Only in Apple Mail and some Outlook versions. Gmail — the largest email client — completely ignores it. Don't rely on CSS media queries for dark mode in email. Design defensively instead.

Should I design a separate dark mode version?

For HTML-coded emails, it's worth testing that your single version looks acceptable in dark mode and making targeted adjustments. For image-based emails, no separate version is needed since dark mode cannot alter image content.