Dark Mode Preview

  • Updated

Many email clients now offer Dark Mode, which may automatically adjust colors in your message when the recipient views it in a dark-themed inbox. Use Dark Mode Preview in the Email Composer to see how your message adapts, ensuring your design stays readable and on-brand.

Quick Reference (Advanced Users) – Click to Expand
  • Open your email in the Email Composer.
  • Go to Review & Send → Preview.
  • Use the Dark Mode toggle (moon icon) on the right side of the Preview panel.
  • Check your logo, background colors, buttons, and text contrast.
  • Update the design as needed and preview again.
Try it like this: Open Preview, toggle Dark Mode, and look at your logo, header image, and CTA buttons. If any element disappears, loses contrast, or becomes difficult to read, return to Design, adjust your colors or background settings, and toggle Dark Mode again to confirm the fix.

Open Dark Mode Preview

  1. Open your email in the Email Composer.
  2. Click Review & Send in the upper right.
  3. Select Preview.
  4. In the preview panel, click the Dark Mode toggle.

Dark Mode Preview (new Email Composer) 01.png

The preview updates to simulate how your message may appear in a Dark Mode inbox.

What to check in Dark Mode Preview

Dark Mode can affect your design in several ways. Look for:

  • Logo visibility - light logos may disappear on darkened backgrounds.
  • Button contrast - some clients invert button colors or flatten gradients.
  • Text readability - ensure enough contrast is maintained in both modes.
  • Image transparency - PNGs with white or light-transparent edges may look jagged or disappear.
  • Background color shifts - email clients may override or invert your colors.
Tip: Add a subtle solid background color behind logos or white text to maintain readability in both light and dark environments.

How major email clients handle Dark Mode

Dark Mode behaviour varies widely, and your message may look different depending on the inbox used. Most major clients fall into these categories:

1. Clients that make no changes

Your message appears exactly as designed.

  • Gmail (Web)
  • Some versions of Apple Mail

2. Clients that make partial adjustments

These clients may darken text or lighten certain colors but keep most design choices intact.

  • Gmail (Mobile)
  • Outlook.com

3. Clients that perform full color inversion

These clients may invert backgrounds, text, and sometimes images - making Dark Mode testing essential.

  • Outlook on Windows (many versions)
  • Some iOS versions of Apple Mail

4. Clients with hybrid or inconsistent behaviour

Rendering may differ across OS versions, device types, and update levels.

Because of these differences, the Dark Mode Preview provides a helpful approximation but for client-specific rendering (e.g., Outlook Windows vs Outlook Mac), we recommend using Litmus Previews.

Adjust your design and preview again

After reviewing your Dark Mode preview:

  • Go back to Design.
  • Adjust text color, backgrounds, images, or CTAs.
  • Return to Preview → Dark Mode to check the update.

Was this article helpful?

Have more questions? Submit a request