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/preview-head.html 中的 Storybook 故事

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

透過 CDN 使用

將選定的樣式表載入到 .storybook/preview-head.html 中的故事

<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 Ferdinand Prantl

依據 MIT 授權條款授權。