Designing Emails for Dark Mode: What Every Brand Needs to Know

A significant portion of your email subscribers will never see your emails the way you designed them. They will see a version where your crisp white backgrounds have turned black, your dark text has inverted to white, and your carefully chosen product images — designed against a white background — are now floating eerily in a dark void.

This is dark mode, and it affects more than half of all email opens across major clients.

For brands that have not designed for dark mode, the result is not just aesthetically unpleasant. It is a conversion problem. Emails that render incorrectly in dark mode see click rates 10–15% lower than their light mode equivalents. At scale, that is a meaningful and recoverable revenue gap.

This guide covers everything you need to design emails that work beautifully in both light and dark mode — and why the investment pays for itself quickly.

How Dark Mode Actually Affects Email Rendering

Dark mode is not a simple colour flip. Different email clients apply it in different ways, which is part of what makes it complex to design for.

Full Colour Inversion

Some email clients — notably older versions of Outlook — apply a full colour inversion to email content. This means every colour in the email is replaced with its visual opposite. Black becomes white, white becomes black, your brand’s navy blue becomes a bright orange. The result is often visually chaotic and completely off-brand.

Partial Inversion

Apple Mail and iOS Mail take a more intelligent approach. They invert some colours automatically but attempt to preserve images. The challenge here is that “preserving images” includes the background of those images — so a product photo with a white background will keep its white background while everything around it turns dark, creating a harsh, jarring contrast.

Forced Dark Mode

Gmail on Android applies its own dark mode interpretation. It analyses your email’s existing colour scheme and attempts to convert it to a dark version. This often produces reasonable results for simple text-heavy emails but struggles with complex layouts, branded colour palettes, and images with non-transparent backgrounds.

Understanding which email client does what matters because it informs which specific design choices to prioritise.

Which Email Clients Apply Dark Mode

The major dark mode clients and their market share (as of 2025):

Apple Mail (including iPhone Mail) accounts for approximately 35–40% of email opens globally. It applies a partial inversion with image preservation.

Gmail accounts for approximately 25–30% of opens. The Android app applies forced dark mode when the email does not explicitly define its colour scheme.

Outlook (desktop and mobile) varies by version. Outlook 2019 and later on Windows applies full inversion. The Outlook mobile app applies partial dark mode.

Samsung Mail, which comes pre-installed on Samsung Android devices, applies full dark mode rendering.

Between them, these clients mean that a subscriber on an iPhone, Android, or Windows PC — which is to say, the vast majority of your list — is likely viewing your emails in dark mode if they have enabled it at the OS level.

The Specific Design Problems Dark Mode Creates

White Backgrounds Become Impossible

The most common email design has a white content area on a white or light grey email background. In dark mode, this creates an entirely black or very dark version of your email. If your brand colours are dark, your text may become invisible against the inverted background.

Logo Legibility Problems

Logos designed for light backgrounds — dark text or graphic on transparent PNG — become invisible in dark mode when the transparent background is replaced with dark colour. A black logo on a transparent background simply disappears.

Image Halos

Product images with white or light background colours produce the infamous “halo” effect in dark mode — a bright white rectangle around your product against a dark email background. This looks broken even to subscribers who do not consciously notice what has happened, and it reduces confidence in the email’s credibility.

Colour Contrast Issues

Carefully selected colour pairings that achieve excellent contrast in light mode can fail accessibility standards and become illegible in dark mode. A dark navy heading on a white background inverts to a pale colour on black — often with insufficient contrast ratio for easy readability.

Designing for Dark Mode: The Core Techniques

Use Transparent Backgrounds for Images

The single most impactful dark mode fix for e-commerce brands is exporting all product images and graphic assets with transparent backgrounds (PNG format, not JPG). This ensures the image integrates with whatever background colour is applied by the email client rather than sitting in its original white box.

For brands where transparent product images are not feasible (complex product shots with white backgrounds, for example), a workaround is to use a subtle grey or off-white background on the image container — slightly darker than pure white — which causes less visual disruption when inverted.

Design Logos in Multiple Versions

Every brand sending email should have three logo versions: dark (for light backgrounds), light (for dark backgrounds), and a version that works on mid-range colours. Using CSS and media queries, you can serve the appropriate logo version based on the recipient’s colour scheme preference.

The practical implementation: create a “light mode” class on your dark logo image and a “dark mode” class on your light logo image. In your CSS media query for dark mode, you toggle the visibility of each.

Use Media Queries for Dark Mode Specific Styles

CSS media queries can detect when a subscriber’s device is in dark mode and apply specific style overrides. The relevant query is prefers-color-scheme: dark.

A dark mode stylesheet in your email can define:

• Background colours for your email wrapper and content areas
• Text colours for headings and body copy
• Button colours and hover states
• Border colours for dividers and containers

Not all email clients support this approach — Gmail notably has limited CSS media query support — but Apple Mail, iOS Mail, and some versions of Outlook do. The result is an email that looks intentionally designed for dark mode in clients that support it, while falling back gracefully in clients that do not.

Avoid Pure White Backgrounds Where Possible

Instead of a pure white (#FFFFFF) email background, consider using a very light grey (#FAFAFA or #F5F5F5). In many dark mode implementations, this nuance signals to the email client that you have considered the background colour, which can trigger less aggressive inversion.

More practically, this approach means that even when your background is inverted, the contrast is softer and less jarring than the full black produced by white inversion.

Test Colour Contrast in Both Modes

Every colour pairing in your email should be checked against WCAG contrast standards in both light and dark mode. The minimum contrast ratio for body text is 4.5:1. Many design tools (Figma, Adobe XD) have built-in dark mode preview options. Email testing platforms like Litmus and Email on Acid provide dark mode previews across clients.

This is not just an accessibility consideration. Poor contrast in dark mode directly reduces readability, which reduces clicks, which reduces revenue.

Testing Dark Mode Across Email Clients

Building for dark mode is not complete without systematic testing. The variables are too numerous — different clients apply different rules, different OS versions handle inversion differently, and individual subscriber settings can override defaults.

The professional standard for dark mode testing is:

Litmus or Email on Acid for automated rendering previews across 70+ client/device combinations. These tools show your email rendered in dark mode in Apple Mail, Gmail, Outlook, and others in seconds.

Real device testing for your highest-traffic clients. If 40% of your opens come from Apple Mail on iPhone, someone on your team should be testing every significant email template on a real iPhone in dark mode before it sends.

A dark mode preview in your ESP before every send. Klaviyo, Mailchimp, and most major platforms have added dark mode preview to their preview tools.

The Conversion Impact of Getting Dark Mode Wrong

The business case for investing in dark mode design is straightforward. If 55% of your opens are in dark mode and your emails render badly in dark mode, you are effectively running two parallel email experiences: one that converts at your target rate and one that converts at a materially lower rate.

The click rate differential between a dark mode optimised email and an unoptimised one in dark mode is typically 10–20% lower for unoptimised sends, based on A/B tests where the same email has been rendered in both states.

For a brand sending 10 campaigns per month to 15,000 subscribers, the arithmetic is significant: even a 5% click rate improvement from better dark mode design translates directly to more revenue per send, compounded across every campaign for the full year.

A Practical Dark Mode Design Checklist

For every email template you build or redesign, run through this checklist:

• All logos available in light, dark, and transparent versions with CSS toggle
• All product and graphic images exported with transparent backgrounds where feasible
• CSS media query dark mode styles defined for backgrounds, text, and buttons
• Background colours using off-white rather than pure white where possible
• Colour contrast tested in both light and dark mode at WCAG 4.5:1 minimum
• Template tested in Litmus or Email on Acid across at minimum: Apple Mail (iOS), Gmail (Android), Outlook 2019
• Real device preview completed before first use in production

This checklist takes 30–60 minutes per template and prevents months of reduced performance from unoptimised dark mode rendering.

---

Dark mode design is one of those areas where the gap between what most brands do (nothing) and what excellent looks like is small in execution time but significant in revenue impact. Getting it right is a matter of knowing the techniques and applying them systematically.

At Excelohunt, every email template we build is designed and tested for dark mode across major clients as standard. If your current templates are losing conversions to dark mode rendering issues, we can fix them.

---

Related Excelohunt Services

Looking to implement these strategies with expert support?

• Email Design — learn how we implement this for clients Book a free strategy call with Excelohunt →