Add an additional Dark Mode toggle that simulates `prefers-color-scheme` #3609

tannerbaum · 2026-06-26T22:10:08Z

tannerbaum
Jun 26, 2026

Goals

Give us some way to simulate "prefer-color-scheme" being set
Alternatively, highlight in the preview ui what the current toggle is doing

Background

As I understand, the preview's dark-mode toggle simulates forced color inversion but does not emulate @media (prefers-color-scheme: dark). As a result, emails that explicitly implement dark mode styles can't be previewed at all (seems to be a 50/50 split of which approach email clients take if I understand correctly).

The existing toggle silently shows an inverted version of the light styles instead of the authored dark styles.

Light mode in Preview:

Toggle dark mode in Preview:

System dark mode set in Preview:

System dark mode set in Apple Mail:

To not bloat this initial post anymore I am going to post my code setup in a reply (it is using the newly released tailwind 4 theme variables support)

Proposal

Add a prefers-color-scheme: dark emulation mode next to the existing button. Since the media query can't be forced from app code, do it by CSS rewrite on the already-loaded iframe:

(This proposal is from Claude, I'm not as familiar with dark mode styling or dealing with email HTML nearly as much as you all)

Walk iframe.contentDocument.styleSheets.
Collect every rule inside a CSSMediaRule whose media.mediaText includes prefers-color-scheme: dark.
Inject the unwrapped cssText of those rules into a single <style data-emulated-prefers-dark> appended to the iframe .
On toggle off, remove that <style>.
This renders the email's authored dark theme — exactly what Apple Mail / Outlook-for-Mac do.

Sketch:

function applyPrefersDarkEmulation(iframe: HTMLIFrameElement) {
  const doc = iframe.contentDocument;
  if (!doc) return;

  let css = "";
  for (const sheet of Array.from(doc.styleSheets)) {
    let rules: CSSRuleList;
    try {
      rules = sheet.cssRules; // may throw on cross-origin; email styles are same-origin via srcDoc
    } catch {
      continue;
    }
    for (const rule of Array.from(rules)) {
      if (
        rule instanceof CSSMediaRule &&
        rule.media.mediaText.includes("prefers-color-scheme: dark")
      ) {
        for (const inner of Array.from(rule.cssRules)) {
          css += `${inner.cssText}\n`;
        }
      }
    }
  }

  const style = doc.createElement("style");
  style.setAttribute("data-emulated-prefers-dark", "");
  style.textContent = css;
  doc.head.appendChild(style);
}

tannerbaum · 2026-06-26T22:15:29Z

tannerbaum
Jun 26, 2026
Author

Just going to share my current setup in case it's nuts (some of the documentation isn't there for the new Tailwind CSS variables feature):

// BaseEmail.jsx
import { Body, Container, Head, Html, Preview, Section, Tailwind, type TailwindProps } from 'react-email';
import { baseTheme, tailwindConfig } from './theme';

export function BaseEmail({
  theme = baseTheme,
  locale = 'en',
  preview,
  children,
}) {
  return (
    <Tailwind config={tailwindConfig} theme={theme}>
      <Html lang={locale}>
        <Head>
          <title>{EMAIL_BRAND_TITLE}</title>
          <meta name="color-scheme" content="light dark" />
          <meta name="supported-color-schemes" content="light dark" />
          <style>{`
            :root { color-scheme: light dark; }
            @media (prefers-color-scheme: dark) {
              .img-light { display: none !important; }
              .img-dark { display: inline-block !important; }
            }
          `}</style>
          // etc...

        </Head>

        {preview ? <Preview>{preview}</Preview> : null}

        <Body className="m-0 p-0 bg-background dark:bg-background-dark font-sans font-extralight">
          {*/ ...etc */} 
        </Body>
      </Html>
    </Tailwind>
  );
}

// theme.ts

import { pixelBasedPreset, type TailwindConfig, type TailwindProps } from 'react-email';

export const baseTheme: TailwindProps['theme'] = `
    @theme {
        /* ---- Colors: light (default) ---- */
        --color-background: #f2f2f2;
        --color-card: #F5F3EE;
        --color-text: #131822;

        /* ---- Colors: dark  ---- */
        --color-background-dark: #0a0e14;
        --color-card-dark: #131822;
        --color-text-dark: #FFFFFF;
     
        /* ---- Type & sizing ---- */
       // ...
    }
`;

// Do not use the `theme` property in the config — tokens belong in the string
// above, passed to <Tailwind theme={tailwindTheme} />.
export const tailwindConfig: TailwindConfig = {
  // rem is not supported in some email clients
  presets: [pixelBasedPreset],
};

Again, as far as I can tell from sending test emails with Resend this all seems to work! It's just an issue with the preview ui. I appreciate your time looking at all of this 😅

0 replies

MILLERMARRU · 2026-08-13T00:21:40Z

MILLERMARRU
Aug 13, 2026

Went and read the actual toggle implementation (packages/ui/src/app/preview/[...slug]/email-frame.tsx) to confirm what it's really doing, and your read is exactly right: applyColorInversion/undoColorInversion walk the iframe DOM and invert inline style colors (element.style.color, .background, .border) directly, element by element. It never touches <style> tags or evaluates any @media query at all. So any email that ships real @media (prefers-color-scheme: dark) rules in a <style> block (which is most dark-mode-aware email markup, including anything Tailwind-based with dark: classes) is invisible to the toggle entirely. It's not that the toggle gets it wrong, the mechanism literally can't see media-query rules in the first place, only inline styles.

Your proposed approach is sound and fits the existing pattern well. The iframe is already rendered with sandbox="allow-same-origin ..." (no allow-scripts, srcDoc content, same origin as the parent app), which is exactly the setup applyColorInversion itself already relies on to reach into contentDocument directly from the parent's ref callback. Your CSSMediaRule walk would work the same way, called from that same ref/onLoad point instead of (or alongside) the inline-color inversion:

function applyPrefersDarkEmulation(iframe) {
  const doc = iframe.contentDocument;
  if (!doc) return;
  let css = '';
  for (const sheet of doc.styleSheets) {
    for (const rule of sheet.cssRules) {
      if (rule instanceof CSSMediaRule && rule.media.mediaText.includes('prefers-color-scheme: dark')) {
        for (const inner of rule.cssRules) css += `${inner.cssText}\n`;
      }
    }
  }
  const style = doc.createElement('style');
  style.setAttribute('data-emulated-prefers-dark', '');
  style.textContent = css;
  doc.head.appendChild(style);
}

No cross-origin cssRules throw risk here since everything's same-origin via srcDoc, so you can drop the try/catch around that part unless you want to guard against a malformed stylesheet specifically. I didn't find an existing issue or in-flight PR for this in the tracker, so this looks like a real, currently-unaddressed gap rather than something already being worked on, worth opening as an actual PR against email-frame.tsx given you already have a working mechanism sketched out.

0 replies

creativoma · 2026-08-18T10:58:36Z

creativoma
Aug 18, 2026

Both goals from the original post are covered in #3712: there is now a mode that renders the dark styles the email defines, and the two behaviors are separate controls with tooltips naming which clients do which, so the existing toggle is no longer ambiguous.

Thanks for the write-up and the screenshots; the Apple Mail comparison made the gap easy to pin down.

0 replies

Navigation Menu

Uh oh!

Add an additional Dark Mode toggle that simulates `prefers-color-scheme` #3609

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 3 comments

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

Uh oh!

Add an additional Dark Mode toggle that simulates prefers-color-scheme #3609

Uh oh!

Uh oh!

tannerbaum Jun 26, 2026

Goals

Background

Proposal

Replies: 3 comments

Uh oh!

Uh oh!

tannerbaum Jun 26, 2026 Author

Uh oh!

MILLERMARRU Aug 13, 2026

Uh oh!

Uh oh!

creativoma Aug 18, 2026

Add an additional Dark Mode toggle that simulates `prefers-color-scheme` #3609

tannerbaum
Jun 26, 2026

tannerbaum
Jun 26, 2026
Author

MILLERMARRU
Aug 13, 2026

creativoma
Aug 18, 2026