Preview generators
Email dark mode preview
Render your email HTML side by side with a forced dark-mode transform to catch inverted logos, vanished grays, and broken image text before sending.
The dark pane is an approximation: each client uses its own color transform, not a CSS filter, and none of them publish it. What transfers is the failure pattern, not the exact pixels. Clients that respect your own dark styles (Apple Mail, some Outlook builds) will use your prefers-color-scheme rules instead, which this pane does not simulate.
If the dark pane broke, here is the fix
The image has a baked-in white or dark background. Re-export it as a transparent PNG or SVG that reads on both light and dark, or use an outlined variant.
Mid-gray text (#999 and lighter on white) lands close to the flipped background's tone. Darken it toward #555 or stronger so it keeps contrast in both directions.
Move the words out of the image and into HTML. Text baked into images either inverts with the image or does not, and it is wrong either way.
Give the button an explicit background color and an explicit text color on the same element. Inherited colors are what the transforms remap unpredictably.
Declare a background color on every table cell rather than letting cells inherit. Partial transformers key off declared colors, and an undeclared cell gets guessed.
Add classes like these to your template and adjust the palette. Forced inverters ignore the media query, which is why the fixes above still matter; this snippet upgrades the experience where the client cooperates.
Instructions
How to use this tool
- 01Paste your email HTML, or start from the sample to see what the transform does to a typical transactional layout.
- 02Compare the two panes. The top one is your email as sent; the bottom one approximates the forced inversion Gmail's apps and Outlook apply to light emails.
- 03Look for the classic failures: a logo with a baked-in white box, gray text that lost its contrast, and text inside images that flipped illegibly.
- 04Fix in the HTML, not the preview: transparent-background logos, sufficient contrast in both directions, and real text instead of text in images.
Background
The three dark modes email clients actually have
Clients split into three behaviors. Some, like Apple Mail, leave your email alone unless you ship your own prefers-color-scheme styles, in which case they honor them. Some apply a partial transform that darkens light backgrounds and adjusts text. And some, notably the Gmail apps and Outlook, force a full color inversion on light emails whether you designed for it or not.
The forced inverters are where designs break, because the transform is proprietary, undocumented, and applied without your CSS having a say. The pane in this tool approximates that class of client. It will not match any client pixel for pixel, and nothing that runs outside those clients can, but the failures it surfaces are the same ones they produce.
Background
What breaks, and the fixes that survive every client
The most common casualty is the logo exported as dark art on a white rectangle: inverted, it becomes a light box with a hole in it. The fix is a transparent PNG or SVG that reads on both light and dark, or a pale outline version. Second is gray-on-white body text: mid-grays that were tastefully subtle on white land near the flipped background's tone and vanish. Keep body text contrast strong in both directions. Third is text baked into images, which inverts with the image or does not, and is wrong either way; keep words in HTML.
Where you can influence clients that respect author styles, ship a dark variant: a prefers-color-scheme media query, and for broader coverage keep backgrounds explicit on every table cell rather than inherited, since partial transformers key off declared colors.
FAQ
Frequently asked questions
Why does my logo look wrong in dark mode?
Almost always because it is dark artwork on an opaque white rectangle. Forced dark mode inverts the rectangle into a glaring box. Export the logo with a transparent background and enough contrast to read on both light and dark, or use an outlined variant.
Can I stop Gmail or Outlook from inverting my email?
Not reliably. The transforms are proprietary and there is no honored opt-out, so the durable strategy is designing to survive inversion: transparent images, strong text contrast, and no critical information carried by color alone.
How accurate is this preview?
The dark pane is an approximation of the forced-invert class of client, built with a CSS inversion. Real clients use their own undocumented color transforms, so treat this as a way to catch the failure patterns, and confirm on real devices or a rendering service before a high-stakes send.
Should I ship prefers-color-scheme styles in email?
Yes, as a progressive enhancement. Apple Mail and some other clients honor them and will use your intentional dark palette instead of guessing. The forced inverters ignore them, which is why the baseline design still has to survive inversion on its own.
More tools
Browse more free tools
Design emails once, deliver them everywhere
Courier's Design Studio builds responsive emails with reusable brand elements, so what you tested is what every recipient gets.
Explore Design Studio