Storybook Docs

Themes

Storybook's Themes addon allows you to switch between multiple themes for your components inside of the preview in Storybook.

Theme decorators

To make your themes accessible to your stories, @storybook/addon-themes exposes three decorators for different methods of theming.

JSX providers

For libraries that expose themes to components through providers, such as Material UI, Styled-components, and Emotion, use the withThemeFromJSXProvider.

Code Snippets
Oh no! We could not find the code you are looking for.
It would be great if you could report an issue on Github if you see that message.

CSS classes

For libraries that rely on CSS classes on a parent element to determine the theme, you can use the withThemeByClassName decorator.

Code Snippets
Oh no! We could not find the code you are looking for.
It would be great if you could report an issue on Github if you see that message.

Data attributes

For libraries that rely on data attributes on a parent element to determine the theme, you can use the withThemeByDataAttribute decorator.

Code Snippets
Oh no! We could not find the code you are looking for.
It would be great if you could report an issue on Github if you see that message.
Join the community

6,378 developers and counting
Open source software
Maintained by
Chromatic
Special thanks to Netlify and CircleCi