GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-03-31 05:03:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

theming changes added

Browse Source
This commit is contained in:
jonniebigodes 2023-01-19 17:46:26 +00:00
parent 19b9eb567b
commit 4b0346ba6b
6 changed files with 20 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/configure/storybook-custom-theme.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 90 KiB

After

Width:  |  Height:  |  Size: 45 KiB

BIN
docs/configure/storybook-starter-custom-theme.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 101 KiB

After

Width:  |  Height:  |  Size: 42 KiB

14
docs/configure/theming.md
View File

@ -12,9 +12,17 @@ Storybook includes two themes that look good out of the box: "light" and "dark".
Make sure you have installed [`@storybook/addons`](https://www.npmjs.com/package/@storybook/addons) and [`@storybook/theming`](https://www.npmjs.com/package/@storybook/theming) packages.
```sh
yarn add --dev @storybook/addons @storybook/theming
```
<!-- prettier-ignore-start -->
<CodeSnippets
paths={[
'common/storybook-theming-packages-install.yarn.js.mdx',
'common/storybook-theming-packages-install.npm.js.mdx',
'common/storybook-theming-packages-install.pnpm.js.mdx',
]}
/>
<!-- prettier-ignore-end -->
As an example, you can tell Storybook to use the "dark" theme by modifying [`.storybook/manager.js`](./overview.md#configure-story-rendering):

3
docs/snippets/common/storybook-theming-packages-install.npm.js.mdx Normal file
View File

@ -0,0 +1,3 @@
```shell
npm install --save-dev @storybook/addons @storybook/theming
```

3
docs/snippets/common/storybook-theming-packages-install.pnpm.js.mdx Normal file
View File

@ -0,0 +1,3 @@
```shell
pnpm add --save-dev @storybook/addons @storybook/theming
```

3
docs/snippets/common/storybook-theming-packages-install.yarn.js.mdx Normal file
View File

@ -0,0 +1,3 @@
```shell
yarn add --dev @storybook/addons @storybook/theming
```