Storybook 插件 theme-toggle
一个简单的插件,允许您更改所选 DOM 节点上的 data-*
值。
如果您的代码库中有类似这样的内容 ->
html[data-theme="dark"] {
@include darkTheme;
}
那么这个插件就是为您准备的。
设置
yarn add -D storybook-addon-dark-mode-toggle
或npm install --save-dev storybook-addon-dark-mode-toggle
.storybook/main.js
->addons: [..其他插件, 'storybook-addon-dark-mode-toggle']
,- 可选:在
preview.js
中data-theme-toggle
键下添加参数 - 将控制主题的所有
.[s]css
文件导入到.storybook/preview.js
中,例如import '../styles/theme/theme.scss';
(请参阅动机部分了解此文件可能的样子。) - 点击添加的图标切换主题
配置
可选,但如果您选择添加配置,则不能跳过任何字段。
您可以通过将以下内容添加到 .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
包含在我的主题文件 theme-light.scss
和 theme-dark.scss
中引用的“全局”自定义 CSS 属性(变量)(类似于 material 3 中令牌的工作方式)。然后我默认使用亮色主题,但通过 @media (prefers-color-scheme: dark)
尊重用户对深色主题的偏好。
我还允许用户通过 html
标签上的 data-theme
选择器在亮色和深色主题之间切换。
我未能找到一个合适的插件,可以让我快速切换 Storybook 中组件渲染使用的主题。有一些插件方向正确,特别是 storybook-theme-toggle 由 Antonis Zisis 开发。然而,它们缺乏配置支持,并且无法在不修改我的源代码的情况下直接集成到我的项目中。
因此,我着手创建一个简单的切换插件,它能做与 storybook-theme-toggle
相同的事情,但提供可选配置。
插件开发文档
开发脚本
yarn start
在 watch 模式下运行 babel 并启动 Storybookyarn build
构建并打包您的插件代码
元数据
Storybook 插件列在目录中,并通过 npm 分发。目录通过查询 npm 注册表中的 package.json
里 Storybook 特定的元数据填充。本项目已配置示例数据。在插件元数据文档中了解更多可用选项。
发布管理
设置
本项目配置使用 auto 进行发布管理。它会生成变更日志并推送到 GitHub 和 npm。因此,您需要配置对两者的访问权限
然后打开您的 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 action 将为您创建发布。
yarn release
这将
- 构建并打包插件代码
- 提升版本
- 将发布推送到 GitHub 和 npm
- 将变更日志推送到 GitHub