Storybook 插件背景主题

Storybook 插件背景主题可用于在 Storybook 中更改预览内的主题。这些主题是一组简单的 CSS 自定义属性。

安装

npm i -D storybook-addon-background-themes

配置

然后，将以下内容添加到 .storybook/main.js 中

module.exports = {
  addons: ['storybook-addon-background-themes'],
};

使用

在 preview.js 的配置参数中添加一个 backgroundThemes 属性

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