diff --git a/.changeset/dirty-needles-chew.md b/.changeset/dirty-needles-chew.md
new file mode 100644
index 0000000000..acc7dd42e2
--- /dev/null
+++ b/.changeset/dirty-needles-chew.md
@@ -0,0 +1,5 @@
+---
+"react-email": minor
+---
+
+Theme switcher for email template
diff --git a/.changeset/flat-masks-take.md b/.changeset/flat-masks-take.md
new file mode 100644
index 0000000000..27b4d1c380
--- /dev/null
+++ b/.changeset/flat-masks-take.md
@@ -0,0 +1,6 @@
+---
+"@react-email/preview-server": minor
+"react-email": minor
+---
+
+Dark mode switcher emulating email client color inversion
diff --git a/packages/preview-server/package.json b/packages/preview-server/package.json
index b04f879099..f44c9710ba 100644
--- a/packages/preview-server/package.json
+++ b/packages/preview-server/package.json
@@ -23,6 +23,7 @@
     "@radix-ui/react-popover": "1.1.15",
     "@radix-ui/react-slot": "1.2.3",
     "@radix-ui/react-tabs": "1.1.13",
+    "@radix-ui/react-toggle": "1.1.10",
     "@radix-ui/react-toggle-group": "1.1.11",
     "@radix-ui/react-tooltip": "1.2.8",
     "@types/node": "22.14.1",
@@ -32,6 +33,7 @@
     "@types/webpack": "5.28.5",
     "autoprefixer": "10.4.21",
     "clsx": "2.1.1",
+    "colorjs.io": "0.5.2",
     "esbuild": "0.25.10",
     "framer-motion": "12.23.22",
     "json5": "2.2.3",
@@ -59,6 +61,7 @@
     "@react-email/components": "workspace:*",
     "@types/babel__core": "7.20.5",
     "@types/babel__traverse": "7.20.7",
+    "@types/color": "4.2.0",
     "@types/fs-extra": "11.0.1",
     "@types/mime-types": "2.1.4",
     "@types/node": "22.10.2",
diff --git a/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx b/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx
new file mode 100644
index 0000000000..d7b477eb6a
--- /dev/null
+++ b/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx
@@ -0,0 +1,138 @@
+import { Slot } from '@radix-ui/react-slot';
+import Color from 'colorjs.io';
+import type { ComponentProps } from 'react';
+
+function* walkDom(element: Element): Generator<Element> {
+  if (element.children.length > 0) {
+    for (let i = 0; i < element.children.length; i++) {
+      const child = element.children.item(i)!;
+      yield child;
+      yield* walkDom(child);
+    }
+  }
+}
+
+function invertColor(colorString: string, mode: 'foreground' | 'background') {
+  const color = new Color(colorString).to('lch');
+
+  if (mode === 'foreground') {
+    if (color.lch.l! < 50) {
+      color.lch.l = 100 - color.lch.l! * 0.75;
+    }
+  } else if (mode === 'background') {
+    if (color.lch.l! >= 50) {
+      color.lch.l = 100 - color.lch.l! * 0.75;
+    }
+  }
+
+  color.lch.c! *= 0.8;
+
+  return color.toString();
+}
+
+const colorRegex =
+  /#[0-9a-fA-F]{3,4}|#[0-9a-fA-F]{6,8}|rgba?\(.*?\)|hsl\(.*?\)|hsv\(.*?\)|oklab\(.*?\)|oklch\(.*?\)/g;
+
+function applyColorInversion(iframe: HTMLIFrameElement) {
+  const { contentDocument, contentWindow } = iframe;
+  if (!contentDocument || !contentWindow) return;
+
+  if (contentDocument.body.hasAttribute('inverted-colors')) return;
+
+  contentDocument.body.setAttribute('inverted-colors', '');
+
+  if (!contentDocument.body.style.color) {
+    contentDocument.body.style.color = 'rgb(0, 0, 0)';
+  }
+
+  for (const element of walkDom(contentDocument.documentElement)) {
+    if (
+      element instanceof
+      (contentWindow as unknown as typeof globalThis).HTMLElement
+    ) {
+      if (element.style.color) {
+        element.style.color = element.style.color.replaceAll(
+          colorRegex,
+          (color) => invertColor(color, 'foreground'),
+        );
+        colorRegex.lastIndex = 0;
+      }
+      if (element.style.background) {
+        element.style.background = element.style.background.replaceAll(
+          colorRegex,
+          (color) => invertColor(color, 'background'),
+        );
+        colorRegex.lastIndex = 0;
+      }
+      if (element.style.backgroundColor) {
+        element.style.backgroundColor =
+          element.style.backgroundColor.replaceAll(colorRegex, (color) =>
+            invertColor(color, 'background'),
+          );
+        colorRegex.lastIndex = 0;
+      }
+      if (element.style.borderColor) {
+        element.style.borderColor = element.style.borderColor.replaceAll(
+          colorRegex,
+          (color) => invertColor(color, 'background'),
+        );
+        colorRegex.lastIndex = 0;
+      }
+      if (element.style.border) {
+        element.style.border = element.style.border.replaceAll(
+          colorRegex,
+          (color) => invertColor(color, 'background'),
+        );
+        colorRegex.lastIndex = 0;
+      }
+    }
+  }
+}
+
+interface EmailFrameProps extends ComponentProps<'iframe'> {
+  markup: string;
+  width: number;
+  height: number;
+  darkMode: boolean;
+}
+
+export function EmailFrame({
+  markup,
+  width,
+  height,
+  darkMode,
+  ...rest
+}: EmailFrameProps) {
+  return (
+    <Slot
+      ref={(iframe: HTMLIFrameElement) => {
+        if (!iframe) return;
+
+        if (darkMode) {
+          applyColorInversion(iframe);
+        }
+
+        const handleLoad = () => {
+          if (darkMode) {
+            applyColorInversion(iframe);
+          }
+        };
+
+        iframe.addEventListener('load', handleLoad);
+        return () => {
+          iframe.removeEventListener('load', handleLoad);
+        };
+      }}
+    >
+      <iframe
+        srcDoc={markup}
+        width={width}
+        height={height}
+        {...rest}
+        // This key makes sure that the iframe itself remounts to the DOM when theme changes, so
+        // that the color changes in dark mode can be easily undone when switching to light mode.
+        key={darkMode ? 'iframe-inverted-colors' : 'iframe-normal-colors'}
+      />
+    </Slot>
+  );
+}
diff --git a/packages/preview-server/src/app/preview/[...slug]/preview.tsx b/packages/preview-server/src/app/preview/[...slug]/preview.tsx
index ef5c09cde3..6b3b45f627 100644
--- a/packages/preview-server/src/app/preview/[...slug]/preview.tsx
+++ b/packages/preview-server/src/app/preview/[...slug]/preview.tsx
@@ -15,10 +15,12 @@ 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 { EmulatedDarkModeToggle } from '../../../components/topbar/emulated-dark-mode-toggle';
 import { ViewSizeControls } from '../../../components/topbar/view-size-controls';
 import { usePreviewContext } from '../../../contexts/preview';
 import { useClampedState } from '../../../hooks/use-clamped-state';
 import { cn } from '../../../utils';
+import { EmailFrame } from './email-frame';
 import { ErrorOverlay } from './error-overlay';
 
 interface PreviewProps extends React.ComponentProps<'div'> {
@@ -32,9 +34,20 @@ const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {
   const pathname = usePathname();
   const searchParams = useSearchParams();
 
+  const isDarkModeEnabled = searchParams.get('dark') !== null;
   const activeView = searchParams.get('view') ?? 'preview';
   const activeLang = searchParams.get('lang') ?? 'jsx';
 
+  const handleDarkModeChange = (enabled: boolean) => {
+    const params = new URLSearchParams(searchParams);
+    if (enabled) {
+      params.set('dark', '');
+    } else {
+      params.delete('dark');
+    }
+    router.push(`${pathname}?${params.toString()}${location.hash}`);
+  };
+
   const handleViewChange = (view: string) => {
     const params = new URLSearchParams(searchParams);
     params.set('view', view);
@@ -83,26 +96,32 @@ const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {
   return (
     <>
       <Topbar emailTitle={emailTitle}>
-        {activeView === 'preview' && (
-          <ViewSizeControls
-            setViewHeight={(height) => {
-              setHeight(height);
-              flushSync(() => {
-                handleSaveViewSize();
-              });
-            }}
-            setViewWidth={(width) => {
-              setWidth(width);
-              flushSync(() => {
-                handleSaveViewSize();
-              });
-            }}
-            viewHeight={height}
-            viewWidth={width}
-            minWidth={minWidth}
-            minHeight={minHeight}
-          />
-        )}
+        {activeView === 'preview' ? (
+          <>
+            <ViewSizeControls
+              setViewHeight={(height) => {
+                setHeight(height);
+                flushSync(() => {
+                  handleSaveViewSize();
+                });
+              }}
+              setViewWidth={(width) => {
+                setWidth(width);
+                flushSync(() => {
+                  handleSaveViewSize();
+                });
+              }}
+              viewHeight={height}
+              viewWidth={width}
+              minWidth={minWidth}
+              minHeight={minHeight}
+            />
+            <EmulatedDarkModeToggle
+              enabled={isDarkModeEnabled}
+              onChange={(enabled) => handleDarkModeChange(enabled)}
+            />
+          </>
+        ) : null}
         <ActiveViewToggleGroup
           activeView={activeView}
           setActiveView={handleViewChange}
@@ -165,19 +184,18 @@ const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {
                 }}
                 width={width}
               >
-                <iframe
+                <EmailFrame
                   className="max-h-full rounded-lg bg-white [color-scheme:auto]"
+                  darkMode={isDarkModeEnabled}
+                  markup={renderedEmailMetadata.markup}
+                  width={width}
+                  height={height}
+                  title={emailTitle}
                   ref={(iframe) => {
-                    if (iframe) {
-                      return makeIframeDocumentBubbleEvents(iframe);
-                    }
-                  }}
-                  srcDoc={renderedEmailMetadata.markup}
-                  style={{
-                    width: `${width}px`,
-                    height: `${height}px`,
+                    if (!iframe) return;
+
+                    return makeIframeDocumentBubbleEvents(iframe);
                   }}
-                  title={emailTitle}
                 />
               </ResizableWrapper>
             )}
diff --git a/packages/preview-server/src/components/icons/icon-moon.tsx b/packages/preview-server/src/components/icons/icon-moon.tsx
new file mode 100644
index 0000000000..559bb146ee
--- /dev/null
+++ b/packages/preview-server/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';
diff --git a/packages/preview-server/src/components/icons/icon-sun.tsx b/packages/preview-server/src/components/icons/icon-sun.tsx
new file mode 100644
index 0000000000..aab4a61f9f
--- /dev/null
+++ b/packages/preview-server/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';
diff --git a/packages/preview-server/src/components/topbar/emulated-dark-mode-toggle.tsx b/packages/preview-server/src/components/topbar/emulated-dark-mode-toggle.tsx
new file mode 100644
index 0000000000..37f474ba6d
--- /dev/null
+++ b/packages/preview-server/src/components/topbar/emulated-dark-mode-toggle.tsx
@@ -0,0 +1,38 @@
+import * as Toggle from '@radix-ui/react-toggle';
+import { cn } from '../../utils';
+import { IconMoon } from '../icons/icon-moon';
+import { Tooltip } from '../tooltip';
+
+interface EmulatedDarkModeToggleProps {
+  enabled: boolean;
+  onChange: (enabled: boolean) => unknown;
+}
+
+export const EmulatedDarkModeToggle = ({
+  enabled,
+  onChange,
+}: EmulatedDarkModeToggleProps) => {
+  return (
+    <Tooltip>
+      <Tooltip.Trigger asChild>
+        <Toggle.Root
+          value="dark"
+          className={cn(
+            'relative w-9 h-9 flex items-center justify-center border border-slate-6 text-sm rounded-lg transition duration-200 ease-in-out hover:text-slate-12',
+            {
+              'text-slate-11': !enabled,
+              'text-slate-12 bg-slate-4': enabled,
+            },
+          )}
+          onClick={() => onChange(!enabled)}
+        >
+          <IconMoon />
+        </Toggle.Root>
+      </Tooltip.Trigger>
+      <Tooltip.Content>
+        When enabled, inverts colors in the preview emulating what email clients
+        do in dark mode.
+      </Tooltip.Content>
+    </Tooltip>
+  );
+};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index def03c314e..53d9df7622 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -653,6 +653,9 @@ importers:
       '@radix-ui/react-tabs':
         specifier: 1.1.13
         version: 1.1.13(@types/react-dom@19.0.1)(@types/react@19.0.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-toggle':
+        specifier: 1.1.10
+        version: 1.1.10(@types/react-dom@19.0.1)(@types/react@19.0.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@radix-ui/react-toggle-group':
         specifier: 1.1.11
         version: 1.1.11(@types/react-dom@19.0.1)(@types/react@19.0.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
@@ -680,6 +683,9 @@ importers:
       clsx:
         specifier: 2.1.1
         version: 2.1.1
+      colorjs.io:
+        specifier: 0.5.2
+        version: 0.5.2
       esbuild:
         specifier: 0.25.10
         version: 0.25.10
@@ -756,6 +762,9 @@ importers:
       '@types/babel__traverse':
         specifier: 7.20.7
         version: 7.20.7
+      '@types/color':
+        specifier: 4.2.0
+        version: 4.2.0
       '@types/fs-extra':
         specifier: 11.0.1
         version: 11.0.1
@@ -4277,6 +4286,15 @@ packages:
   '@types/chai@5.2.2':
     resolution: {integrity: sha512-8kB30R7Hwqf40JPiKhVzodJs2Qc1ZJ5zuT3uzw5Hq/dhNCl3G3l83jfpdI1e20BP348+fV7VIL/+FxaXkqBmWg==}
 
+  '@types/color-convert@2.0.4':
+    resolution: {integrity: sha512-Ub1MmDdyZ7mX//g25uBAoH/mWGd9swVbt8BseymnaE18SU4po/PjmCrHxqIIRjBo3hV/vh1KGr0eMxUhp+t+dQ==}
+
+  '@types/color-name@1.1.5':
+    resolution: {integrity: sha512-j2K5UJqGTxeesj6oQuGpMgifpT5k9HprgQd8D1Y0lOFqKHl3PJu5GMeS4Y5EgjS55AE6OQxf8mPED9uaGbf4Cg==}
+
+  '@types/color@4.2.0':
+    resolution: {integrity: sha512-6+xrIRImMtGAL2X3qYkd02Mgs+gFGs+WsK0b7VVMaO4mYRISwyTjcqNrO0mNSmYEoq++rSLDB2F5HDNmqfOe+A==}
+
   '@types/cookie@0.4.1':
     resolution: {integrity: sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==}
 
@@ -5086,6 +5104,9 @@ packages:
     resolution: {integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==}
     engines: {node: '>=12.5.0'}
 
+  colorjs.io@0.5.2:
+    resolution: {integrity: sha512-twmVoizEW7ylZSN32OgKdXRmo1qg+wT5/6C3xu5b9QsWzSFAhHLn2xd8ro0diCsKfCj1RdaTP/nrcW+vAoQPIw==}
+
   combined-stream@1.0.8:
     resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
     engines: {node: '>= 0.8'}
@@ -12498,6 +12519,16 @@ snapshots:
     dependencies:
       '@types/deep-eql': 4.0.2
 
+  '@types/color-convert@2.0.4':
+    dependencies:
+      '@types/color-name': 1.1.5
+
+  '@types/color-name@1.1.5': {}
+
+  '@types/color@4.2.0':
+    dependencies:
+      '@types/color-convert': 2.0.4
+
   '@types/cookie@0.4.1': {}
 
   '@types/cors@2.8.17':
@@ -13384,6 +13415,8 @@ snapshots:
       color-convert: 2.0.1
       color-string: 1.9.1
 
+  colorjs.io@0.5.2: {}
+
   combined-stream@1.0.8:
     dependencies:
       delayed-stream: 1.0.0