Storybook 主題 CSS 自訂屬性

此擴充功能可用於在 Storybook 的 iframe HTML 元素中設定資料屬性，觸發深色和淺色主題之間的切換。

範例樣式

:root {
  --white: #fff;
  --black: #000;
}

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

安裝

npm i -D storybook-theme-css-vars

將擴充功能加入至 .storybook/main.js

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

將參數選項加入至 .storybook/preview.js

export const parameters = {
  theme: {
    selector: "body (or your selector with data attribute)",
    dataAttr: "data-theme (or your data attribute)",
    nameLightTheme: "light (or your name of light theme)",
    nameDarkTheme: "dark (or your name of dark theme)",
  },
};

• nameLightTheme（可選，預設值為「light」）
• nameDarkTheme：（可選，預設值為「dark」）

使用方法

點擊工具列中的新主題切換按鈕，即可在深色和淺色模式之間切換。