Storybook addon for Theme switching
npm install @pluralsight/ps-design-system-storybook-addon-theme
Downloads per week

Storybook Addon Theme

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

Storybook screenshot


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


Add the following to .storybook/main.js:

module.exports = {
  addons: ['@pluralsight/ps-design-system-storybook-addon-theme']


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 }