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>
),
];