storybook-addon-background-themes
Switch between themes based on CSS custom properties
npm install storybook-addon-background-themes
4
Downloads per week
Readme View on GitHub
Storybook Addon Background Themes
Storybook Addon Background Themes can be used to change themes inside the preview in Storybook. The themes are simple sets of CSS custom properties.
Installation
npm i -D storybook-addon-background-themes
Configuration
Then, add following content to .storybook/main.js
:
module.exports = {
addons: ['storybook-addon-background-themes'],
};
Usage
Add a backgroundThemes
property to the configuration aparameters of
preview.js
:
export const parameters = {
backgroundThemes: {
base: {
// CSS custom properties that will be applied for each theme
"--some-base-custom-property": "blue",
},
themes: [
{
name: "Light",
previewValue: "#000",
properties: {
"--some-custom-property-for-light-mode": "#fff"
},
},
{
name: "Dark",
previewValue: "#000",
properties: {
"--some-custom-property-for-dark-mode": "#000"
},
},
],
},
};