Integrate Next.js and Storybook automaticallyAutomate with Chromatic
Back to integrations
Add your integration
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Storybook addon for Theme switching
npm install @pluralsight/ps-design-system-storybook-addon-theme
Last updated 8 months ago
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


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

Maintained by
Special thanks to Netlify and CircleCI