Storybook JS how to trigger the dark mode "channel" from my Vue component

466 Views Asked by At

I've installed the Storybook Js addon, "storybook-dark-mode-vue" (I'm not sure if it makes any difference whether or not I just used the default "storybook-dark-mode" addon) but I'm not sure how to trigger the "channels" from my vue component story.

My example story is:

import BToggle from './Toggle.vue';

export default {
  name: 'Components/Toggle',
  component: BToggle,
  // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
  parameters: {
    docs: {
      description: {
        component: 'Nothing to see here',
      },
    },
  },
  argTypes: {
    label: {
      control: { type: 'text' },
    },
    onToggle: {
      action: 'changed',
    },
  },
};

const Template = (args, { argTypes }) => ({
  components: { BToggle },
  props: Object.keys(argTypes),
  template: '<b-toggle v-bind="$props" @onToggle="onToggle"></b-toggle>',
});

export const Default = Template.bind({});
Default.args = {
  label: 'default',
};

The "onToggle" event works, I see the action being triggered in the Storybook "actions" tag, so how do I make it trigger the Storybook "STORYBOOK_DARK_MODE_VUE" event in my preview.js file?

My preview.js file has:

const channel = addons.getChannel();

channel.on('STORYBOOK_DARK_MODE_VUE', () => {
  console.log('activating dark mode');
});

channel.off('STORYBOOK_DARK_MODE_VUE', () => {
  console.log('activating dark mode');
});
0

There are 0 best solutions below