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"
        },
      },
    ],
  },
};