chore: add Vue 3 example for reactive toolbar decorator

examples/vue-3-cli/.storybook/preview-head.html

@@ -0,0 +1,14 @@
+<style>
+  .light-theme {
+    --test: #ff0;
+  }
+
+  .dark-theme {
+    --test: #f00;
+  }
+
+  .theme {
+    background-color: var(--test);
+    padding: 1rem;
+  }
+</style>

examples/vue-3-cli/.storybook/preview.ts

@@ -9,6 +9,22 @@ export const parameters: Parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
 };
 
+// A toolbar item to set a global theme
+export const globalTypes = {
+  theme: {
+    name: 'Theme',
+    description: 'Global theme for components',
+    defaultValue: 'light-theme',
+    toolbar: {
+      icon: 'paintbrush',
+      items: [
+        { value: 'light-theme', title: 'Light theme' },
+        { value: 'dark-theme', title: 'Dark theme' },
+      ],
+    },
+  },
+};
+
 export const decorators: Decorators = [
   () => ({
     template: '<div id="test-div"><story /></div>',

examples/vue-3-cli/src/stories/ThemeDecorator.stories.js

@@ -0,0 +1,36 @@
+// Just going to use the Button component for this example
+import MyButton from './Button.vue';
+
+const withTheme = (Story, context) => {
+  return {
+    data() {
+      return {
+        theme: context.globals.theme,
+      };
+    },
+    template: `<div class="theme" :class="theme"><story /></div>`,
+  };
+};
+
+export default {
+  title: 'Example/Theme Decorator',
+  component: MyButton,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+    size: { control: { type: 'select', options: ['small', 'medium', 'large'] } },
+    onClick: {},
+  },
+  decorators: [withTheme],
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { MyButton },
+  template: '<my-button @click="onClick" v-bind="$props" />',
+});
+
+export const ButtonWithTheme = Template.bind({});
+ButtonWithTheme.args = {
+  primary: true,
+  label: 'Button',
+};