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"],
};

通过将 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构建并打包您的插件代码