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.