Storybook Theme Switcher Addon
Example styles:
:root {
--white: #fff;
--black: #000;
}
:root [data-theme="dark"] {
--white: #000;
--black: #fff;
}
Installation
npm i -D theme-switcher-addon
Add the addon to .storybook/main.js
:
module.exports = {
addons: ["theme-switcher-addon"],
};
Add parameters options to .storybook/preview.js
:
export const parameters = {
theme: {
selector: ".your-selector",
dataAttr: "data-your-attribute",
},
};
Usage
Click on the new theme toggle in the toolbar to toggle between themes.