Dark Mode Email Design: How to Make Emails Look Right in Dark Mode

Three Types of Dark Mode in Email

Not all dark mode implementations are equal. Email clients use one of three approaches:

No color change. The email renders exactly as designed. Gmail (web) on desktop does this — it shows dark mode in the UI but doesn't touch email content.

Partial inversion. The client changes background colors but leaves images and some inline styles alone. Gmail (mobile) and Outlook.com use this approach.

Full inversion. The client aggressively inverts all colors, including some images. Apple Mail (iOS/macOS) and Outlook (mobile) take this approach.

You need to design for all three simultaneously.

The Most Common Dark Mode Problems

Problem	Cause	Fix
White halo around logo	Logo has white/opaque background	Use transparent PNG
Text becomes invisible	Dark text on dark inverted background	Use high contrast ratios
Brand colors look wrong	Client inverts inline colors	Use prefers-color-scheme
CTA button disappears	White button on now-white-inverted bg	Add border to buttons
Images clash with background	Image backgrounds don't match inverted email bg	Use transparent images or dark-friendly backgrounds

Practitioner note: The most frequent dark mode complaint I hear is "our logo looks terrible." It's almost always because the logo is a PNG with a white background instead of transparent. Five minutes in an image editor fixes it permanently.

Design Strategies That Work

Use Transparent PNGs

Every image that sits on a colored background should use transparency. This includes logos, icons, and decorative elements. When the background inverts, transparent images adapt naturally.

Avoid Pure White and Pure Black

Instead of #ffffff, use #fefefe or #f9f9f9. Instead of #000000, use #1a1a1a. Some dark mode algorithms skip inversion when colors aren't pure white or black. This isn't guaranteed, but it helps.

Add Borders to CTA Buttons

<a style="background-color: #2563eb; color: #ffffff; padding: 12px 24px;
          border: 2px solid #2563eb; border-radius: 4px; text-decoration: none;">
  Get Started
</a>

The border ensures the button remains visible even if the background color gets inverted.

Use prefers-color-scheme (Where Supported)

Apple Mail and Outlook on Mac support this CSS media query:

<style>
  @media (prefers-color-scheme: dark) {
    .email-body { background-color: #1a1a1a !important; }
    .email-text { color: #e0e0e0 !important; }
    .logo-light { display: none !important; }
    .logo-dark { display: block !important; }
  }
</style>

This gives you explicit control over dark mode appearance in supporting clients. For non-supporting clients, your default design applies.

Practitioner note: Don't over-engineer dark mode support. Get the basics right — transparent images, good contrast, bordered buttons — and you'll handle 90% of cases. The CSS media query approach is a nice-to-have for Apple Mail users.

Testing Dark Mode

1. Apple Mail: Toggle dark mode in macOS System Settings
2. Gmail mobile: Enable device-level dark mode on iOS/Android
3. Outlook mobile: Enable dark mode in app settings
4. Outlook desktop: File → Account Settings → Dark Mode

Test every campaign in at least Gmail mobile dark mode and Apple Mail dark mode. These cover the majority of dark mode users.

Dark Mode and Deliverability

Dark mode itself doesn't affect deliverability. But if dark mode makes your email unreadable, recipients won't engage — and low engagement hurts your sender reputation over time.

Accessible, well-rendered emails get more opens and clicks regardless of color scheme. See our full guide on email rendering compatibility for more. That translates directly to better inbox placement.

For a full template audit covering dark mode, rendering, and deliverability, reach out for a review.

Sources

• Can I Email: prefers-color-scheme support
• Litmus: Dark Mode in Email
• Email on Acid: Dark Mode Testing
• Apple: Supporting Dark Mode

---

v1.0 · April 2026