New
Automatic visual tests in Storybook, plus 2.2x faster build times for React+TSVisual test with Chromatic
Star80,487
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Theme Switcher Addon
Storybook addon to switch themes
npm install theme-switcher-addon
Last updated over 1 year ago
4
Downloads per week
Readme View on GitHub

Storybook Theme Switcher Addon

Example styles:

:root {
  --white: #fff;
  --black: #000;
}

:root [data-theme="dark"] {
  --white: #000;
  --black: #fff;
}

Installation

npm i -D theme-switcher-addon

Add the addon to .storybook/main.js:

module.exports = {
  addons: ["theme-switcher-addon"],
};

Add parameters options to .storybook/preview.js:

export const parameters = {
  theme: {
    selector: ".your-selector",
    dataAttr: "data-your-attribute",
  },
};

Usage

Click on the new theme toggle in the toolbar to toggle between themes.

Join the community
6,324 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI