這個附加元件讓您可以在 Storybook 中切換 data-theme 屬性，方法是從工具列下拉選單中選擇一個定義的主題，並將選取的主題新增到 Storybook iframe html 元素的 data-theme 屬性。

如果您想使用不同的主題測試您的元件，這會很方便。

相容性

這個附加元件與 Storybook 版本 ^7.0.x | ^8.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 中

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

export const globalTypes = {
  dataThemes: {
    defaultValue: {
      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: "paintbrush",                   // optional
      },
    } satisfies ThemeConfig,
  },
};

若要設定預設的 data-theme 值，該值將在 Storybook 初始載入時使用，您可以將以下內容新增到您的 preview.js 檔案中

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

注意：請務必將 dataTheme 預設值與 list 陣列中定義的主題之一相符。

授權

此專案以 MIT 授權授權