Storybook 擴充套件 theme-toggle

簡單的擴充套件，允許您變更所選 DOM 節點上的 data-* 值。

如果您的程式碼庫中有類似以下內容 ->

html[data-theme="dark"] {
  @include darkTheme;
}

那麼這就是適合您的外掛程式。

設定

1. yarn add -D storybook-addon-dark-mode-toggle 或 npm install --save-dev storybook-addon-dark-mode-toggle
2. .storybook/main.js -> addons: [..others, 'storybook-addon-dark-mode-toggle'],
3. 可選：在 preview.js 中，於 data-theme-toggle 鍵底下新增參數
4. 將控制您佈景主題的任何 .[s]css 檔案匯入 .storybook/preview.js，例如 import '../styles/theme/theme.scss'; （請參閱動機，了解此檔案可能的外觀。）
5. 按一下新增的圖示以切換佈景主題

組態

可選，但如果您選擇新增組態，則不能略過任何欄位。

您可以透過將以下內容新增至 .storybook/preview.js 來設定擴充套件（顯示預設值）

export const parameters = {
    'data-theme-toggle': {
    querySelector: "html",
    "data-target": "theme",
    default: "light",
    values: {
      dark: "dark",
      light: "light",
    },
    lightFill: "#a05b00",
    darkFill: "#0926b5",
  }  
};

• querySelector：將傳遞至 document.querySelector('selector') 呼叫的值，以取得將套用您的 data 屬性的 DOM 元素。
• data-target：將設定的 data 屬性的名稱。上述預設值會提供您 data-theme='light'
• default：dark 或 light，將根據 values 設定初始 data 屬性值
• values：data 屬性將針對深色/淺色佈景主題設定的值
• lightFill：淺色模式中擴充套件工具列圖示的填滿顏色
• darkFill：深色模式中擴充套件工具列圖示的填滿顏色

製作此擴充套件的動機

我透過在 :root {...} 選取器中設定預設佈景主題變數，然後在其他選取器中覆寫這些變數來控制佈景主題。我的所有專案都有一個類似以下的 theme.scss 檔案 ->

@use "./theme-light.scss" as *;
@use "./theme-dark.scss" as *;

@import "./tokens.scss";

:root {
  @include lightTheme;
}

@media (prefers-color-scheme: dark) {
  :root {
    @include darkTheme;
  }
}

html[data-theme="light"] {
  @include lightTheme;
}

html[data-theme="dark"] {
  @include darkTheme;
}

其中 tokens.scss 具有「全域」自訂 CSS 屬性（變數），這些屬性會在我的佈景主題檔案 theme-light.scss 和 theme-dark.scss 中參照（類似 material 3 中的符記運作方式）。然後，我預設為淺色佈景主題，但尊重使用者使用 @media (prefers-color-scheme: dark) 的深色佈景主題偏好設定。

我也允許使用者透過 html 標籤上的 data-theme 選取器，在淺色和深色佈景主題之間切換。

我找不到適合的擴充套件，可讓我快速切換我的元件在 Storybook 中轉譯時所使用的佈景主題。有一些擴充套件方向正確，特別是 storybook-theme-toggle by Antonis Zisis。但是，它們缺乏對組態的支援，且無法在不變更我的原始碼的情況下置入我的專案。

因此，我開始建立一個簡單的切換外掛程式，其可執行與 storybook-theme-toggle 相同的功能，但具有可選組態。

擴充套件開發文件

開發指令碼

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

中繼資料

Storybook 擴充套件列於目錄中，並透過 npm 分散。目錄透過在 package.json 中查詢 npm 的登錄，以尋找 Storybook 特有的中繼資料來填入。此專案已設定範例資料。請在擴充套件中繼資料文件中進一步了解可用的選項。

發佈管理

設定

此專案設定為使用 auto 進行發佈管理。它會產生變更記錄，並將其推送至 GitHub 和 npm。因此，您需要設定對兩者的存取權

• NPM_TOKEN 建立具有讀取和發佈權限的符記。
• GH_TOKEN 建立具有 repo 範圍的符記。

然後開啟您的 package.json 並編輯以下欄位

• name
• author
• repository

本機

若要在本機使用 auto，請在您的專案根目錄中建立 .env 檔案，並將您的符記新增至其中

GH_TOKEN=<value you just got from GitHub>
NPM_TOKEN=<value you just got from npm>

最後，在 GitHub 上建立標籤。您在未來變更套件時會使用這些標籤。

npx auto create-labels

如果您在 GitHub 上檢查，現在將會看到一組 auto 希望您使用的標籤。使用這些標籤標記未來的提取要求。

GitHub Actions

此範本已設定 GitHub Actions，以便在有人推送至您的存放庫時發佈您的擴充套件。

前往 Settings > Secrets，按一下 New repository secret，並新增您的 NPM_TOKEN。

建立發佈

若要在本機建立發佈，您可以執行下列命令，否則 GitHub 動作會為您進行發佈。

yarn release

這將

• 建置並封裝擴充套件程式碼
• 遞增版本
• 將發佈推送至 GitHub 和 npm
• 將變更記錄推送至 GitHub