此插件允许您在 Storybook 中切换 data-theme 属性，通过从工具栏下拉菜单中选择一个已定义的主题，并将选定的主题添加到 Storybook iframe HTML 元素的 data-theme 属性中。

这对于您想要测试组件在不同主题下的表现非常方便。

兼容性

此插件兼容 storybook 版本 ^7.0.x。

安装

npm install storybook-addon-data-theme-switcher --save-dev

入门

然后通过将其添加到 storybook 的 main.js 文件（位于 Storybook 配置目录中）来激活插件

module.exports = {
  addons: [
    // other addons here
    "storybook-addon-data-theme-switcher",
  ],
};

配置

该插件利用 storybook 的 globalTypes 来定义和加载主题。

要定义主题的选择，您可以将以下内容添加到您的全局 storybook 配置文件 preview.js 中

export const globalTypes = {
  dataThemes: {
    defaultValue: {
      list: [
        { name: "Rainforest", dataTheme: "rainforest", color: "#00755e" },
        { name: "Candy", dataTheme: "candy", color: "#ffb7d5" },
        { name: "Rose", dataTheme: "rose", color: "#ff007f" },
      ],
    },
  },
};

要设置默认的 data-theme 值，该值将在 storybook 初始加载时使用，您可以将以下内容添加到您的 preview.js 文件中

export const globalTypes = {
  dataTheme: {
    defaultValue: "rainforest",
  },
};

注意：确保 dataTheme 的默认值与 list 数组中定义的主题之一匹配。

许可

本项目采用 MIT 许可证