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

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

您可能希望使用应用程序的画布样式创建一个自定义 Layout 组件，以获得更好的效果。

作者

标签