Storybook 自定义主题切换器

此插件可用于在 Storybook 的 iframe HTML 元素上设置一个 data 属性，以触发自定义主题之间的切换。

样式示例

: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'): 将应用 data 属性的目标元素。
• dataAttr (string - 默认值: 'data-theme'): 将应用的 data 属性。
• themeOptions ({ [key: string]: string } - 默认值: {}): 您希望用作 Object 的主题。
• defaultTheme (string - 默认值: ''): 默认情况下应使用的主题名称。

使用方法

点击 Storybook 工具栏中的新主题弹窗，切换您的主题。