removed theme provider, added useIframeColorSheme hook

resend · Nov 2, 2024 · a214432 · a214432
1 parent 70f61b3
commit a214432
Show file tree

Hide file tree

Showing 4 changed files with 123 additions and 135 deletions.
diff --git a/packages/react-email/src/app/preview/[...slug]/preview.tsx b/packages/react-email/src/app/preview/[...slug]/preview.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import React from 'react';
+import React, { useRef } from 'react';
 import { Toaster } from 'sonner';
 import { useHotreload } from '../../../hooks/use-hot-reload';
 import type { EmailRenderingResult } from '../../../actions/render-email-by-path';
@@ -11,6 +11,7 @@ import { Tooltip } from '../../../components/tooltip';
 import { useEmails } from '../../../contexts/emails';
 import { useRenderingMetadata } from '../../../hooks/use-rendering-metadata';
 import { RenderingError } from './rendering-error';
+import { useIframeColorScheme } from '../../../hooks/use-iframe-color-scheme';
 
 interface PreviewProps {
   slug: string;
@@ -45,6 +46,9 @@ const Preview = ({
     initialRenderingResult,
   );
 
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  useIframeColorScheme(iframeRef, activeTheme);
+
   if (process.env.NEXT_PUBLIC_IS_BUILDING !== 'true') {
     // this will not change on runtime so it doesn't violate
     // the rules of hooks
@@ -105,6 +109,7 @@ const Preview = ({
             {activeView === 'desktop' && (
               <iframe
                 className="w-full bg-white h-[calc(100vh_-_140px)] lg:h-[calc(100vh_-_70px)]"
+                ref={iframeRef}
                 srcDoc={renderedEmailMetadata.markup}
                 title={slug}
               />
@@ -113,6 +118,7 @@ const Preview = ({
             {activeView === 'mobile' && (
               <iframe
                 className="w-[360px] bg-white h-[calc(100vh_-_140px)] lg:h-[calc(100vh_-_70px)] mx-auto"
+                ref={iframeRef}
                 srcDoc={renderedEmailMetadata.markup}
                 title={slug}
               />

diff --git a/packages/react-email/src/components/shell.tsx b/packages/react-email/src/components/shell.tsx
@@ -4,7 +4,6 @@ import { cn } from '../utils';
 import { Logo } from './logo';
 import { Sidebar } from './sidebar';
 import { Topbar } from './topbar';
-import { ThemeProvider } from './theme-context';
 
 type RootProps = React.ComponentPropsWithoutRef<'div'>;
 
@@ -32,96 +31,94 @@ export const Shell = ({
   const [triggerTransition, setTriggerTransition] = React.useState(false);
 
   return (
-    <ThemeProvider setTheme={setTheme} theme={theme}>
-      <div className="flex bg-black text-white flex-col h-screen overflow-x-hidden">
-        <div className="flex lg:hidden items-center px-6 justify-between h-[70px] border-b border-slate-6">
-          <div className="h-[70px] flex items-center">
-            <Logo />
-          </div>
+    <div className="flex bg-black text-white flex-col h-screen overflow-x-hidden">
+      <div className="flex lg:hidden items-center px-6 justify-between h-[70px] border-b border-slate-6">
+        <div className="h-[70px] flex items-center">
+          <Logo />
+        </div>
 
-          <button
-            className="h-6 w-6 rounded flex items-center justify-center text-white"
-            onClick={() => {
-              setSidebarToggled((v) => !v);
-            }}
-            type="button"
+        <button
+          className="h-6 w-6 rounded flex items-center justify-center text-white"
+          onClick={() => {
+            setSidebarToggled((v) => !v);
+          }}
+          type="button"
+        >
+          <svg
+            fill="none"
+            height="16"
+            stroke="white"
+            viewBox="0 0 15 15"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              fill="none"
-              height="16"
-              stroke="white"
-              viewBox="0 0 15 15"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                clipRule="evenodd"
-                d="M1.5 3C1.22386 3 1 3.22386 1 3.5C1 3.77614 1.22386 4 1.5 4H13.5C13.7761 4 14 3.77614 14 3.5C14 3.22386 13.7761 3 13.5 3H1.5ZM1 7.5C1 7.22386 1.22386 7 1.5 7H13.5C13.7761 7 14 7.22386 14 7.5C14 7.77614 13.7761 8 13.5 8H1.5C1.22386 8 1 7.77614 1 7.5ZM1 11.5C1 11.2239 1.22386 11 1.5 11H13.5C13.7761 11 14 11.2239 14 11.5C14 11.7761 13.7761 12 13.5 12H1.5C1.22386 12 1 11.7761 1 11.5Z"
-                fill="currentColor"
-                fillRule="evenodd"
-              />
-            </svg>
-          </button>
-        </div>
+            <path
+              clipRule="evenodd"
+              d="M1.5 3C1.22386 3 1 3.22386 1 3.5C1 3.77614 1.22386 4 1.5 4H13.5C13.7761 4 14 3.77614 14 3.5C14 3.22386 13.7761 3 13.5 3H1.5ZM1 7.5C1 7.22386 1.22386 7 1.5 7H13.5C13.7761 7 14 7.22386 14 7.5C14 7.77614 13.7761 8 13.5 8H1.5C1.22386 8 1 7.77614 1 7.5ZM1 11.5C1 11.2239 1.22386 11 1.5 11H13.5C13.7761 11 14 11.2239 14 11.5C14 11.7761 13.7761 12 13.5 12H1.5C1.22386 12 1 11.7761 1 11.5Z"
+              fill="currentColor"
+              fillRule="evenodd"
+            />
+          </svg>
+        </button>
+      </div>
 
-        <div className="flex bg-slate-2">
-          <Sidebar
-            className={cn(
-              'w-screen max-w-full bg-black h-screen lg:h-auto z-50 lg:z-auto lg:max-w-[275px] fixed top-[70px] lg:top-0 left-0',
-              {
-                'translate-x-0 lg:-translate-x-full': sidebarToggled,
-                '-translate-x-full lg:translate-x-0': !sidebarToggled,
-              },
-            )}
-            currentEmailOpenSlug={currentEmailOpenSlug}
-            style={{
-              transition: triggerTransition ? 'transform 0.2s ease-in-out' : '',
-            }}
-          />
+      <div className="flex bg-slate-2">
+        <Sidebar
+          className={cn(
+            'w-screen max-w-full bg-black h-screen lg:h-auto z-50 lg:z-auto lg:max-w-[275px] fixed top-[70px] lg:top-0 left-0',
+            {
+              'translate-x-0 lg:-translate-x-full': sidebarToggled,
+              '-translate-x-full lg:translate-x-0': !sidebarToggled,
+            },
+          )}
+          currentEmailOpenSlug={currentEmailOpenSlug}
+          style={{
+            transition: triggerTransition ? 'transform 0.2s ease-in-out' : '',
+          }}
+        />
 
-          <main
-            className={cn(
-              'absolute will-change-width h-screen w-[100vw] right-0',
-              {
-                'lg:translate-x-0 lg:w-[calc(100vw)]': sidebarToggled,
-                'lg:translate-x-0 lg:w-[calc(100vw-275px)]': !sidebarToggled,
-              },
-            )}
-            style={{
-              transition: triggerTransition
-                ? 'width 0.2s ease-in-out, transform 0.2s ease-in-out'
-                : '',
-            }}
-          >
-            {currentEmailOpenSlug && pathSeparator ? (
-              <Topbar
-                activeView={activeView}
-                currentEmailOpenSlug={currentEmailOpenSlug}
-                markup={markup}
-                onToggleSidebar={() => {
-                  setTriggerTransition(true);
+        <main
+          className={cn(
+            'absolute will-change-width h-screen w-[100vw] right-0',
+            {
+              'lg:translate-x-0 lg:w-[calc(100vw)]': sidebarToggled,
+              'lg:translate-x-0 lg:w-[calc(100vw-275px)]': !sidebarToggled,
+            },
+          )}
+          style={{
+            transition: triggerTransition
+              ? 'width 0.2s ease-in-out, transform 0.2s ease-in-out'
+              : '',
+          }}
+        >
+          {currentEmailOpenSlug && pathSeparator ? (
+            <Topbar
+              activeView={activeView}
+              currentEmailOpenSlug={currentEmailOpenSlug}
+              markup={markup}
+              onToggleSidebar={() => {
+                setTriggerTransition(true);
 
-                  requestAnimationFrame(() => {
-                    setSidebarToggled((v) => !v);
-                  });
+                requestAnimationFrame(() => {
+                  setSidebarToggled((v) => !v);
+                });
 
-                  setTimeout(() => {
-                    setTriggerTransition(false);
-                  }, 300);
-                }}
-                pathSeparator={pathSeparator}
-                setActiveView={setActiveView}
-                theme={theme}
-                setTheme={setTheme}
-              />
-            ) : null}
+                setTimeout(() => {
+                  setTriggerTransition(false);
+                }, 300);
+              }}
+              pathSeparator={pathSeparator}
+              setActiveView={setActiveView}
+              setTheme={setTheme}
+              theme={theme}
+            />
+          ) : null}
 
-            <div className="h-[calc(100vh_-_70px)] overflow-auto mx-auto ">
-              {children}
-            </div>
-          </main>
-        </div>
+          <div className="h-[calc(100vh_-_70px)] overflow-auto mx-auto ">
+            {children}
+          </div>
+        </main>
       </div>
-    </ThemeProvider>
+    </div>
   );
 };
diff --git a/packages/react-email/src/components/theme-context.tsx b/packages/react-email/src/components/theme-context.tsx
diff --git a/packages/react-email/src/hooks/use-iframe-color-scheme.ts b/packages/react-email/src/hooks/use-iframe-color-scheme.ts
@@ -0,0 +1,35 @@
+import * as React from 'react';
+
+export function useIframeColorScheme(
+  iframeRef: React.RefObject<HTMLIFrameElement | null>,
+  theme: string,
+) {
+  React.useEffect(() => {
+    const iframe = iframeRef.current;
+
+    if (!iframe) return;
+
+    // Set on iframe element itself
+    iframe.style.colorScheme = theme;
+
+    // Set on iframe's document if available
+    if (iframe.contentDocument) {
+      iframe.contentDocument.documentElement.style.colorScheme = theme;
+      iframe.contentDocument.body.style.colorScheme = theme;
+    }
+
+    // Ensure styles are applied after it loads
+    const handleLoad = () => {
+      if (iframe.contentDocument) {
+        iframe.contentDocument.documentElement.style.colorScheme = theme;
+        iframe.contentDocument.body.style.colorScheme = theme;
+      }
+    };
+
+    iframe.addEventListener('load', handleLoad);
+
+    return () => {
+      iframe.removeEventListener('load', handleLoad);
+    };
+  }, [theme, iframeRef]);
+}