storybook + vuetify

.storybook/StoryWrapper.vue

@@ -0,0 +1,22 @@
+<!-- .storybook/StoryWrapper.vue -->
+<template>
+  <v-app :theme="themeName">
+    <v-main>
+      <slot name="story"></slot>
+    </v-main>
+  </v-app>
+</template>
+
+<script>
+export default {
+  props: {
+    themeName: String,
+  },
+};
+</script>
+
+<style>
+.v-application__wrap {
+  min-height: unset;
+}
+</style>

.storybook/preview.ts

@@ -1,4 +1,34 @@
 import type { Preview } from "@storybook/vue3";
+import vuetify from '../renderer/vuetify'
+import { withVuetifyTheme } from './withVuetifyTheme.decorator';
+// .storybook/preview.js
+
+import { setup } from '@storybook/vue3';
+
+setup((app) => {
+  // Registers your app's plugins into Storybook
+  app.use(vuetify);
+});
+
+export const decorators = [withVuetifyTheme];
+
+export const globalTypes = {
+  theme: {
+    name: 'Theme',
+    description: 'Global theme for components',
+    defaultValue: 'light',
+    toolbar: {
+      icon: 'paintbrush',
+      // Array of plain string values or MenuItem shape
+      items: [
+        { value: 'light', title: 'Light', left: '🌞' },
+        { value: 'dark', title: 'Dark', left: '🌛' },
+      ],
+      // Change title based on selected value
+      dynamicTitle: true,
+    },
+  },
+};
 
 const preview: Preview = {
   parameters: {

.storybook/withVuetifyTheme.decorator.ts

@@ -0,0 +1,22 @@
+// .storybook/withVeutifyTheme.decorator.js
+import { h } from 'vue';
+import StoryWrapper from './StoryWrapper.vue';
+
+export const DEFAULT_THEME = 'light';
+
+export const withVuetifyTheme = (storyFn, context) => {
+  // Pull our global theme variable, fallback to DEFAULT_THEME
+  const themeName = context.globals.theme || DEFAULT_THEME;
+  const story = storyFn();
+
+  return () => {
+    return h(
+      StoryWrapper,
+      { themeName }, // Props for StoryWrapper
+      {
+        // Puts your story into StoryWrapper's "story" slot with your story args
+        story: () => h(story, { ...context.args }),
+      }
+    );
+  };
+};