Setup Decorator in VueJS preview.cjs

[ChristopherJohnson25]

Hi, I'd like to set up a decorator to switch .css file globally on preview.cjs in VueJs. Is this possible? I see some snippets for doing it on story level, but not globally.

[luckylooke]

Hi, quotation of docs:

The themes parameter also accept an object with the following properties:
Decorator (Component - optional): A component to use as the decorator component (see below for more information)
docs reference

combining with:

export default {
  title: 'CSF|Button',
  component: Button,
  decorators: [ withThemes ],
  parameters: {
    themes: {
      default: 'twitter',
      list: [
        { name: 'twitter', class: ['theme-twt', 'light-mode'], color: '#00aced' },
        { name: 'facebook', class: ['theme-fb', 'dark-mode'], color: '#3b5998' },
      ],
      Decorator: YourDecorator, //       <---------------- HERE
    },
  },
};

docs reference

[ChristopherJohnson25]

Thanks, can you be a little bit more explicit here? This is what I'm working with and cannot seem to get above to work as desired.

    import { addDecorator } from '@storybook/vue';
    import { themes } from '@storybook/theming';
    const StaticConfig = require('./static-config.js');
    import { withThemes } from 'storybook-addon-themes/vue';
    
    addDecorator(withThemes);
    
    const Decorator = {
      props: ['themeName'],
      template: `
        <div>
          <link v-if="themeName === 'twitter'" rel="stylesheet" href="Button-twt.css"/>
          <link v-if="themeName === 'facebook'" rel="stylesheet" href="Button-fb.css"/>
          <slot></slot>
        </div>
      `
    };
    
    export const parameters = {
      themes: {
        Decorator,
        default: 'iOS',
        list: StaticConfig.platforms
      },
    };
    
    export const decorators = [(story) => ({
        components: { story },
        template: '<div class="_app _con"><story /></div>',
      }),
    ];