Custom Theme Switcher
Theme switcher tool addon that changes the themes using CSS custom properties
Storybook Custom Theme Switcher
This addon can be used to set a data attribute in Storybook's iframe HTML element triggering a toggle between your custom themes.
Example styles:
:root [data-theme="theme1"] {
--white: #000;
--black: #fff;
}
:root [data-theme="theme2"] {
--white: #fff;
--black: #000;
}
:root [data-theme="theme3"] {
--white: #696969;
--black: #700404;
}
Installation
NPM / Yarn
npm i -D storybook-custom-theme-switcher
yarn add storybook-custom-theme-switcher -D
Add the addon to .storybook/main.js
:
module.exports = {
addons: ["storybook-custom-theme-switcher"],
};
Add parameters options to .storybook/preview.js
:
export const parameters = {
theme: {
selector: "body",
dataAttr: "data-theme",
/* Put all theme options in
themeOptions. You can name
customeTheme as you want.*/
themeOptions: {
default: "", // empty string for option to get back to default theme
customeTheme1: "theme1",
customeTheme2: "theme2",
customeTheme3: "theme3",
},
defaultTheme: "",
},
};
Parameters
The theme
parameter accept an array of Theme
object.
Each Theme
is an object with the following properties:
selector
(string
- default: 'body'): Target element to which the data Attribute will be applied.dataAttr
(string
- default: 'data-theme'): The data attribute that will be applied.themeOptions
({ [key: string]: string }
- default: {}): The themes you want to use as anObject
.defaultTheme
(string
- default: ''): The name of the theme that should be used on default.
Usage
Click on the new theme popup in the toolbar in storybook to switch between your themes.