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.

Screen.Recording.2023-09-01.at.23.59.47.mov

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