Dark-Mode Email Previewer

More than half of all email opens now happen in dark mode, yet email clients treat dark themes completely differently—from selective background inversions in Outlook.com to forced full-color flips in Gmail on Android. This free dark-mode email previewer renders your HTML email under realistic client rendering engines, audits contrast ratios, identifies invisible logos, and generates bulletproof dark-mode CSS fixes. Everything runs client-side in your browser, keeping your campaign drafts private.

<!-- Dark Mode Meta Tags -->
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<style>
  :root {
    color-scheme: light dark;
    supported-color-schemes: light dark;
  }
  @media (prefers-color-scheme: dark) {
    .email-bg { background-color: #121418 !important; }
    .email-text { color: #f0f4f8 !important; }
    .dark-img { filter: drop-shadow(0 0 1px #ffffff) drop-shadow(0 0 2px #ffffff); }
  }
  [data-ogsc] .email-bg { background-color: #121418 !important; }
  [data-ogsc] .email-text { color: #f0f4f8 !important; }
  [data-ogsc] .dark-img { filter: drop-shadow(0 0 1px #ffffff) drop-shadow(0 0 2px #ffffff); }
</style>

What is a dark-mode email previewer?

A dark-mode email previewer is a specialized email rendering and audit tool designed to test how HTML marketing emails, automated drip sequences, newsletters, and transactional messages appear on devices running dark color schemes. Unlike standard web pages, which render in modern web browsers with full CSS support, emails are processed by dozens of competing email clients—such as Microsoft Outlook, Apple Mail, and Gmail—each applying completely different, proprietary color inversion algorithms.

When a recipient opens your campaign in dark mode, their email client may leave your HTML untouched, invert only light backgrounds, or force a complete color transformation across every background, border, and text element. This previewer simulates those varying inversion engines, calculates real-time WCAG 2.2 color contrast ratios, detects transparent PNG logos that risk vanishing into darkness, and generates ready-to-paste CSS fixes that protect your email designs.

Why dark mode breaks HTML emails: the three rendering engines

Email client dark mode implementations fall into three distinct algorithmic categories. Understanding which client uses which engine is essential for diagnosing rendering bugs before you send:

How to use this dark-mode previewer and audit tool

1. Paste your HTML email template: Insert your raw email markup into the primary input area. You can paste complete HTML documents, table snippets, or inline-styled promotional blocks.
2. Select your target simulation engine: Choose between Partial Invert (Outlook.com & Outlook Mobile), Full Invert (Windows Outlook & Gmail Android), or Native Dark (Apple Mail).
3. Inspect the dual simulated reading pane: Compare the Light Mode original directly against the Dark Mode simulation. Use the Split view toggle to switch between a side-by-side comparison and a focused dark-mode preview.
4. Review the Dark Mode Compatibility Score: Check your overall score out of 100, your letter grade (A through F), and the 4 category breakdown meters: Contrast & Readability, Color Inversion Safety, Images & Transparency, and Dark Mode Meta & CSS.
5. Examine the Audit Findings: Address any items tagged FIX or WATCH. These pinpoint low-contrast text elements, disappearing logos, and missing meta tags.
6. Test the Logo Glow fix: Click Preview logo glow to visually test whether adding a white drop-shadow filter resolves disappearing transparent logos.
7. Copy generated fixes: Click Copy Dark Mode CSS to copy the tailored <meta> and <style> block directly into your email template.

How the dark-mode compatibility score is calculated

The Dark Mode Compatibility Score provides an objective 0–100 metric based on four weighted categories. The scoring heuristic penalizes code patterns known to fail across email rendering engines:

The 5 most common dark-mode email bugs and how to fix them

1. The disappearing transparent logo

When you place a transparent PNG logo with black or dark lettering on a white background, it looks crisp in light mode. But when Outlook or Apple Mail inverts that white background into dark slate, the dark pixels of your logo remain unchanged—making your brand name completely invisible.

The Fix: Add a subtle, semi-transparent white drop-shadow filter to your logo. In light mode against a white background, the white glow is completely invisible. In dark mode, the glow appears automatically, creating an elegant outline that keeps your logo readable:

.dark-img {
  filter: drop-shadow(0 0 1px #ffffff) drop-shadow(0 0 2px #ffffff);
}

2. The jarring white box artifact

Exporting JPG product photos or promotional banners with white backgrounds creates jarring "white boxes" floating inside dark mode reading panes. While the text and table cells around the image invert into dark slate, the JPG remains a glaring white rectangle.

The Fix: Always export logos and product cutouts as transparent PNGs or SVGs with clean alpha channels, or enclose product imagery inside a dedicated light-colored container card with consistent border-radii so the framing feels intentional.

3. Washed-out muted gray text

Many email designers use light or secondary gray shades (such as #94A3B8 or #888888) for footers, timestamps, or disclaimers. In light mode, these meet the minimum contrast against white. However, when inverted by email engines into mid-gray on dark slate, the contrast ratio frequently collapses to 2:1 or lower, rendering legal text completely illegible.

The Fix: Use high-contrast base colors (such as #0B1F3A or #334155) and define explicit dark mode color overrides using @media (prefers-color-scheme: dark):

@media (prefers-color-scheme: dark) {
  .email-muted {
    color: #E2E8F0 !important;
  }
}

4. Inverted dark sections in Windows Outlook

If your light-mode email design features an intentional dark navy footer or black promotional banner, Microsoft Outlook 2019 and 365 on Windows will forcefully invert that dark section into bright white or light gray. This destroys visual hierarchy and makes white footer text invisible.

The Fix: Use Microsoft Office conditional comments (MSO) to serve a fallback background image or gradient, which Outlook's Word engine cannot easily invert:

<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;">
<v:fill type="tile" color="#0B1F3A" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<!-- Email Content Here -->
<!--[if mso]>
</v:textbox>
</v:rect>
<![endif]-->

5. Email clients ignoring dark mode media queries

Apple Mail, iOS Mail, and Outlook.com will often ignore your @media (prefers-color-scheme: dark) styling entirely if your HTML document header lacks explicit color-scheme declarations.

The Fix: Include both standard and WebKit meta tags in your document <head>, paired with the :root CSS declaration:

<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<style>
  :root {
    color-scheme: light dark;
    supported-color-schemes: light dark;
  }
</style>

Copy-paste dark-mode email starter template

Use this bulletproof baseline template for your newsletters, marketing campaigns, and transactional emails. It includes all required meta declarations, media queries, and Outlook-specific fallback selectors:

<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="color-scheme" content="light dark">
  <meta name="supported-color-schemes" content="light dark">
  <title>Bulletproof Dark Mode Email</title>
  <style>
    :root {
      color-scheme: light dark;
      supported-color-schemes: light dark;
    }
    /* iOS & Apple Mail Dark Mode */
    @media (prefers-color-scheme: dark) {
      .email-bg { background-color: #121418 !important; }
      .email-card { background-color: #1e2229 !important; border-color: #334155 !important; }
      .email-heading { color: #f8fafc !important; }
      .email-text { color: #e2e8f0 !important; }
      .email-muted { color: #94a3b8 !important; }
      .dark-img { filter: drop-shadow(0 0 1px #ffffff) drop-shadow(0 0 2px #ffffff); }
    }
    /* Outlook.com & Outlook Android Dark Mode */
    [data-ogsc] .email-bg { background-color: #121418 !important; }
    [data-ogsc] .email-card { background-color: #1e2229 !important; border-color: #334155 !important; }
    [data-ogsc] .email-heading { color: #f8fafc !important; }
    [data-ogsc] .email-text { color: #e2e8f0 !important; }
    [data-ogsc] .email-muted { color: #94a3b8 !important; }
    [data-ogsc] .dark-img { filter: drop-shadow(0 0 1px #ffffff) drop-shadow(0 0 2px #ffffff); }
  </style>
</head>
<body class="email-bg" style="margin: 0; padding: 24px; background-color: #f8fafc; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
    <tr>
      <td align="center">
        <table role="presentation" class="email-card" width="100%" cellpadding="0" cellspacing="0" style="max-width: 600px; background-color: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 32px;">
          <tr>
            <td align="center" style="padding-bottom: 24px;">
              <img src="https://via.placeholder.com/180x48/0B1F3A/ffffff?text=BRAND+LOGO" alt="Company Logo" width="180" height="48" class="dark-img" style="display: block; border: 0;">
            </td>
          </tr>
          <tr>
            <td>
              <h1 class="email-heading" style="margin: 0 0 16px; font-size: 22px; font-weight: 700; color: #0b1f3a; text-align: center;">Welcome to Seamless Dark Mode</h1>
              <p class="email-text" style="margin: 0 0 24px; font-size: 15px; line-height: 1.6; color: #334155;">This email renders cleanly whether your subscribers read in bright sunlight or under low-light dark themes.</p>
              <table role="presentation" cellpadding="0" cellspacing="0" style="margin: 0 auto;">
                <tr>
                  <td align="center" style="background-color: #2563eb; border-radius: 4px;">
                    <a href="#" style="display: inline-block; padding: 12px 28px; font-size: 14px; font-weight: 600; color: #ffffff; text-decoration: none;">Get Started Now</a>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>

Limitations of browser-based email simulation

While this tool provides accurate client-side simulation of color conversions, contrast ratios, and transparent asset interactions, browser-based emulation has inherent limitations:

• Proprietary client rendering engines: Desktop Outlook on Windows uses the Microsoft Word rendering engine (MSO), which handles margins, padding, and VML objects in ways that standard web browser DOM engines cannot replicate natively.
• OS-level dark mode overrides: Android and Samsung devices frequently offer aggressive "force dark mode" developer settings that invert images and custom SVG graphics regardless of declared email CSS.
• Physical device testing: Browser simulation is ideal for pre-flight testing and spotting contrast bugs early, but mission-critical enterprise campaigns should still receive a final physical send test on iOS Apple Mail and Windows Outlook.

Frequently asked questions

Does dark mode affect email deliverability or spam scores?

Dark mode rendering itself does not trigger spam filters or alter sender reputation. However, poor dark mode formatting can dramatically reduce click-through rates and drive unengaged subscribers to hit the "Mark as Spam" button if illegible copy or broken logos make your message look like a phishing attempt.

Why does Gmail on Android invert my colors when Gmail on iOS does not?

The Gmail app on iOS relies on Apple's WebKit rendering engine, which natively respects dark mode standards and allows authors to preserve light styling. The Gmail app on Android uses a proprietary Google rendering pipeline that forcefully inverts colors based on the operating system's system-wide dark theme.

Can I turn off dark mode completely for my email?

No. Major email clients do not allow senders to disable dark mode because doing so would override the recipient's explicit visual preference and accessibility settings. The best practice is to design resilient HTML that looks intentional in both light and dark environments.

What is the minimum WCAG contrast ratio for dark mode email copy?

Under WCAG 2.2 Level AA guidelines, standard body text (under 18pt or under 14pt bold) requires a contrast ratio of at least 4.5:1 against its background. Large headings and primary interactive button borders require at least 3:1.

How do I test local image paths in this previewer?

When you reference local filenames like logo.png in your HTML code, modern browser security prevents local file system access. The previewer automatically detects image dimensions and alt tags, rendering placeholder geometry and transparent boundaries so you can inspect contrast and sizing immediately.

What does the [data-ogsc] attribute do?

The [data-ogsc] (Outlook Global Style Class) attribute is a targeted CSS selector introduced by Microsoft Outlook for webmail and mobile apps. When Outlook inverts an email, it wraps the message in a container with this attribute, allowing developers to target precise color overrides specifically for Outlook clients.