Dark Mode Preference Checker

Dark Mode Support Across Email Clients and Environments

Email Client Night-Theme HTML Rendering Breakdown

No area of web development is more fragmented than night-theme email HTML rendering. Each major email client applies its own distinct algorithm — there is no standard, which is why the same HTML email can look completely different depending on where it is opened. Here is how each supported client handles the color transformation, relevant to color science and what the dark mode preference checker reveals: A quick pass through the screen orientation checker catches issues before they become real problems.

• Gmail Android: Uses CIELAB L* inversion with brightness thresholds. Dark text (perceived brightness below 150) is inverted; light backgrounds (brightness above 205) are inverted. Mid-range colors are left untouched. This is the same algorithm used by Android WebView's force-dark mode, making the Gmail Android app's output predictable but selective.
• Gmail iOS: Applies full CIELAB L* inversion to all colors unconditionally — the most aggressive transformation of any major client. No brightness threshold filtering. Every color in your HTML email is inverted, including colors that the Gmail Android client would leave alone. This means the Gmail iOS app can dramatically shift even carefully chosen brand colors.
• Outlook.com / iOS / Android: Runs a fixContrast algorithm (the fixContrast() function) rather than blanket inversion. It first checks the tonal ratio against the WCAG 4.5:1 standard. If the ratio is insufficient for legibility, it uses CIELAB L* to push colors toward a readable extreme. This makes Outlook.com the most accessibility-conscious of the major email clients — but it also means colors can shift unexpectedly when they fall near the threshold.
• Outlook Windows: Uses CIELAB lightness inversion with the formula (target − L) × 0.82, where the target L* is 117 for most colors or 127 for reddish-neutral hues. Highly vivid greens receive an additional a* shift to prevent the muddy output that naive inversion would produce. The Outlook Windows desktop client's output is thus more nuanced than a simple flip, and results can differ visibly from other clients even starting from the same email colors.
• Apple Mail: Performs a pure black swap and pure white swap first, then applies HSL lightness inversion (l = 1 − l in the hue-saturation-lightness formula) to colors that are very bright or very dark. Critically, Apple Mail fully respects the color-scheme meta tag — if you declare <meta name="color-scheme" content="light dark">, Apple Mail will not apply automatic inversion, letting your explicit styles take full control. Apple users represent a significant portion of mobile email opens, so this support is valuable.
• Samsung Mail: Uses the same Android WebView force-dark engine as the Gmail Android app for its CIELAB color inversion. It also respects the color-scheme meta tag. However, Samsung Mail adds an additional layer: auto-fit scaling behavior driven by AutoFit.js, sourced from the Samsung APK via decompiled source analysis. This scaling layer creates unique layout problems described below.

Keeping Email Colors Readable in Both Light and Inverted Environments

Working to ensure readability of your email colors in any mode requires understanding which clients will transform them and which will respect your explicit choices. The most reliable and future-proof approach is to write explicit dark styles using the @media (prefers-color-scheme: dark) block directly in your HTML email's <style> tag. Apple Mail will honor these completely. Gmail and Outlook, however, apply their own color algorithm regardless of the color-scheme meta tag or explicit overrides — which is why previewing in a dark mode preference checker prior to sending is so important for email marketing deliverability and brand consistency.

The color-scheme meta tag approach looks like this:

<!-- Signals to Apple Mail and some clients that night-theme is supported -->
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">

<style>
  @media (prefers-color-scheme: dark) {
    body { background-color: #1a1a1a !important; color: #ffffff !important; }
    .cta-button { background-color: #0a84ff !important; }
  }
</style>

To stop unwanted inversions in clients that ignore the meta tag, the strategy is to ensure your email's colors already pass the WCAG 4.5:1 tonal ratio check in both light and inverted environments. The fixContrast() technique used internally by Outlook.com's color algorithm applies the formula:

Adjusted L* = (target − L) × 0.82

Where:
  target = 117 for most colors (or 127 for reddish-neutral hues)
  L      = original CIELAB L* value of the color
  Result = new lightness value pushed toward the readable extreme

Colors that produce invisible text — such as a white headline on a white-inverted background — are the most critical failure mode. A tonal check using a night-theme color checker or this tool's live preview catches these before they reach your subscribers. The color render differences between clients also make brand colors look inconsistent across platforms, which is a brand consistency risk in email layouts that is easy to overlook without a side by side preview.

Samsung Mail Auto-Fit Scaling and Why It Breaks Adaptive Layouts

Samsung Mail introduces a separate rendering challenge beyond color inversion: its auto-fit scaling behavior, powered by AutoFit.js extracted from the Samsung APK. This is an auto-fit simulation that runs before color transforms and can significantly disrupt your adaptive email layout.

Here is what happens step by step:

1. Samsung Mail scans every element in your HTML for pixel width attributes — specifically HTML width attributes like <img width="600">. It prioritizes these dimension values over inline rules, inverting the normal precedence of the cascade.
2. If any img width attribute or table width exceeds the device's 360px viewport (a common viewport width for mid-range Android phones), Samsung Mail triggers viewport injection — it injects a wider virtual viewport and zooms the entire layout to fit within the available space.
3. Android's built-in text auto-sizing then inflates text back to a legible size at the shrunk scale. The result: images and layout elements remain at the zoomed-down size, but text appears disproportionately large text — a layout shrink effect that can make your email look completely broken.

The fix: Remove pixel width attributes from your email's outer elements and images. Use max-width in inline styles instead. If you need to retain width attributes for the Outlook Windows desktop client's support, wrap them in conditional comments that Samsung Mail ignores — since Samsung Mail does not parse MSO conditional comments, your dimension values will be hidden from the scaling script while remaining visible to Outlook's engine.