主题

在 docs.json 中设置 theme，以控制布局、字体、间距和深色模式行为。共有四种主题：jam（默认）、nebula、pulsar 和 halo。

屏幕截图显示的是英文界面。

{
  "theme": "jam"
}

可用主题

JamNebulaPulsarHalo

默认主题。页眉徽标布局，背景使用基于主色生成的径向渐变。圆角边框（6-24px）。

查看在线示例

{
  "theme": "jam"
}

字体

每种主题都包含从 Google Fonts 加载的字体：

我们建议使用默认字体；它们针对每种主题进行了优化。如果需要不同的外观，可以在 docs.json 中设置 fonts，将整个网站切换为 Google Font：

{
  "fonts": {
    "family": "Lora"
  }
}

为标题和正文使用不同的字体：

{
  "fonts": {
    "heading": { "family": "Space Grotesk" },
    "body": { "family": "Inter" }
  }
}

任何 Google Font 都可以使用。只需设置 family，构建过程会自动获取该字体。若要自行托管自定义字体，请添加 source（URL 或相对于 / 的路径）和 format：

{
  "fonts": {
    "family": "AcmeSans",
    "source": "/fonts/acme-sans.woff2",
    "format": "woff2"
  }
}

设置 weight 可使用更轻（或更重）的正文。对于 Geist 等精致的几何字体，这一设置很有用：

{
  "fonts": {
    "family": "Geist",
    "weight": 200
  }
}

weight 仅设置正文文字的字重；标题会保留每种主题更重的字重，因此文字层级仍然清晰。它也适用于 body 形式："body": { "family": "Geist", "weight": 200 }。

如果需要进行超出 fonts 字段范围的设置（覆盖代码字体、调整各级标题的字重，或加载非 Google 网页字体），请参阅自定义 CSS。

自定义颜色

覆盖默认配色以匹配你的品牌标识：

{
  "theme": "jam",
  "colors": {
    "primary": "#635BFF",
    "light": "#7C75FF",
    "dark": "#4F46E5"
  }
}

暗色模式

所有主题都包含深色模式。默认情况下，Jamdesk 遵循用户的系统偏好，并在导航栏中提供切换开关。你的配色方案会自动适配。

在 docs.json 中使用 appearance 将网站固定为特定模式：

{
  "appearance": {
    "default": "dark",
    "strict": true
  }
}

单独设置 default 可建议初始模式，同时仍允许用户切换。添加 strict: true 可完全移除切换开关，并将网站锁定为该模式。

要在开发期间测试深色模式，请使用导航栏切换开关，或在 DevTools 中模拟该模式：

1. 打开 DevTools
2. 按 Cmd+Shift+P（Mac）或 Ctrl+Shift+P（Windows）
3. 搜索 "Emulate CSS prefers-color-scheme: dark"

如需精细控制深色模式样式，请使用自定义 CSS。

下一步