fix(preview-server): forced color-scheme: dark (#2271)

gabrielmfern · github-actions[bot] · KayleeWilliams · web-flow · commit 272b21e8ed5b · 2025-06-10T13:04:00.000-03:00
Signed-off-by: dependabot[bot] &lt;support@github.com&gt;
Co-authored-by: github-actions[bot] &lt;41898282+github-actions[bot]@users.noreply.github.com&gt;
Co-authored-by: Kaylee &lt;65376239+KayleeWilliams@users.noreply.github.com&gt;
Co-authored-by: dependabot[bot] &lt;49699333+dependabot[bot]@users.noreply.github.com&gt;
Co-authored-by: Bu Kinoshita &lt;6929565+bukinoshita@users.noreply.github.com&gt;
diff --git a/.changeset/better-insects-like.md b/.changeset/better-insects-like.md
@@ -0,0 +1,5 @@
+---
+"@react-email/preview-server": patch
+---
+
+fix the forced `color-scheme: dark` for the preview
diff --git a/packages/preview-server/src/app/preview/[...slug]/preview.tsx b/packages/preview-server/src/app/preview/[...slug]/preview.tsx
@@ -162,7 +162,7 @@ const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {
                 width={width}
               >
                 <iframe
-                  className="solid max-h-full rounded-lg bg-white"
+                  className="max-h-full rounded-lg bg-white [color-scheme:auto]"
                   ref={(iframe) => {
                     if (iframe) {
                       return makeIframeDocumentBubbleEvents(iframe);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@react-email/preview-server": patch
 +---
++
 +fix the forced `color-scheme: dark` for the preview
Original file line number	Diff line number	Diff line change
`@@ -162,7 +162,7 @@ const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {`
`162`	`162`	`width={width}`
`163`	`163`	`>`
`164`	`164`	`<iframe`
`165`		`- className="solid max-h-full rounded-lg bg-white"`
	`165`	`+ className="max-h-full rounded-lg bg-white [color-scheme:auto]"`
`166`	`166`	`ref={(iframe) => {`
`167`	`167`	`if (iframe) {`
`168`	`168`	`return makeIframeDocumentBubbleEvents(iframe);`