Skip to main content

Dark mode preview

About a third of email opens happen with dark mode on, and email clients do not agree on what dark mode means. Some leave your email alone, some apply the dark styles you wrote, and some repaint the email themselves. The colour scheme menu in the preview lets you see each of those outcomes before you send.

You find it next to the Desktop / Mobile toggle on the Overview, Feedback and Review tabs of the Campaign Workspace, and in the preview window of the Design System Editor. Press ⌘/Ctrl+Shift+D to cycle through the options.

The colour scheme menu open above the Review tab preview, listing Light, Dark, Forced dark partial and Forced dark full

The menu changes how the preview is shown. It never changes the email you export or sync.

Why there are four options​

Email clients fall into three camps when the reader has dark mode on:

What the client doesClientsPreview option
Nothing. Only the app around the email goes dark.Gmail on the web, Yahoo, AOLLight
Applies the dark styles the email itself carriesApple Mail on Mac and iPhone, Outlook for Mac, Samsung EmailDark
Repaints the email with its own algorithm, keeping dark areasGmail on Android, the Outlook apps on iPhone and Android, Outlook.comForced dark, partial
Repaints the email with its own algorithm, flipping everythingGmail on iPhone, Outlook for WindowsForced dark, full

Gmail is the reason the last two rows exist. It ignores any dark styles you write and recolours the email itself, and its Android and iPhone apps do it differently.

The four options​

The same campaign under Light, Dark, Forced dark partial and Forced dark full

Light​

The email as you built it, with dark mode off. This is also what most web clients show even when the reader's app is dark.

Dark​

The email's own dark styles, the way Apple Mail and Outlook for Mac show them. In the example above, the Design System swaps in a light logo mark and its own dark palette; both come from its dark block, and neither happens in the two forced options, where the dark mark simply disappears.

This option only does something when the Design System declares dark mode support: a <meta name="color-scheme" content="light dark"> tag in the head plus an @media (prefers-color-scheme: dark) block. That is Apple Mail's own rule. Without the meta tag Apple Mail leaves the email exactly as it is in Light, so the preview does the same and shows a notice instead.

The preview under Dark with a notice saying the Design System declares no dark mode styles

If your Design System shows that notice, Support dark mode explains what to add.

Forced dark, partial​

What Gmail on Android and the Outlook apps do. Light backgrounds are darkened and dark text is lightened, while areas that were already dark stay as they are. Photos and other images are never touched, so a dark logo on a transparent background disappears into the dark canvas. That is the single most common dark mode failure, and this is the option that shows it.

Forced dark, full​

What Gmail on iPhone and classic Outlook for Windows do. Every colour is flipped in lightness, so a dark header comes out light and a light body comes out dark. Designs that were built dark on purpose come out light here.

The difference between the two forced options is easiest to see on an email that mixes dark and light areas. This statement email has a dark header and footer around a white body, and no dark styles of its own, so Dark leaves it alone. Forced dark, partial keeps the dark bands and darkens the body. Forced dark, full flips the bands light as well.

A statement email with a dark header and footer under Light, Dark, Forced dark partial and Forced dark full

How the emulation works​

This section is for the email developers on your team. The preview is an approximation, as every dark mode simulator is, but it is built on the documented and observed behaviour of the clients rather than on a generic "invert" filter.

Dark does not alter the email's HTML. It takes the @media (prefers-color-scheme: dark) rules already in the email and makes them apply regardless of your operating system, then sets color-scheme: dark on the document so light-dark() colours and default text resolve the way Apple Mail resolves them. Two details follow Apple Mail's observed behaviour: it applies only when the color-scheme meta is present, and backgrounds that are still pure #ffffff after your dark rules are darkened, because Apple Mail inverts pure white when the meta is declared.

Forced dark, partial follows the algorithm in Chromium's force-dark mode, which is what Gmail on Android runs (the app renders email in an Android WebView with user-agent darkening on, which is also why prefers-color-scheme never applies there). For every element the preview reads the computed colours and then:

  • lightens text and border colours whose brightness is below 150 on a 0 to 255 scale;
  • darkens background colours whose brightness is above 205;
  • leaves everything in between alone, which is why mid-tone brand colours survive;
  • flips lightness in CIELAB and keeps the a and b channels, so hue is preserved rather than complemented;
  • never touches <img> elements;
  • recolours the stops of gradient backgrounds, because Gmail on Android breaks the gradient trick that senders use to protect a colour;
  • paints a dark canvas behind the email when the html and body are transparent.

Forced dark, full runs the same pass without the thresholds, so every colour flips. Gradient backgrounds are left alone here, because Gmail on iPhone honours them. The published observation behind this profile is hteumeuleu's sample of Gmail on iPhone turning #663399 into a lighter purple of the same hue: a lightness flip, not an RGB inversion.

What the preview cannot show​

  • It is an approximation. Google has never published Gmail's algorithm. The partial profile matches Chromium's defaults and what the email community has measured, but Gmail's app versions differ from each other, and in August 2026 Google marked its long-standing prefers-color-scheme issue as fixed without saying what changed. When Gmail's behaviour is confirmed, the client names in the menu will be updated.
  • Client sanitisers are not modelled. Outlook.com strips <style> blocks it does not like and Gmail strips more for non-Google accounts. The preview shows colour handling, not what a client removes.
  • Outlook.com's contrast repair is not modelled. Outlook on the web and in the apps only recolours text that falls below a 4.5:1 contrast ratio against its dark background, and exposes the originals through data-ogsc and data-ogsb attributes you can target. The partial profile is close but not identical.
  • Images are never recoloured. Gmail may invert very small icons; the preview does not.

For real renders in real clients, use Client Previews on the Review tab. The colour scheme menu is the fast check while you work; Client Previews is the proof before an important send. See Review & testing.