Storybook theme switcher
Switch easily between multiple themes declared in your css files
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.
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 Storybookyarn build
build and package your addon code