diff --git a/src/components/base.tsx b/src/components/base.tsx
index c44d1f6..3458747 100644
--- a/src/components/base.tsx
+++ b/src/components/base.tsx
@@ -15,7 +15,33 @@ export const BaseHtml = ({
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <meta name="webroot" content={webroot} />
       <title safe>{title}</title>
+
+      {/*
+        Apply the persisted theme as early as possible to avoid a flash.
+        - If no preference is stored, tokens fall back to OS preference via CSS.
+      */}
+      <script>
+        {`
+          (() => {
+            const KEY = 'convertx-theme';
+            try {
+              const v = localStorage.getItem(KEY);
+              if (v === 'dark' || v === 'light') {
+                document.documentElement.setAttribute('data-theme', v);
+                document.documentElement.style.colorScheme = v;
+              }
+            } catch {
+              // ignore
+            }
+          })();
+        `}
+      </script>
+
       <link rel="stylesheet" href={`${webroot}/generated.css`} />
+
+      {/* Theme toggle behavior (syncs the header switch + persists choice). */}
+      <script src={`${webroot}/theme.js`} defer />
+
       <link rel="apple-touch-icon" sizes="180x180" href={`${webroot}/apple-touch-icon.png`} />
       <link rel="icon" type="image/png" sizes="32x32" href={`${webroot}/favicon-32x32.png`} />
       <link rel="icon" type="image/png" sizes="16x16" href={`${webroot}/favicon-16x16.png`} />
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 7f72fea..b350eb4 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -11,10 +11,40 @@ export const Header = ({
   hideHistory?: boolean;
   webroot?: string;
 }) => {
+  const themeToggle = (
+    <li class="flex items-center gap-2">
+      <span id="cx-theme-label" class="text-sm font-medium text-neutral-200">
+        Dark
+      </span>
+      <label class="relative inline-flex cursor-pointer items-center" title="Toggle theme">
+        <input
+          id="cx-theme-switch"
+          type="checkbox"
+          class="sr-only peer"
+          aria-label="Toggle dark mode"
+        />
+        <div
+          class={
+            `
+              relative h-6 w-11 rounded-full bg-neutral-700
+              transition-colors
+              peer-checked:bg-blue-600
+              peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-blue-500
+              after:content-[''] after:absolute after:top-[2px] after:left-[2px]
+              after:h-5 after:w-5 after:rounded-full after:bg-white after:border after:border-neutral-500 after:shadow-sm after:transition-transform
+              peer-checked:after:translate-x-5
+            `
+          }
+        />
+      </label>
+    </li>
+  );
+
   let rightNav: JSX.Element;
   if (loggedIn) {
     rightNav = (
-      <ul class="flex gap-4">
+      <ul class="flex items-center gap-6">
+        {themeToggle}
         {!hideHistory && (
           <li>
             <a
@@ -58,7 +88,8 @@ export const Header = ({
     );
   } else {
     rightNav = (
-      <ul class="flex gap-4">
+      <ul class="flex items-center gap-6">
+        {themeToggle}
         <li>
           <a
             class={`