mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-06 06:31:27 +08:00
46 lines
1.6 KiB
Plaintext
46 lines
1.6 KiB
Plaintext
---
|
|
title: Themes
|
|
draft: true
|
|
sidebar:
|
|
order: 9
|
|
title: Themes
|
|
---
|
|
|
|
Storybook's [Themes](https://github.com/storybookjs/storybook/tree/next/code/addons/themes) addon allows you to switch between multiple themes for your components inside of the preview in [Storybook](https://storybook.js.org).
|
|
|
|
|
|
|
|
## Theme decorators
|
|
|
|
To make your themes accessible to your stories, `@storybook/addon-themes` exposes three [decorators](https://storybook.js.org/docs/writing-stories/decorators) for different methods of theming.
|
|
|
|
### JSX providers
|
|
|
|
For libraries that expose themes to components through providers, such as [Material UI](https://storybook.js.org/recipes/@mui/material/), [Styled-components](https://storybook.js.org/recipes/styled-components/), and [Emotion](https://storybook.js.org/recipes/@emotion/styled/), use the `withThemeFromJSXProvider`.
|
|
|
|
{/* prettier-ignore-start */}
|
|
|
|
<CodeSnippets path="storybook-addon-themes-jsx-provider-decorator.md" />
|
|
|
|
{/* prettier-ignore-end */}
|
|
|
|
### CSS classes
|
|
|
|
For libraries that rely on CSS classes on a parent element to determine the theme, you can use the `withThemeByClassName` decorator.
|
|
|
|
{/* prettier-ignore-start */}
|
|
|
|
<CodeSnippets path="storybook-addon-themes-classname-decorator.md" />
|
|
|
|
{/* prettier-ignore-end */}
|
|
|
|
### Data attributes
|
|
|
|
For libraries that rely on data attributes on a parent element to determine the theme, you can use the `withThemeByDataAttribute` decorator.
|
|
|
|
{/* prettier-ignore-start */}
|
|
|
|
<CodeSnippets path="storybook-addon-themes-data-attribute-decorator.md" />
|
|
|
|
{/* prettier-ignore-end */}
|