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

如果您想使用不同的主题测试组件，这将非常方便。

兼容性

此插件与 Storybook 版本 ^8.3.x 兼容。

注意：对于低于 8.3.x 的 Storybook 版本，请使用 storybook-addon-data-theme-switcher@0.4.2。在此处查找更多信息此处。

安装

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 的 initialGlobals 来定义和加载主题。

要定义一系列主题以及其他配置选项，您可以将以下内容添加到全局 Storybook 配置文件 preview.js 中

import type { ThemeConfig } from "storybook-addon-data-theme-switcher";

export const initialGlobals = {
  dataThemes: {
    list: [
      { name: "Rainforest", dataTheme: "rainforest", color: "#00755e" },
      { name: "Candy", dataTheme: "candy", color: "#ffb7d5" },
      { name: "Rose", dataTheme: "rose", color: "#ff007f" },
    ],
    dataAttribute: "data-theme",            // optional (default: "data-theme")
    clearable: true,                        // optional (default: true)
    toolbar: {
      title: "Change data-theme attribute", // optional
      icon: "PaintBrushIcon",               // optional
    },
  } satisfies ThemeConfig,
};

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

export const initialGlobals = {
  dataTheme: "rainforest",
  dataThemes: {
    ...
  },
};

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

许可协议

本项目根据 MIT License 获得许可