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 versions 7 and 8
Storybook Addon Theme Provider
Maintainer's personal appeal to the users Hi, my name is Dima. I created this Storybook add-on. Thanks for choosing it for your project. Hope it helps you to achieve your goals and implement your ideas. At this moment I'm looking for as job as a Lead/Senior Front Developer in Berlin, Germany. So I would like to ask you to refer me to your company if this is relevant to your case. Here you can find my CV and portfolio. In case it is not relevant, giving a star 🌟 to add-on repo is also appreciated. I believe that having a popular open source project is helpful for a job search. Thanks and happy coding!
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
- 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>
}