Dark Mode Email Design: How to Stop Your Emails Breaking

You design an email. The colours are right, the logo looks perfect, every button is exactly where it should be and the whole thing gets approved.

Then somebody opens it in dark mode.

The background changes. Your logo disappears. Text loses contrast. A graphic suddenly has a mysterious white box around it and the carefully considered colour palette isn’t quite so carefully considered anymore.

Welcome to dark mode email design.

Dark mode isn’t simply a switch that turns white backgrounds black. Different email clients handle it in different ways, which means the same email can behave differently depending on where somebody opens it.

You can’t control every inbox perfectly. But you can design emails that are much better prepared for what dark mode is going to do to them.

What is dark mode in email?

Dark mode is a display preference that uses darker backgrounds and lighter foreground elements. You’ll find it across operating systems, websites, apps and email clients.

From an email-design perspective, the important part is what happens when an inbox decides your email needs to adapt to that darker interface.

Sometimes very little changes. Sometimes particular colours are adjusted. Sometimes the entire email is transformed. That’s where things get complicated.

Unlike a website, where you have relatively predictable control over the environment, an HTML email is being interpreted by different email clients, devices and operating systems — and they don’t all agree on how dark mode should work.

What does dark mode actually do to an email?

There’s no single answer because different email clients take different approaches.

Some environments leave the email itself largely alone. The surrounding interface becomes dark, but the content of your email stays relatively close to the original design.

Other clients make partial colour changes. They might identify particularly light areas and transform them while leaving other parts of the email untouched. A white background could become dark while another coloured section remains unchanged, creating combinations that were never part of the original design.

Then there are environments that apply much broader colour transformations, adjusting both backgrounds and foreground colours in an attempt to automatically create a dark-mode version of the email.

Sometimes the result remains perfectly readable. Sometimes it looks nothing like the design that was approved.

So the challenge with dark mode email design isn’t simply creating a second, darker version of an email. It’s creating something robust enough to deal with several different interpretations of what dark mode should be.

Which email clients change colours in dark mode?

This is where dark mode email gets particularly awkward: there isn’t one universal behaviour.

Different versions of Apple Mail, Gmail and Outlook can treat the same email differently, and support can change over time as the applications themselves are updated.

Some environments may retain your original email colours relatively faithfully. Others can make partial changes to backgrounds and text, while more aggressive implementations can transform a much larger proportion of the design.

The level of control available to email developers varies too. Certain environments support dark-mode targeting techniques, while others give you far less direct control over what happens.

That’s why the most useful approach isn’t memorising a permanent list of which client does what. Email-client support changes. Instead, understand the likely behaviours, know which environments matter to your audience and test them as part of your production process.

Why do emails break in dark mode?

Most dark-mode problems aren’t really random. They’re usually caused by a design decision that worked perfectly against one background but wasn’t prepared for that background to change.

A black logo on a transparent background is a classic example. On white, it looks perfect. If the email client turns the surrounding background black but leaves the image untouched, your logo effectively disappears.

The same thing can happen with icons, illustrations, dividers and decorative graphics.

Then there are colours. A subtle grey used for secondary text might have plenty of contrast against your original white background but become difficult to read after the client transforms the surrounding colours.

Dark mode exposes assumptions. If the design only works when every colour stays exactly as specified, it’s much more vulnerable when the inbox starts making decisions of its own.

Why does my logo disappear in dark mode?

Logos are one of the easiest dark-mode problems to understand because the issue is immediately visible.

Imagine a transparent PNG containing a black wordmark. Against a white email background, it works perfectly. Against a dark background, it can effectively disappear.

One solution is to give the logo enough visual separation to survive either environment. Depending on the brand and implementation, that might mean using a version designed to work against multiple backgrounds, incorporating a controlled background area, adding an appropriate outline or providing alternative assets where the email client supports dark-mode targeting.

There isn’t one solution that works for every identity. The important thing is to think about the problem before thousands of customers discover it for you.

Be careful with transparent images

The logo problem applies to much more than logos.

Product cut-outs, icons, diagrams and illustrations often use transparent backgrounds. If those assets contain dark edges or typography, changing the surrounding background can create unexpected results.

The reverse is true too. White elements designed for a dark section can disappear if the surrounding colour is transformed into something lighter.

When designing assets for email, look at the actual pixels inside the image rather than assuming the surrounding HTML background will always stay the same. The image might not change at all while everything around it does.

This is one of those relatively small considerations that can make a big difference to how robust the finished email feels across different inboxes.

Don’t rely on background colour for meaning

Colour is a powerful way to create hierarchy, but important information shouldn’t become understandable only because a particular background colour is present.

Imagine a pale button containing white text. If dark mode changes the button colour but not the text in the way you expected, the CTA could become difficult to read. The same applies to coloured sections, labels and information panels.

Your layout should still make sense if colours shift.

That doesn’t mean abandoning colour. It means making sure hierarchy is also supported by typography, spacing, structure and clear calls to action.

The more the email depends on one precise combination of colours to communicate, the more vulnerable it becomes when an email client starts transforming them.

Dark mode and email accessibility

Dark mode isn’t only a visual-design problem. It’s an accessibility consideration too.

Some people choose darker interfaces because they find them more comfortable to use. Others may have visual requirements that make contrast particularly important. That means an email that technically survives dark mode but becomes difficult to read still hasn’t done its job.

Text and important interface elements should maintain sufficient contrast against their backgrounds, including after colour transformations. WCAG guidance generally specifies a minimum contrast ratio of 4.5:1 for normal text and 3:1 for larger text, with enhanced requirements available for higher levels of accessibility.

WCAG guidance on colour contrast

But contrast ratios aren’t the only consideration. Avoid relying on colour alone to communicate meaning. Make links and calls to action identifiable, keep typography readable and be careful with subtle colour combinations that may become much harder to distinguish once dark mode changes them.

Accessibility and dark-mode resilience often point towards the same thing: design that doesn’t depend on everything being rendered exactly as it looked in Figma.

Can you control dark mode in email with CSS?

To an extent.

Email developers can use techniques such as prefers-color-scheme media queries to provide alternative styling when a supported email client detects dark mode.

For example, dark-mode CSS can specify an alternative background colour and text colour for supporting environments. There are also other client-specific techniques that can be used where appropriate.

But — and this is the important part — support isn’t universal.

Email development doesn’t have the consistency of modern web development. Something that works beautifully in one client doesn’t guarantee another client will respect it.

So CSS can improve the experience, but it isn’t a magic switch that gives you complete control over every inbox. Good HTML email development combines technical dark-mode treatment with a design that remains resilient even when those controls aren’t available.

Should you create separate light and dark email designs?

Usually, you don’t need two completely independent emails.

A better approach is to understand how the core design behaves in different environments and identify the elements that genuinely need alternative treatment.

That could include logos and icons, background and text colours, buttons, decorative graphics and product imagery. These are the areas where a change to the surrounding environment is most likely to affect the original design.

Designing with both environments in mind from the beginning is generally much easier than completing an entire email and trying to retrofit dark-mode fixes afterwards.

Dark mode email design is less about creating a completely separate design and more about making deliberate decisions around the elements most likely to change.

Dark mode and brand colours

This is where things become particularly interesting for brand teams.

You’ve spent years establishing exact colours. Then an inbox changes them.

Absolute colour consistency isn’t always possible in email. Different displays already reproduce colour differently, and dark mode introduces another layer of interpretation.

The aim should therefore be to preserve the character, readability and hierarchy of the brand experience, even where exact colour values can’t be guaranteed.

That might mean choosing combinations that remain recognisable when transformed, protecting important brand assets and testing key colours rather than assuming they’ll remain untouched.

Email design is often an exercise in controlled compromise. Dark mode is a very good example of that.

What about dark mode in Outlook?

Outlook deserves special attention because there isn’t one Outlook environment.

Different versions exist across Windows, macOS, web and mobile, and they don’t necessarily render HTML email or dark mode in exactly the same way.

So saying “We tested it in Outlook” isn’t always enough.

Which Outlook? Which operating system? Which version?

That’s one reason proper email QA involves testing relevant combinations of clients and devices rather than opening the build in one inbox and calling it done.

We cover the wider issue in our guide to why HTML emails look different in Outlook, including the differences between classic Outlook, new Outlook and other Outlook environments.

How should you test emails for dark mode?

Start with the environments that matter to your audience. If your email analytics show that a significant proportion of subscribers use particular devices or email clients, those deserve particular attention.

Then check the elements most likely to cause problems.

Look at your backgrounds and whether they’ve changed unexpectedly. Check that typography remains readable and logos are still visible. Pay particular attention to transparent images, buttons, borders and dividers because they can depend heavily on the colours surrounding them.

You should also look at whether brand colours have been transformed into awkward combinations and whether the resulting design still provides sufficient contrast and a clear hierarchy.

Testing isn’t about forcing every inbox to look pixel-for-pixel identical.

It’s about making sure the email remains usable, readable and recognisably yours.

Dark mode should be part of the design process

The easiest time to solve a dark-mode problem is before development begins.

If designers understand how email clients might transform the creative, they can make better decisions around imagery, transparency, colour and hierarchy from the start.

Developers can then add appropriate dark-mode treatments where they’re supported instead of trying to rescue a design that fundamentally depends on a white background.

That’s why we don’t see email campaign design and development as completely separate disciplines. The best results happen when each understands the limitations of the other.

A designer who understands the inbox can make better creative decisions. A developer who understands the design intent can make better decisions about fallbacks and implementation.

How Email Squad approaches dark mode email design

At Email Squad, we design emails for the place they’re actually going to end up: the inbox.

That means thinking beyond how the approved design looks in Figma and considering how it will behave across different screen sizes, email clients and display settings.

Dark mode is part of that process.

We consider vulnerable assets during design, add appropriate treatments during development and test the finished email rather than simply hoping every inbox behaves itself.

Because your customer doesn’t see the Figma file. They see the email that arrives.

If your emails look perfect in one inbox and unpredictable everywhere else, our Email Campaign Design and HTML Email Development services can help bridge the gap between approved creative and the thing your customers actually receive.

Want your emails to survive the real world? Start a project and send us the design, existing template or problem you’re trying to solve. We’ll help make sure it works beyond the artboard.