New
I18n with StorybookAutomate with Chromatic
Star74,141
View full catalog
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon Add to the catalog
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 about 1 month ago
64
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,777 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI