Storybook for SvelteKitAutomate with Chromatic
Storybook Day 2023
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 12 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
6,051 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software

Maintained by
Special thanks to Netlify and CircleCI