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:

```typescript jsx theme: { disable: true }

If you're using Storybook's [addon-essentials](https://storybook.js.org/docs/react/essentials/introduction) you'll probably want to disable the `Background` addon since it also sets the background. Add the following to `.storybook/preview.js`:
```js
parameters: {
  backgrounds: { disable: true }
}