diff --git a/webui2/.storybook/preview.ts b/webui2/.storybook/preview.ts
deleted file mode 100644
index 8835b892564905795f5d2ae451123cb28b72c936..0000000000000000000000000000000000000000
--- a/webui2/.storybook/preview.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { Preview } from "@storybook/react-vite";
-
-import "../src/index.css";
-
-const preview: Preview = {
-  parameters: {
-    a11y: {
-      test: "error",
-    },
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /date$/i,
-      },
-    },
-  },
-};
-
-export default preview;
diff --git a/webui2/.storybook/preview.tsx b/webui2/.storybook/preview.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..75b605320b3bf2e362fa650124dedd5714028652
--- /dev/null
+++ b/webui2/.storybook/preview.tsx
@@ -0,0 +1,43 @@
+import type { Preview } from "@storybook/react-vite";
+
+import "../src/index.css";
+
+const preview: Preview = {
+  globalTypes: {
+    theme: {
+      description: "Toggle light/dark mode",
+      toolbar: {
+        title: "Theme",
+        icon: "sun",
+        items: [
+          { value: "light", icon: "sun", title: "Light" },
+          { value: "dark", icon: "moon", title: "Dark" },
+        ],
+        dynamicTitle: true,
+      },
+    },
+  },
+  initialGlobals: {
+    theme: "light",
+  },
+  decorators: [
+    (Story, context) => {
+      const theme = context.globals.theme as string;
+      document.documentElement.classList.toggle("dark", theme === "dark");
+      return <Story />;
+    },
+  ],
+  parameters: {
+    a11y: {
+      test: "error",
+    },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /date$/i,
+      },
+    },
+  },
+};
+
+export default preview;