Storybook 自訂主題切換器

此擴充套件可用於在 Storybook 的 iframe HTML 元素中設定資料屬性，以觸發自訂主題之間的切換。

樣式範例

:root [data-theme="theme1"] {
  --white: #000;
  --black: #fff;
}

:root [data-theme="theme2"] {
  --white: #fff;
  --black: #000;
}

:root [data-theme="theme3"] {
  --white: #696969;
  --black: #700404;
}

安裝

NPM / Yarn

npm i -D storybook-custom-theme-switcher

yarn add storybook-custom-theme-switcher -D

將擴充套件新增至 .storybook/main.js

module.exports = {
  addons: ["storybook-custom-theme-switcher"],
};

將參數選項新增至 .storybook/preview.js

export const parameters = {
  theme: {
    selector: "body",
    dataAttr: "data-theme",
    /* Put all theme options in
    themeOptions. You can name
    customeTheme as you want.*/
    themeOptions: {
      default: "", // empty string for option to get back to default theme 
      customeTheme1: "theme1",
      customeTheme2: "theme2",
      customeTheme3: "theme3",
    },
    defaultTheme: "",
  },
};

參數

theme 參數接受 Theme 物件的陣列。

每個 Theme 都是具有以下屬性的物件

• selector (string - 預設值：'body')：將套用資料屬性的目標元素。
• dataAttr (string - 預設值：'data-theme')：將套用的資料屬性。
• themeOptions ({ [key: string]: string } - 預設值：{})：您要用作 Object 的主題。
• defaultTheme (string - 預設值：'' )：預設應使用的主題名稱。

使用方式

在 storybook 的工具列中按一下新的主題快顯視窗，以在主題之間切換。