Theme provider addon
Storybook addon to manage global themes provided by Styled components, Emotion or any other solution based on React component. Compatible with Storybook version 7
npm install storybook-addon-theme-provider
438
Downloads per week
Readme View on GitHub
Storybook Addon Theme Provider
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 version 7. Inspired by storybook-addon-themes.

Install
- 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",
//...
],
};
Use themes
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)]
};
Use Provider
component
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>
}