@pluralsight/ps-design-system-storybook-addon-theme
TypeScript icon, indicating that this package has built-in type declarations

9.1.25 • Public • Published

Storybook Addon Theme

Storybook Addon Theme can be used to change the background color and default theme inside the preview in Storybook.

Storybook screenshot

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 }
}

Package Sidebar

Install

npm i @pluralsight/ps-design-system-storybook-addon-theme

Weekly Downloads

77

Version

9.1.25

License

Apache-2.0

Unpacked Size

84.8 kB

Total Files

39

Last publish

Collaborators

  • jaketrent
  • danethurber
  • pluralsight