Theme switcher tool addon that changes the theme using CSS custom properties
npm install storybook-theme-css-varsThis addon can be used to set a data attribute in Storybook's iframe HTML
element triggering a toggle between dark and light theme.
Example styles:
``css
:root {
--white: #fff;
--black: #000;
}
:root [data-theme="dark"] {
--white: #000;
--black: #fff;
}
`
`bash`
npm i -D storybook-theme-css-vars
Add the addon to .storybook/main.js:
`js`
module.exports = {
addons: ["storybook-theme-css-vars"],
};
Add parameters options to .storybook/preview.js:
`js``
export const parameters = {
theme: {
selector: "body (or your selector with data attribute)",
dataAttr: "data-theme (or your data attribute)",
nameLightTheme: "light (or your name of light theme)",
nameDarkTheme: "dark (or your name of dark theme)",
},
};
- nameLightTheme (optional, default — "light")
- nameDarkTheme: (optional, default — "dark")
Click on the new theme toggle in the toolbar to toggle between dark and light mode.