storybook-docs-themes

在 Storybook 故事中设置文档预览的主题颜色。

原始颜色和根据 VS Code Dark+ 主题的颜色

通过 NPM 使用

使用 npm 安装样式表

npm i -D storybook-docs-themes

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

module.exports = {
  staticDirs: [
    { from: '../node_modules/storybook-docs-themes/stylesheets', to: 'themes' }
  ]
}

将选定的样式表加载到 Storybook 故事中，位于 .storybook/preview-head.html

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

通过 CDN 使用

将选定的样式表加载到故事中，位于 .storybook/preview-head.html

<link rel="stylesheet"
  href="https://unpkg.com/[email protected]/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 Ferdinand Prantl

根据 MIT 许可证 授权。