Storybook 主题切换

此插件可用于在 Storybook 的 iframe html 元素中设置一个 data 属性，从而触发深色和浅色模式之间的切换。

这需要在您的项目中进行适当的配置。

用例

您有一个使用 next-themes 的 React 应用来管理主题，它在 html 元素上添加一个 data 属性，您可以使用该属性来设置您的应用样式。

您将 CSS 打包到一个文件中并在 Storybook 中加载。

// .storybook/preview.ts
import './styles.css';

您的打包 CSS 包含深色和浅色模式样式。

您的主 CSS 文件中可能有类似以下内容

:root {
    --background: white;
    --foreground: black;
}

[data-color-theme='dark'] {
    --background: black;
    --foreground: white;
}

:warning: 警告！目前此插件仅适用于 data-color-theme 属性名称。

未来这将是可配置的。

安装

需要 Storybook 6.1 或更高版本。

使用 npm 安装模块

npm i -D storybook-theme-toggle

或使用 yarn

yarn add -D storybook-theme-toggle

然后，将以下内容添加到 .storybook/main.js 中

module.exports = {
    addons: ['storybook-theme-toggle'],
};

单击工具栏中的新主题切换按钮以切换深色和浅色模式。

您可能需要使用应用的画布样式创建一个自定义布局组件以获得更好的效果。

作者

标签