Storybook 自定义主题切换器

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

示例样式

: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'): 将应用数据属性的目标元素。
• dataAttr (string - 默认值: 'data-theme'): 将应用的数据属性。
• themeOptions ({ [key: string]: string } - 默认值: {}): 你想要使用的主题，作为 Object。
• defaultTheme (string - 默认值: ''): 默认使用的主题名称。

用法

点击 Storybook 工具栏中新主题弹出窗口，在主题之间切换。