New
Component Story Format 3 is hereAutomate with Chromatic
Storybook Day 2023
Star76,398
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 (CSS/data-*)
Storybook addon to switch css theme with the help of HTML data attribute
npm install storybook-addon-theme-switcher
Last updated 6 months ago
40
Downloads per week
Readme View on GitHub

Storybook Addon Theme Switcher (CSS/data-*)

Storybook addon to switch css theme with the help of HTML data attribute

demo of addon

Installation

npm i -D storybook-addon-theme-switcher

Getting started

Activate the addon by adding it to main.js

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

Configuration

You can configure the themes and data attribute name in preview.js:

export const parameters = {
  themeSwitcher: {
    themes: ["psychedelic", "dark"],
    dataAttribute: "tema", // This results in data-tema
  },
};
Join the community
5,883 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI