From 6897475f9be80d9f3f81d06087dec0a3b6d7cc44 Mon Sep 17 00:00:00 2001
From: Echo <ChaosExAnima@users.noreply.github.com>
Date: Wed, 21 Jan 2026 16:54:52 +0100
Subject: [PATCH] Adds theming to Storybook (#37562)

---
 .storybook/preview.tsx | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index abbd193c681..10d45acfe65 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -50,9 +50,19 @@ const preview: Preview = {
         dynamicTitle: true,
       },
     },
+    theme: {
+      description: 'Theme for the story',
+      toolbar: {
+        title: 'Theme',
+        icon: 'circlehollow',
+        items: [{ value: 'light' }, { value: 'dark' }],
+        dynamicTitle: true,
+      },
+    },
   },
   initialGlobals: {
     locale: 'en',
+    theme: 'light',
   },
   decorators: [
     (Story, { parameters, globals, args, argTypes }) => {
@@ -135,6 +145,13 @@ const preview: Preview = {
         </IntlProvider>
       );
     },
+    (Story, { globals }) => {
+      const theme = (globals.theme as string) || 'light';
+      useEffect(() => {
+        document.body.setAttribute('data-color-scheme', theme);
+      }, [theme]);
+      return <Story />;
+    },
     (Story) => (
       <MemoryRouter>
         <Story />