Storybook 插件 theme-toggle

一个简单的插件，允许您更改您选择的 DOM 节点上的 data-* 值。

如果您在代码库中包含以下内容 ->

html[data-theme="dark"] {
  @include darkTheme;
}

那么这就是您的插件。

设置

1. yarn add -D storybook-addon-dark-mode-toggle 或 npm install --save-dev storybook-addon-dark-mode-toggle
2. .storybook/main.js -> addons: [..others, 'storybook-addon-dark-mode-toggle'],
3. 可选：在 preview.js 下以 data-theme-toggle 为键添加参数
4. 将控制主题的任何 .[s]css 文件导入 .storybook/preview.js，例如 import '../styles/theme/theme.scss'; （请参阅动机以了解此文件可能是什么样子）。
5. 单击添加的图标以切换主题

配置

可选，但如果您选择添加配置，则不能跳过任何字段。

您可以通过将以下内容添加到 .storybook/preview.js 来配置插件（显示默认值）

export const parameters = {
    'data-theme-toggle': {
    querySelector: "html",
    "data-target": "theme",
    default: "light",
    values: {
      dark: "dark",
      light: "light",
    },
    lightFill: "#a05b00",
    darkFill: "#0926b5",
  }  
};

• querySelector：将传递给 document.querySelector('selector') 调用的值，以获取将应用数据属性的 DOM 元素。
• data-target：将设置的数据属性的名称。以上默认值将为您提供 data-theme='light'
• default：dark 或 light，将根据 values 设置初始数据属性值
• values：数据属性将为深色/浅色主题设置的值
• lightFill：浅色模式下插件工具栏图标的填充颜色
• darkFill：深色模式下插件工具栏图标的填充颜色

制作此插件的动机

我通过在 :root {...} 选择器中设置默认主题变量，然后通过在其他选择器中覆盖这些变量来控制主题来完成我的主题。我所有的项目都有一个像这样的 theme.scss 文件 ->

@use "./theme-light.scss" as *;
@use "./theme-dark.scss" as *;

@import "./tokens.scss";

:root {
  @include lightTheme;
}

@media (prefers-color-scheme: dark) {
  :root {
    @include darkTheme;
  }
}

html[data-theme="light"] {
  @include lightTheme;
}

html[data-theme="dark"] {
  @include darkTheme;
}

其中 tokens.scss 包含在主题文件中引用的“全局”自定义 CSS 属性（变量），theme-light.scss 和 theme-dark.scss（类似于 Material 3 中令牌的工作方式）。然后我默认使用浅色主题，但通过 @media (prefers-color-scheme: dark) 尊重用户对深色主题的偏好。

我还允许用户通过 html 标签上的 data-theme 选择器在浅色主题和深色主题之间切换。

我无法找到一个合适的插件，它可以让我快速切换 Storybook 中呈现组件的主题。有一些插件走在正确的轨道上，尤其是 storybook-theme-toggle，由 Antonis Zisis 编写。但是，它们缺乏对配置的支持，无法在不更改源代码的情况下直接放入我的项目中。

因此，我开始创建一个简单的切换插件，它可以做与 storybook-theme-toggle 相同的事情，但具有可选的配置。

插件开发文档

开发脚本

• yarn start 在监视模式下运行 babel 并启动 Storybook
• yarn build 构建和打包您的插件代码

元数据

Storybook 插件列在 目录 中，并通过 npm 分发。目录通过查询 npm 的注册表以查找 package.json 中的 Storybook 特定元数据来填充。此项目已配置了示例数据。了解有关可用选项的更多信息，请参阅 插件元数据文档。

发布管理

设置

此项目已配置为使用 auto 进行发布管理。它会生成更改日志并将其推送到 GitHub 和 npm。因此，您需要配置对这两者的访问权限

• NPM_TOKEN 创建一个同时具有读取和发布权限的令牌。
• GH_TOKEN 创建一个具有 repo 范围的令牌。

然后打开您的 package.json 并编辑以下字段

• 名称
• 作者
• 存储库

本地

要本地使用 auto，请在项目的根目录中创建一个 .env 文件，并将您的令牌添加到其中

GH_TOKEN=<value you just got from GitHub>
NPM_TOKEN=<value you just got from npm>

最后，**在 GitHub 上创建标签**。您将在未来修改包时使用这些标签。

npx auto create-labels

如果您查看 GitHub，您现在会看到一组 auto 希望您使用的标签。使用这些标签来标记未来的拉取请求。

GitHub Actions

此模板已预先设置 GitHub Actions，以便在有人推送到您的存储库时发布您的插件。

转到 Settings > Secrets，单击 New repository secret，并添加您的 NPM_TOKEN。

创建发布

要本地创建发布，您可以运行以下命令，否则 GitHub Actions 将为您完成发布。

yarn release

这将

• 构建和打包插件代码
• 提升版本
• 将发布推送到 GitHub 和 npm
• 将更改日志推送到 GitHub