Storybook 主題切換器擴充套件

範例樣式

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

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

安裝

npm i -D theme-switcher-addon

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

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

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

export const parameters = {
  theme: {
    selector: ".your-selector",
    dataAttr: "data-your-attribute",
  },
};

使用方式

點擊工具列上的新主題切換按鈕，即可在主題之間切換。