New
Integrate Next.js and Storybook automaticallyAutomate with Chromatic
Star75,440
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
@pluralsight/ps-design-system-storybook-addon-theme
Storybook addon for Theme switching
npm install @pluralsight/ps-design-system-storybook-addon-theme
Last updated 8 months ago
2
Downloads per week
Readme View on GitHub

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 }
}
Join the community
5,858 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI