可用主题
0.8.7 新增内容
主题仍然是为站点重新着色的最简单方式。如果您需要不同的布局结构(而不仅仅是颜色),请查看新的 模板 页面 —— 模板叠在主题之上,并附带它们自己的 EJS partials 和 CSS/JS bundle。
docmd 提供了一套专业设计的、亮/暗响应式主题。您只需在 docmd.config.json 中更改一个键,即可切换整个站点的外观。
如何切换主题
docmd.config.json
{
"theme": {
"name": "sky",
"appearance": "system"
}
}
内置主题画廊
| 主题 | 适用场景 | 风格 |
|---|---|---|
default |
低调文档 | 简洁、轻量、中性 |
sky |
产品文档 | 现代、高端、标准风格 |
ruby |
品牌识别 | 精致、衬线标题、鲜艳 |
retro |
开发工具 | 80年代终端、等宽、霓虹点缀 |
1. default
本文档站点所使用的主题。如果您计划添加大量自定义 CSS,并且不希望任何内置设计层干扰,请使用此主题。
2. sky
现代风格的文档外观,具有清晰的字体、细腻的过渡以及高对比度的亮/暗模式。
3. ruby
由衬线驱动的主题,配以深邃的宝石色调色板。适合需要权威感的文档。
4. retro
受复古计算启发的主题,深色模式下为黑底上的磷光绿文字,具有扫描线效果,并使用等宽字体(默认为 Fira Code)。
保留名称 —— 不要用作模板名
上述四个值(default、sky、ruby、retro)是仅有的保留 CSS 主题名。theme.name 中的任何其他值都会自动提升为模板名(请参阅 模板)。如果您想在模板上使用类似 CSS 主题的名称,请显式设置 theme.template。
主题架构
- CSS 分层:主题是可叠加的。选择
sky会加载基础的default样式,并在其上叠加sky调色板。 - 暗色模式:每个主题都包含内置的暗色模式实现。
- 实时切换:当用户通过 UI 切换主题时,SPA 引擎会更新相关的 CSS 变量而无需重新加载页面。
CSS 变量名称在不同主题之间略有不同(例如,--sky-primary 仅在 sky 下存在)。在请求自定义 CSS 帮助时提及您的主题名称可保持建议的准确性。