How to Test Email Dark Mode Before You Send

Dark mode is now a default setting for a significant portion of email users — Apple Mail, Gmail, and Outlook all support it, and each handles dark mode HTML email differently. An email that looks correct in light mode can have invisible text, broken colors, and washed-out images in dark mode.Email Viewer lets youtest email dark modeacross multiple client simulations with a single toggle — no sending, no real device required.

How email clients handle dark mode

Dark mode in email is not a single standard. Each client uses a different approach, and understanding them helps you write CSS that handles all three:

• Full color inversion (Gmail web and Android).Gmail automatically inverts light backgrounds to dark and dark text to light. This works reasonably well for simple emails, but images with white backgrounds get a dark border, brand colors shift, and complex designs often look unintended. You cannot fully prevent Gmail's inversion; you can only minimize damage.
• Designed dark styles —prefers-color-scheme.Apple Mail, Outlook (Mac), and some versions of Gmail support the@media (prefers-color-scheme: dark)CSS responsive rule. If you provide explicit dark mode styles inside this responsive rule, the client uses them instead of auto-inverting. This gives you full control — but requires more work.
• No dark mode (some Outlook versions).Some Outlook builds do not change the email appearance in dark mode — the email always shows with its original colors, which can look very bright on a dark system.

How to test dark mode in Email Viewer

1. OpenEmail Viewer on ToolsViewer.
2. Paste your email HTML orconvert from MJML.
3. Select a client profile from the toolbar — Gmail, Outlook, Apple Mail, Yahoo, or Standard.
4. Use thelight / darktoggle in the preview toolbar to switch between modes. The preview updates to show the simulated dark mode showing for the selected client.
5. ClickAdd deviceto open a second preview panel, set one to light mode and one to dark mode, and compare them side by side.
6. Check all client profiles that your audience uses. Dark mode behavior differs significantly between Gmail and Apple Mail.

What the dark mode simulation covers

Email Viewer's dark mode toggle simulates the showing behavior for each client profile:

• Gmail-style inversion— Email Viewer applies Gmail's auto-invert behavior so you can see which elements get inverted and plan adjustments accordingly.
• Designed dark styles— if your email includes a@media (prefers-color-scheme: dark)block, Email Viewer applies it when the dark toggle is active, showing your intended dark mode design.
• Both together— for clients that both invert and apply responsive rules, you can see the combined result.

Practical tips for dark mode email design

Based on common showing issues, here are the changes that make the biggest difference:

• Add a@media (prefers-color-scheme: dark)block.Even a basic block with a dark background color and light text gives the client something better than pure inversion to work with. Start withbackground-color: #1a1a1aandcolor: #fffffffor the main container.
• Avoid pure white on pure black.High-contrast combinations are harsh in dark mode. Use off-white text (#e0e0e0) on a dark but not pure-black background (#1e1e1eor#2c2c2e).
• Provide dark backgrounds for image containers.If your email has a white-background image (like a logo on a white card), the auto-invert will make the white background dark, leaving your logo on a dark surface. Either export the image with a transparent background, or add a forced white background to the container that overrides inversion.
• Do not rely on gradient backgrounds.Gradients that transition from light to white look fine in light mode but can appear very light or broken in Gmail's auto-invert mode. Use solid color backgrounds where dark mode matters.
• Test your CTA buttons.Brand-colored buttons (blue, green, orange) typically survive inversion reasonably well, but text color on inverted buttons can become hard to read. Check button text contrast in dark mode.
• Usedata-ogscand Outlook meta tagsfor Outlook-specific overrides if your audience uses Outlook for Windows on dark mode.

Testing dark mode as part of your pre-send workflow

Dark mode testing should be part of your standard pre-send routine alongside light mode review, mobile layout checks, and the QA checklist. The pre-send email QA checklist in Email Viewer includes a dark mode item for exactly this reason.

A good sequence: preview in light mode first, fix any layout issues, then toggle to dark mode and check the same screens. UseAdd device to compare light and dark side by side without toggling back and forth.