Design Emails for Dark Mode

Copy Article URL

Copied

Design and optimize your emails for dark mode to ensure your content remains legible and professional regardless of a recipients display setting. Use transparent backgrounds, high-contrast colors, and solid button fills to provide a consistent experience across email clients.

In this article, you’ll learn how dark mode works and how to improve your email.

Things to know

  • Availability: Dark mode is supported by major clients, including Outlook, Gmail, Apple Mail and others on both desktop and mobile.
  • Testing: We strongly recommend using Inbox Preview to test your design before you send‌ it.
  • Support limits: Custom CSS targeting (media queries) is an advanced option and isn't supported by Mailchimp's regular support team.

How email clients render emails in dark mode

Dark mode is a setting that shifts the color palette of an email to use light-colored text, icons, and UI elements on a dark background.

When a subscriber uses dark mode, their email client applies one of three rendering schemes to your content. As a result, your design may look different for some recipients.

This chart shows how some email clients render your emails in dark mode.

Rendering scheme How it works Common clients
No visual change The client doesn't alter your email colors. * Apple Mail (macOS/iOS), AOL, Yahoo, Gmail (desktop)
Partial color inversion Detects light backgrounds and turns them dark. Adjusts text for contrast. Gmail (Android), Outlook 365 (Mac), outlook.com, Outlook (Android and iOS apps)
Full color inversion Inverts almost all colors, even those already designed as dark. Gmail (iOS), Outlook 2021, Windows Mail, Outlook 365 (Windows)
  • Apple Mail provides full targeting support, while Gmail and Outlook 2021, provides some.

Best practices for dark mode design

You can't control how an email client renders your code, or design specifically for dark mode in most email clients.

Mailchimp doesn't have a dedicated dark mode design feature because client support for targeted styling is inconsistent and impacts only a small percentage of recipients. We recommend that you follow these tips to help make sure your email looks good everywhere.

Optimize images and logos

Here are some tips to avoid image inversion, which can create a white box effect around logos.

  • Use transparent backgrounds and contrast: Save logos and icons as PNGs with transparent backgrounds, so the email background color shows through. add-png-image-dark-mode-email
  • Apply “glow” or “outlines”: Add a thin white outline or subtle white outer glow around dark logos to prevent them from disappearing against dark backgrounds. In this example, the logo is showing a black logo on white background. But when the background color gets darker, a stroke or glow makes the logo still visible. dark-mode-logo-for-email
  • Prevent auto-flipping: Apple Mail auto-flips pure white (#FFFFFF) and pure black (#000000). Use slightly off-shades like #FDFDFD or #010101 to prevent this.
  • Use off or mid-tone colors: Choose off-white or dark gray to soften contrast and‌ prevent intense shifts. Mid-tone palettes ease both light and dark mode readability.
  • Design for contrast: Help ensure text remains legible if the background flips. Avoid dark text on dark images without a solid color overlay behind the text.

Some mobile clients vary. For example, Gmail iOS behaves differently than Gmail Android. There's no reliable way to target, or override it. Android 10, 11, 13 may leave some colors untouched. #FFFFFF is very likely to be inverted. - Use thicker dividers: Thin or light gray dividers often disappear or invert in dark mode. Use padding or thicker divider heights instead.

Improve typography and buttons

  • Font weight: Light text on dark backgrounds can appear thinner. Use standard or heavier font weights to maintain legibility.
  • Solid fills: Use solid-fill buttons with strong contrast between text and background. Avoid relying on border-only or ghost buttons. In Office 365 (Windows), button text may invert but background doesn't. Border colors may remain unchanged.
  • Link visibility: Don't rely on color alone for links. Use underlines to help ensure they stay recognizable even if the color shifts.

Test and customize your design

  • Inbox preview: Users on paid marketing plans can simulate how emails look in specific clients like Gmail or Apple Mail.
  • Self-test: Send a test email to your own mobile device with dark mode enabled.
  • Advanced coding: You can use @media (prefers-color-scheme: dark) query in the style section of their custom-coded HTMLto target specific clients like Apple Mail and some versions of Outlook.

Note

Mailchimp Support can't troubleshoot custom CSS.

Pre-send checklist

Make sure you verify the following elements before sending your email.

  • Logos use transparent backgrounds and have a glow or outline for dark visibility
  • Text and background contrast sufficient even post-inversion
  • Buttons use solid fills
  • Links include contrast and underline
  • Previewed in at least one Full Invert client (e.g., Gmail iOS)

Next steps

To learn more about how to make sure your design is optimized for dark mode, check out these resources.

Preview and Test Your Email

We recommend that you always preview and test your email before sending to your subscribers.

Test with Inbox Preview

Use Inbox Preview to see what your campaign will look like in different email clients and mobile devices, without ever leaving the Campaign Builder.

View and Edit Section Design in Email and Landing Pages

Design entire sections of your emails and landing pages, including the header, footer, and body. Learn how to add borders, background colors, and more.