feat(storybook): add dark mode toolbar toggle with synced shell theme

storybook-dark-mode addon's preset format is incompatible with
Storybook v10 + rsbuild. Replaced with native globalTypes toolbar
toggle (sun/moon icons) that toggles .dark class on html element
and syncs the Storybook manager theme via channel events.

Author: yahyafakhroji

apps/storybook/.storybook/main.ts

@@ -10,7 +10,6 @@ const config: StorybookConfig = {
     '@storybook/addon-a11y',
     '@storybook/addon-interactions',
     '@storybook/addon-links',
-    'storybook-dark-mode',
     'storybook-addon-pseudo-states',
     'storybook-addon-tag-badges',
   ],

apps/storybook/.storybook/manager.tsx

@@ -1,5 +1,17 @@
 import { addons } from 'storybook/manager-api'
-import { datumLight } from './theme'
+import { datumDark, datumLight } from './theme'
+
+addons.register('datum-theme-switcher', (_api) => {
+  const channel = addons.getChannel()
+
+  channel.on('updateGlobals', ({ globals }: { globals: Record<string, unknown> }) => {
+    if ('theme' in globals) {
+      addons.setConfig({
+        theme: globals.theme === 'dark' ? datumDark : datumLight,
+      })
+    }
+  })
+})
 
 addons.setConfig({
   theme: datumLight,

apps/storybook/.storybook/preview.tsx

@@ -1,31 +1,54 @@
 import type { Preview } from 'storybook-react-rsbuild'
 import { ThemeProvider } from '@datum-cloud/datum-ui/theme'
-import { datumDark, datumLight } from './theme'
+import { useEffect } from 'react'
 import { datumViewports } from './viewport'
 import '../stories/storybook.css'
 
 const preview: Preview = {
+  globalTypes: {
+    theme: {
+      description: 'Toggle dark mode',
+      toolbar: {
+        title: 'Theme',
+        icon: 'moon',
+        items: [
+          { value: 'light', icon: 'sun', title: 'Light' },
+          { value: 'dark', icon: 'moon', title: 'Dark' },
+        ],
+        dynamicTitle: true,
+      },
+    },
+  },
+  initialGlobals: {
+    theme: 'light',
+  },
   decorators: [
-    Story => (
-      <ThemeProvider attribute="class" defaultTheme="light" enableSystem>
-        <div style={{ padding: '1rem' }}>
-          <Story />
-        </div>
-      </ThemeProvider>
-    ),
+    (Story, context) => {
+      const theme = context.globals.theme || 'light'
+
+      useEffect(() => {
+        const html = document.documentElement
+        if (theme === 'dark') {
+          html.classList.add('dark')
+        }
+        else {
+          html.classList.remove('dark')
+        }
+      }, [theme])
+
+      return (
+        <ThemeProvider attribute="class" defaultTheme={theme} enableSystem={false} forcedTheme={theme}>
+          <div style={{ padding: '1rem' }}>
+            <Story />
+          </div>
+        </ThemeProvider>
+      )
+    },
   ],
   parameters: {
     viewport: {
       viewports: datumViewports,
     },
-    darkMode: {
-      dark: datumDark,
-      light: datumLight,
-      classTarget: 'html',
-      darkClass: 'dark',
-      lightClass: '',
-      stylePreview: true,
-    },
     a11y: {
       config: {
         rules: [

apps/storybook/package.json

@@ -37,7 +37,6 @@
     "storybook": "^10",
     "storybook-addon-pseudo-states": "^10.3.4",
     "storybook-addon-tag-badges": "^3.1.0",
-    "storybook-dark-mode": "^5.0.0",
     "storybook-react-rsbuild": "^2",
     "tailwind-scrollbar-hide": "^4.0.0",
     "tailwindcss": "^4",