Designing Dark Mode Emails in Figma

Dark mode in email is not one feature. It is three different client behaviours with the same name, and knowing which you are dealing with is most of the work.

The three behaviours

No change. Some clients render your email as authored regardless of the system theme. Your light email stays light, surrounded by dark client interface. This is the easiest case and it looks fine.

Partial inversion. The client adjusts some colours — typically backgrounds and text — using its own logic. This is where most of the damage happens, because the adjustments are made in isolation. A dark logo can end up on a dark background. A black-on-white table becomes white-on-dark except for one cell with an explicit background.

Full inversion. The client aggressively remaps the whole palette. Your careful tonal hierarchy is replaced by the client's interpretation of it.

You cannot detect which behaviour a reader's client uses, and you cannot opt out reliably. So the goal is not control — it is designing something that survives all three.

What actually survives

Logos and images with transparency. A dark logo on a transparent background disappears against a dark background. The fixes, in order of reliability:

1. Give the logo image its own light background colour baked in, so it always sits on a light patch.
2. Provide a light-on-dark variant and swap it with a media query — works in some clients, ignored in others.
3. Use a logo that reads on both, if the brand allows it.

The first option is the least elegant and the most reliable.

Pure black and pure white. Both invert badly and produce harsh results. A near-black (#1A1A1A) and a near-white (#FAFAFA) survive inversion more gracefully and look better anyway.

Product photography on white. This is the most common dark mode failure in ecommerce email: a product shot with a white background becomes a bright rectangle floating in a dark email. Options are to shoot on a neutral mid-tone, to mask the background out, or to accept it and give the image a deliberate light container so it reads as a framed image rather than an error.

Borders and dividers. Light grey rules vanish entirely on dark. Use a border colour with enough contrast against both light and dark, or use spacing instead of rules — which is usually the better design anyway.

Designing it in Figma

Set up two frames and a variable collection with two modes.

Variables with a light and a dark mode for every semantic colour: bg/page, bg/surface, text/primary, text/muted, action/default, border/subtle. Switching the frame's mode shows the dark version instantly, which makes the design decisions visible rather than theoretical.

Two frames side by side, light and dark, both approved. Not because you control which one renders, but because seeing the dark version tells you which elements are fragile.

A third frame worth drawing: partial inversion. Take the light frame, invert only the background and body text, and leave images, buttons and any element with an explicit background as they are. This approximates the worst common case and it is where you find the dark logo on a dark background.

Designing dark-first

Some emails should be dark by intent rather than by inversion — Halloween sends, premium product launches, anything in a category where dark reads as considered.

Designing dark from the start changes several things:

• Body copy needs slightly more line height and often slightly more weight. Light text on dark appears thinner than the reverse at the same weight.
• Contrast has to be checked in the other direction. Mid-grey text that passed on white frequently fails on near-black.
• Buttons need to be lighter than the background, not another dark tone. A saturated accent on a dark field can have less contrast than it appears.
• Photography needs to be selected for it. Bright, high-key imagery on a dark layout reads as a mistake unless it is deliberately framed.

The Halloween collection has designs built dark from the start, with these adjustments already made.

The mechanisms, briefly

You cannot control dark mode, but there are three levers worth knowing about because they determine how much of the inversion you can steer.

The colour-scheme meta declarations. Declaring support for both light and dark schemes signals to some clients that your email has been authored deliberately, which in those clients reduces how aggressively they remap your palette. Apple Mail and iOS Mail respect this; Outlook.com largely does not.

The prefers-color-scheme media query. Where supported, this lets you supply genuinely different values — a light-on-dark logo, a different background, adjusted border colours. Support is good in Apple Mail, iOS Mail and some webmail, and absent in desktop Outlook and inconsistent in the Gmail apps. Treat anything inside it as an enhancement, never as load-bearing.

Baked-in backgrounds on images. The crudest lever and the most reliable one. An image whose own background is part of the asset cannot be inverted, because the client is not editing pixels.

The practical consequence for a designer: assume the media query will not fire for a large share of readers, and make the default palette one that survives inversion on its own. Anything the query provides is a bonus for the readers whose clients honour it.

What to hand the developer

Dark mode is one of the areas where a Figma file most under-specifies the build, so state explicitly:

• Whether the email should adapt to dark mode or resist it.
• The dark-mode value for every semantic colour, if adapting.
• Any light-on-dark logo or icon assets, exported.
• Which images have baked backgrounds and which are transparent.
• The near-black and near-white hex values you chose, so the developer does not substitute pure values.

Testing

There is no substitute for looking:

• iOS Mail in dark mode — the most common mobile case.
• Apple Mail on desktop in dark mode.
• Gmail app in dark mode on both platforms — its behaviour differs from the web client.
• Outlook.com in dark mode, which inverts aggressively.

Check specifically: is the logo visible, are buttons distinguishable, has any text become low contrast, and do product images look intentional.

Common failures, ranked by frequency

In roughly the order they appear when auditing an existing programme:

A dark logo on a transparent background. The most frequent and the most visible, because it sits at the top of every email. Baking a light background into the asset fixes it everywhere at once.

Product photography on pure white. Becomes a bright block in a dark layout. Affects ecommerce programmes almost universally.

Light grey borders and dividers vanishing. Rarely fatal, but it collapses the visual structure of a layout that relied on rules to separate sections.

Mid-grey secondary text failing contrast. Text that passed at 4.6:1 on white can fall below 3:1 on near-black. Secondary and caption text is where this bites.

Buttons losing distinction. A dark-toned accent on an inverted dark background can end up with almost no contrast against it.

Pure black text becoming pure white. Harsh, and it makes body copy look thinner than intended, which is why near-values are worth adopting as a default rather than as a dark-mode accommodation.

A practical checklist

• Near-black and near-white instead of pure values
• Logo with a baked light background, or a dark variant supplied
• No text baked into images
• Borders with contrast against both light and dark, or spacing instead
• Buttons that stay distinguishable when the background inverts
• Product imagery that does not become a floating white rectangle
• Contrast checked in both directions
• Tested in at least iOS Mail and one aggressive inverter

Applying it

The templates in this library use near-black and near-white values and avoid text in images, which covers the two most common inversion failures. For designs built dark by intent rather than by adaptation, start with Halloween; for the surrounding type and contrast decisions, see email typography.