Adds theming to Storybook (#37562)

.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 />