New
Storybook’s Visual Tests addon enters betaVisual test with Chromatic
Star82,067
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Storybook theme switcher
Switch easily between multiple themes declared in your css files
npm install storybook-theme-switch-addon
Last updated 6 months ago
302
Downloads per week
Readme View on GitHub

Storybook theme/stylesheet switcher addon

Description

This addon allows you to switch easily between multiple themes declared in your CSS files. It's especially useful in Tailwind CSS if you have more themes in separate files.

In addition, on every theme change, your URL updates with a query param that points currently selected theme.

https://github.com/krzysztof01-sz/storybook-theme-switch-addon/assets/54471767/d38857f1-95ed-4a5a-a872-b51e78a5adcd

Acknowledgements

The idea and code parts were inspired by storybook-stylesheet-toggle addon.

Getting started

Install the package:

npm i storybook-theme-switch-addon

Add the next addon to your .storybook/main.(js,ts) file:

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

Configure your themes in .storybook/preview.(js,ts) by adding globalTypes to preview object:

globalTypes: {
  stylesheets: {
    themes: [
      {
        id: "primary-theme",
        title: "Primary theme",
        url: "./primary-theme.css",
      },
      {
        id: "secondary-theme",
        title: "Secondary theme",
        url: "./secondary-theme.css",
      },
      {
        id: "tertiary-theme",
        title: "Tertiary theme",
        url: "./tertiary-theme.css",
      },
    ],
  },
},

Remember to configure your storybook to serve static files in public directory:

const config: StorybookConfig = {
  {...options},
  staticDirs: ["../public"],
};

Development scripts

  • yarn start runs babel in watch mode and starts Storybook
  • yarn build build and package your addon code
Join the community
6,501 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI