react-email 4.0.5 → 4.1.0-canary.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email",
-  "version": "4.0.5",
+  "version": "4.1.0-canary.0",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./dist/cli/index.js"
@@ -29,7 +29,7 @@
     "glob": "10.3.4",
     "log-symbols": "4.1.0",
     "mime-types": "2.1.35",
-    "next": "15.2.3",
+    "next": "15.2.4",
     "normalize-path": "3.0.0",
     "ora": "5.4.1",
     "socket.io": "4.8.1"
@@ -82,10 +82,10 @@
     "typescript": "5.8.2",
     "use-debounce": "10.0.4",
     "zod": "3.24.2",
-    "@react-email/components": "0.0.36"
+    "@react-email/components": "0.0.37-canary.0"
   },
   "scripts": {
-    "build": "tsup-node && node ./scripts/build-preview-server.mjs",
+    "build": "tsup-node && node ./scripts/build-preview-server.mjs && pnpm install --frozen-lockfile",
     "caniemail:fetch": "node ./scripts/fill-caniemail-data.mjs",
     "clean": "rm -rf dist",
     "dev": "tsup-node --watch",

package/src/app/preview/[...slug]/preview.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { use, useState } from 'react';
+import { use, useRef, useState } from 'react';
 import { flushSync } from 'react-dom';
 import { Toaster } from 'sonner';
 import { useDebouncedCallback } from 'use-debounce';
@@ -15,9 +15,11 @@ import { Send } from '../../../components/send';
 import { useToolbarState } from '../../../components/toolbar';
 import { Tooltip } from '../../../components/tooltip';
 import { ActiveViewToggleGroup } from '../../../components/topbar/active-view-toggle-group';
+import { ThemeToggleGroup } from '../../../components/topbar/theme-toggle-group';
 import { ViewSizeControls } from '../../../components/topbar/view-size-controls';
 import { PreviewContext } from '../../../contexts/preview';
 import { useClampedState } from '../../../hooks/use-clamped-state';
+import { useIframeColorScheme } from '../../../hooks/use-iframe-color-scheme';
 import { cn } from '../../../utils';
 import { RenderingError } from './rendering-error';
 
@@ -32,9 +34,17 @@ const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {
   const pathname = usePathname();
   const searchParams = useSearchParams();
 
+  const activeTheme: 'dark' | 'light' =
+    searchParams.get('theme') === 'dark' ? 'dark' : 'light';
   const activeView = searchParams.get('view') ?? 'preview';
   const activeLang = searchParams.get('lang') ?? 'jsx';
 
+  const handleThemeChange = (theme: 'dark' | 'light') => {
+    const params = new URLSearchParams(searchParams);
+    params.set('theme', theme);
+    router.push(`${pathname}?${params.toString()}`);
+  };
+
   const handleViewChange = (view: string) => {
     const params = new URLSearchParams(searchParams);
     params.set('view', view);
@@ -51,6 +61,9 @@ const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {
     );
   };
 
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  useIframeColorScheme(iframeRef, activeTheme);
+
   const hasRenderingMetadata = typeof renderedEmailMetadata !== 'undefined';
   const hasErrors = 'error' in renderingResult;
 
@@ -99,6 +112,10 @@ const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {
           viewHeight={height}
           viewWidth={width}
         />
+        <ThemeToggleGroup
+          active={activeTheme}
+          onChange={(theme) => handleThemeChange(theme)}
+        />
         <ActiveViewToggleGroup
           activeView={activeView}
           setActiveView={handleViewChange}
@@ -164,6 +181,7 @@ const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {
                 <iframe
                   className="solid max-h-full rounded-lg bg-white"
                   ref={(iframe) => {
+                    iframeRef.current = iframe;
                     if (iframe) {
                       return makeIframeDocumentBubbleEvents(iframe);
                     }

package/src/components/icons/icon-moon.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { IconElement, IconProps } from './icon-base';
+import { IconBase } from './icon-base';
+
+export const IconMoon = React.forwardRef<IconElement, Readonly<IconProps>>(
+  ({ ...props }, forwardedRef) => (
+    <IconBase ref={forwardedRef} {...props}>
+      <path
+        fill="currentColor"
+        d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3zm3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95zm-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31"
+      />
+    </IconBase>
+  ),
+);
+
+IconMoon.displayName = 'IconMoon';

package/src/components/icons/icon-sun.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { IconElement, IconProps } from './icon-base';
+import { IconBase } from './icon-base';
+
+export const IconSun = React.forwardRef<IconElement, Readonly<IconProps>>(
+  ({ ...props }, forwardedRef) => (
+    <IconBase ref={forwardedRef} {...props}>
+      <path
+        fill="currentColor"
+        d="m3.55 19.09l1.41 1.41l1.8-1.79l-1.42-1.42M12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6s6-2.69 6-6c0-3.32-2.69-6-6-6m8 7h3v-2h-3m-2.76 7.71l1.8 1.79l1.41-1.41l-1.79-1.8M20.45 5l-1.41-1.4l-1.8 1.79l1.42 1.42M13 1h-2v3h2M6.76 5.39L4.96 3.6L3.55 5l1.79 1.81zM1 13h3v-2H1m12 9h-2v3h2"
+      />
+    </IconBase>
+  ),
+);
+
+IconSun.displayName = 'IconSun';

package/src/components/topbar/theme-toggle-group.tsx

@@ -0,0 +1,87 @@
+import * as ToggleGroup from '@radix-ui/react-toggle-group';
+import { motion } from 'framer-motion';
+import { cn } from '../../utils';
+import { tabTransition } from '../../utils/constants';
+import { IconMoon } from '../icons/icon-moon';
+import { IconSun } from '../icons/icon-sun';
+import { Tooltip } from '../tooltip';
+
+interface ThemeToggleGroupProps {
+  active: 'light' | 'dark';
+  onChange: (theme: 'light' | 'dark') => unknown;
+}
+
+export const ThemeToggleGroup = ({
+  active,
+  onChange,
+}: ThemeToggleGroupProps) => {
+  return (
+    <ToggleGroup.Root
+      aria-label="Color Scheme"
+      className="inline-block items-center bg-slate-2 border border-slate-6 rounded-md overflow-hidden h-[36px]"
+      id="theme-toggle"
+      onValueChange={(value) => {
+        if (value) onChange(value as 'light' | 'dark');
+      }}
+      type="single"
+      value={active}
+    >
+      <ToggleGroup.Item value="light">
+        <Tooltip>
+          <Tooltip.Trigger asChild>
+            <div
+              className={cn(
+                'relative px-3 py-2 transition duration-200 ease-in-out hover:text-slate-12',
+                {
+                  'text-slate-11': active !== 'light',
+                  'text-slate-12': active === 'light',
+                },
+              )}
+            >
+              {active === 'light' && (
+                <motion.span
+                  animate={{ opacity: 1 }}
+                  className="absolute top-0 right-0 bottom-0 left-0 bg-slate-4"
+                  exit={{ opacity: 0 }}
+                  initial={{ opacity: 0 }}
+                  layoutId="topbar-theme-tabs"
+                  transition={tabTransition}
+                />
+              )}
+              <IconSun />
+            </div>
+          </Tooltip.Trigger>
+          <Tooltip.Content>Light</Tooltip.Content>
+        </Tooltip>
+      </ToggleGroup.Item>
+      <ToggleGroup.Item value="dark">
+        <Tooltip>
+          <Tooltip.Trigger asChild>
+            <div
+              className={cn(
+                'relative px-3 py-2 transition duration-200 ease-in-out hover:text-slate-12',
+                {
+                  'text-slate-11': active !== 'dark',
+                  'text-slate-12': active === 'dark',
+                },
+              )}
+            >
+              {active === 'dark' && (
+                <motion.span
+                  animate={{ opacity: 1 }}
+                  className="absolute top-0 right-0 bottom-0 left-0 bg-slate-4"
+                  exit={{ opacity: 0 }}
+                  initial={{ opacity: 0 }}
+                  layoutId="topbar-theme-tabs"
+                  transition={tabTransition}
+                />
+              )}
+              <IconMoon />
+            </div>
+          </Tooltip.Trigger>
+          <Tooltip.Content>Dark</Tooltip.Content>
+        </Tooltip>
+      </ToggleGroup.Item>
+    </ToggleGroup.Root>
+  );
+};

package/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]);
+}