Switching npm theme in Storybook

355 Views Asked by At

I have a brand pulled in via storybook and installed the theme switcher, plugin,

https://storybook.js.org/addons/storybook-addon-themes

What I am trying to do it update and dynamically set the brand (either main or subBrand) when the brand is changed in the dropdown.

There is a way to change a class and add a decorator but I have been through the documentation a few times but can't see a way to update the theme via the require().

This could be the wrong way to approach it. Am open to any suggestions.

let  theme = require("@mybrands/themes/dist/main").default;
// can also be let  theme = require("@mybrands/themes/dist/subBrand").default;

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
  themes: {
    default: 'main',
    list: [
      { name: 'main',  color: '#00aced' },
      { name: 'subBrand', color: '#3b5998' }
    ],
    onChange(theme) {
      console.log(theme)
    },
  },
}
export const decorators = [
  (Story) => (
      <ThemeProvider  theme={theme}>
        <Story />
      </ThemeProvider>
  ),
];
0

There are 0 best solutions below