storybook-docs-themes

设置 Storybook stories 中文档预览的主题颜色。

原始颜色和 VS Code Dark+ 主题颜色

通过 NPM 使用

使用 npm 安装样式表

npm i -D storybook-docs-themes

将样式表复制到 .storybook/main.js 中的输出目录

export default {
  staticDirs: [
    { from: '../node_modules/storybook-docs-themes/stylesheets', to: 'themes' }
  ]
}

在 .storybook/preview-head.html 中将选定的样式表加载到 Storybook stories 中

<link rel="stylesheet" href="themes/vscode-dark-plus.min.css">

另请参阅使用此样式表的 Storybook 项目示例。

通过 CDN 使用

在 .storybook/preview-head.html 中将选定的样式表加载到 stories 中

<link rel="stylesheet"
  href="https://unpkg.com/storybook-docs-themes@1.0.0/stylesheets/vscode-dark-plus.min.css">

主题

样式表位于分发包的 stylesheets 目录中。

VS Code Dark+

符合 VS Code 主题 "Dark+" 的颜色，并增强至 WCAG AAA 对比度。

vscode-dark-plus.css
vscode-dark-plus.min.css
vscode-dark-plus.min.css.map

贡献

没有正式的风格指南，请注意保持现有的编码风格。

许可证

版权所有 (C) 2023-2024 Ferdinand Prantl

根据 MIT 许可证授权。