docs(ui): add storybook theme addon (#1713)

Author: cylewaitforit

.storybook/main.ts

@@ -2,7 +2,7 @@ import type { StorybookConfig } from '@storybook-vue/nuxt'
 
 const config = {
   stories: ['../app/**/*.stories.@(js|ts)'],
-  addons: ['@storybook/addon-a11y', '@storybook/addon-docs'],
+  addons: ['@storybook/addon-a11y', '@storybook/addon-docs', '@storybook/addon-themes'],
   framework: '@storybook-vue/nuxt',
   features: {
     backgrounds: false,

.storybook/preview.ts

@@ -1,4 +1,5 @@
 import type { Preview } from '@storybook-vue/nuxt'
+import { withThemeByDataAttribute } from '@storybook/addon-themes'
 import { currentLocales } from '../config/i18n'
 import { fn } from 'storybook/test'
 import { ACCENT_COLORS } from '../shared/utils/constants'
@@ -58,31 +59,22 @@ const preview: Preview = {
         ],
       },
     },
-    theme: {
-      name: 'Theme',
-      description: 'Color mode',
-      defaultValue: 'dark',
-      toolbar: {
-        icon: 'moon',
-        dynamicTitle: true,
-        items: [
-          { value: 'light', icon: 'sun', title: 'Light' },
-          { value: 'dark', icon: 'moon', title: 'Dark' },
-        ],
-      },
-    },
   },
   decorators: [
+    withThemeByDataAttribute({
+      themes: {
+        Light: 'light',
+        Dark: 'dark',
+      },
+      defaultTheme: 'Dark',
+      attributeName: 'data-theme',
+    }),
     (story, context) => {
-      const { locale, theme, accentColor } = context.globals as {
+      const { locale, accentColor } = context.globals as {
         locale: string
-        theme: string
         accentColor?: string
       }
 
-      // Set theme from globals
-      document.documentElement.setAttribute('data-theme', theme)
-
       // Set accent color from globals
       if (accentColor) {
         document.documentElement.style.setProperty('--accent-color', `var(--swatch-${accentColor})`)

package.json

@@ -122,9 +122,10 @@
     "@intlify/core-base": "11.2.8",
     "@npm/types": "2.1.0",
     "@playwright/test": "1.58.2",
-    "@storybook-vue/nuxt": "9.0.1",
-    "@storybook/addon-a11y": "^10.2.7",
-    "@storybook/addon-docs": "^10.2.7",
+    "@storybook-vue/nuxt": "catalog:storybook",
+    "@storybook/addon-a11y": "catalog:storybook",
+    "@storybook/addon-docs": "catalog:storybook",
+    "@storybook/addon-themes": "catalog:storybook",
     "@types/node": "24.10.13",
     "@types/sanitize-html": "2.16.0",
     "@types/semver": "7.7.1",
@@ -145,7 +146,7 @@
     "oxlint": "1.50.0",
     "schema-dts": "1.1.5",
     "simple-git-hooks": "2.13.1",
-    "storybook": "^10.2.7",
+    "storybook": "catalog:storybook",
     "typescript": "5.9.3",
     "vitest": "npm:@voidzero-dev/vite-plus-test@0.0.0-g52709db6.20260226-1136",
     "vitest-environment-nuxt": "1.0.1",

pnpm-lock.yaml

@@ -37,3 +37,11 @@ patchedDependencies:
 savePrefix: ''
 
 shellEmulator: true
+
+catalogs:
+  storybook:
+    '@storybook-vue/nuxt': '9.0.1'
+    '@storybook/addon-a11y': '^10.2.7'
+    '@storybook/addon-docs': '^10.2.7'
+    '@storybook/addon-themes': '^10.2.7'
+    'storybook': '^10.2.7'