Storybook 背景主题插件
Storybook 背景主题插件可用于在 Storybook 的预览中更改主题。主题是简单的 CSS 自定义属性集合。
安装
npm i -D storybook-addon-background-themes
配置
然后,将以下内容添加到 .storybook/main.js
module.exports = {
addons: ['storybook-addon-background-themes'],
};
用法
将 backgroundThemes
属性添加到 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"
},
},
],
},
};