Addon to manage global themes provided by Styled components, Emotion or any other solution based on React component, which receives prop theme?: Record<string, unknown>
and children node(s). This addon is compatible with Storybook versions 7 and 8.
Inspired by storybook-addon-themes.
- Install addon with the package manager of your choice.
npm i -D storybook-addon-theme-provider
yarn add -D storybook-addon-theme-provider
pnpm i -D storybook-addon-theme-provider
- Register addon in
.storybook/main.(js|ts)
export default {
//...
addons: [
//...
"storybook-addon-theme-provider",
//...
],
};
Add decorator withThemeProvider
to .storybook/preview.(js|ts)
. This applies theme settings on global level.
import {withThemeProvider} from 'storybook-addon-theme-provider';
import {Provider} from './Provider';
export default {
//...
decorators:[
withThemeProvider(Provider),
///...
],
globals: {
// Set initially selected theme name
selectedTheme: 'foo',
// Provide a list of available themes
themes: [
{
// Provide a name for the theme.
name: 'foo',
// Set a color to display after theme name
color: 'red',
// Provide object with foo theme data
themeObject: {
baseColor: 'red',
//...
}
},
{
name: 'bar',
color: '#AAAAAA',
themeObject: {
baseColor: 'green',
}
}
]
},
//...
}
It's also possible to enable decorator on story level.
// some CSF story file
export const story = {
decorators: [withThemeProvider(Provider)]
};
Provider
is a React component which receives theme
prop, containing selected theme object, and children
nodes. See Styled component theming or Emotion
ThemeProvider.
Developer can use custom Provider
component as well.
import React, {ReactNode} from 'react';
export const Provider = <TTheme,>({children, theme}: {children?: ReactNode; theme?: TTheme}) => {
// apply theme somehow
console.log('theme', theme)
return <div>{children}</div>
}