Storybook 主題/樣式表切換器擴充套件

描述

此擴充套件可讓您輕鬆切換 CSS 檔案中宣告的多個主題。如果您在單獨的檔案中有更多主題，它在 Tailwind CSS 中特別有用。

此外，每次主題變更時，您的 URL 都會更新，並帶有一個指向目前所選主題的查詢參數。

https://github.com/krzysztof01-sz/storybook-theme-switch-addon/assets/54471767/d38857f1-95ed-4a5a-a872-b51e78a5adcd

感謝

這個想法和程式碼部分靈感來自 storybook-stylesheet-toggle 擴充套件。

開始使用

安裝套件

npm i storybook-theme-switch-addon

將下一個擴充套件新增到您的 .storybook/main.(js,ts) 檔案

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

透過將 globalTypes 新增到 preview 物件，在 .storybook/preview.(js,ts) 中設定您的主題

globalTypes: {
  stylesheets: {
    themes: [
      {
        id: "primary-theme",
        title: "Primary theme",
        url: "./primary-theme.css",
      },
      {
        id: "secondary-theme",
        title: "Secondary theme",
        url: "./secondary-theme.css",
      },
      {
        id: "tertiary-theme",
        title: "Tertiary theme",
        url: "./tertiary-theme.css",
      },
    ],
  },
},

請記住設定您的 Storybook 以服務 public 目錄中的靜態檔案

const config: StorybookConfig = {
  {...options},
  staticDirs: ["../public"],
};

開發指令碼

• yarn start 以監看模式執行 babel 並啟動 Storybook
• yarn build 建置並封裝您的擴充套件程式碼