From af799cb7954508fc6d9eece722c6ab2f514efb96 Mon Sep 17 00:00:00 2001 From: Quentin Gliech Date: Sun, 5 Apr 2026 21:25:30 +0200 Subject: [PATCH] feat(web): add light/dark theme switcher to Storybook toolbar MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add a global theme toolbar (sun/moon icons) that toggles the .dark class on the iframe's element, matching the app's dark mode mechanism. All components and Shiki themes respond correctly. Rename preview.ts → preview.tsx for JSX decorator support. Co-Authored-By: Claude Opus 4.6 (1M context) --- webui2/.storybook/preview.ts | 19 ---------------- webui2/.storybook/preview.tsx | 43 +++++++++++++++++++++++++++++++++++ 2 files changed, 43 insertions(+), 19 deletions(-) delete mode 100644 webui2/.storybook/preview.ts create mode 100644 webui2/.storybook/preview.tsx 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 ; + }, + ], + parameters: { + a11y: { + test: "error", + }, + controls: { + matchers: { + color: /(background|color)$/i, + date: /date$/i, + }, + }, + }, +}; + +export default preview;