feat(preview-server): dark mode switcher

[gabrielmfern]

This goes off of the previous work done by @KayleeWilliams in #1749. But, instead of adapting the color-scheme in the email template, it emulates email client behavior by flipping the lightness of colors, also reversing the order of the calculation when done for foreground.

We might also want to improve the images we have in static for the demo, since they seem quite bad when using the new emulation. We also might want a better design touch, mainly for a way to tell users the dark mode is just an emulation, and not exactly what email clients do.

How to use this?

1. Install react-email@canary
2. Install https://pkg.pr.new/resend/react-email/@react-email/preview-server@2589
3. Run email dev and see http://localhost:300

or checkout the demo preview deploy for this, which also works!

---

Summary by cubic

Adds a dark mode switcher to the preview server that emulates email client color inversion for more realistic dark mode previews. Users can toggle light/dark in the topbar; the theme persists via URL.

• New Features

  • Theme toggle in the topbar with sun/moon icons.
  • EmailFrame applies color inversion to text, backgrounds, and borders using the Color library; iframe is keyed by theme and re-inverts on load.
  • Theme state synced to the ?theme= URL param.

• Dependencies

  • Added color@5.0.2.

[changeset-bot]

🦋 Changeset detected

Latest commit: 0dfa391

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@react-email/preview-server	Minor
react-email	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
react-email	Ready	Preview	Comment	Oct 29, 2025 7:00pm
react-email-demo	Ready	Preview	Comment	Oct 29, 2025 7:00pm

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/resend/react-email/@react-email/preview-server@2589

commit: 0dfa391

[cubic-dev-ai]

5 issues found across 9 files

Prompt for AI agents (all 5 issues)

Understand the root cause of the following 5 issues and fix them.


<file name="packages/preview-server/src/app/preview/[...slug]/email-frame.tsx">

<violation number="1" location="packages/preview-server/src/app/preview/[...slug]/email-frame.tsx:5">
Rule violated: **Initialisms and Acronyms Naming Conventions**

Rename `walkDOM` to `walkDom` (and update its usages) so the DOM acronym follows the camel-cased initialism convention required for identifiers.</violation>

<violation number="2" location="packages/preview-server/src/app/preview/[...slug]/email-frame.tsx:32">
The hex-matching branch in `colorRegex` accepts invalid values (e.g., it matches `#pattern`), which causes `Color()` to throw during dark-mode inversion. Tighten the regex to only match legitimate hex colors (e.g., `{3,4,6,8}` with `[0-9a-fA-F]`).</violation>
</file>

<file name="packages/preview-server/src/app/preview/[...slug]/preview.tsx">

<violation number="1" location="packages/preview-server/src/app/preview/[...slug]/preview.tsx:45">
Preserve the existing URL hash when toggling the theme so the preview doesn’t lose the current anchor/scroll position.</violation>
</file>

<file name="packages/preview-server/src/components/topbar/theme-toggle-group.tsx">

<violation number="1" location="packages/preview-server/src/components/topbar/theme-toggle-group.tsx:31">
This icon-only toggle button lacks an accessible name, so screen reader users cannot tell it switches to the light theme. Add an aria-label or visually hidden text to give the control an accessible name.</violation>
</file>

<file name="packages/preview-server/package.json">

<violation number="1" location="packages/preview-server/package.json:35">
Please add @types/color alongside this new dependency; without declaration files, TypeScript reports TS7016 (&#39;Could not find a declaration file for module &quot;color&quot;&#39;) when checking email-frame.tsx.</violation>
</file>

_{React with 👍 or 👎 to teach cubic. Mention @cubic-dev-ai to give feedback, ask questions, or re-run the review.}