Storybook 主题/样式表切换器插件

描述

这个插件可以让你轻松切换 CSS 文件中声明的多个主题。如果你在不同的文件中有多个主题，这在 Tailwind CSS 中尤其有用。

此外，每次切换主题时，你的 URL 会更新一个查询参数，指向当前选定的主题。

https://github.com/krzysztof01-sz/storybook-theme-switch-addon/assets/54471767/d38857f1-95ed-4a5a-a872-b51e78a5adcd

致谢

这个想法和部分代码灵感来源于 storybook-stylesheet-toggle 插件。

开始使用

安装包

npm i storybook-theme-switch-addon

将此插件添加到你的 .storybook/main.(js,ts) 文件中

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

通过在 preview 对象中添加 globalTypes 来配置你的主题，位于 .storybook/preview.(js,ts) 文件中

globalTypes: {
  stylesheets: {
    themes: [
      {
        id: "primary-theme",
        title: "Primary theme",
        url: "./primary-theme.css",
      },
      {
        id: "secondary-theme",
        title: "Secondary theme",
        url: "./secondary-theme.css",
      },
      {
        id: "tertiary-theme",
        title: "Tertiary theme",
        url: "./tertiary-theme.css",
      },
    ],
  },
},

记住配置你的 storybook 以服务 public 目录下的静态文件

const config: StorybookConfig = {
  {...options},
  staticDirs: ["../public"],
};

开发脚本

• yarn start 以监听模式运行 babel 并启动 Storybook
• yarn build 构建并打包你的插件代码