Storybook Addon Theme
Storybook Addon Theme can be used to change the background color and default theme inside the preview in Storybook.
Installation
Theme is part of @pluralsight/ps-design-system-storybook-preset or you can install it individually with:
npm i -D @pluralsight/ps-design-system-storybook-addon-theme
Configuration
Add the following to .storybook/main.js
:
module.exports = {
addons: ['@pluralsight/ps-design-system-storybook-addon-theme']
}
Usage
Stories will default to the dark
theme.
Override the default for a single story, all of a component's stories, or for all stories with the theme.name
parameter (see more instructions here):
theme: { name: 'light' }
Disable the theme with the theme.disable
parameter:
theme: { disable: true }
If you're using Storybook's addon-essentials you'll probably want to disable the Background
addon since it also sets the background. Add the following to .storybook/preview.js
:
parameters: {
backgrounds: { disable: true }
}