主题

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

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

{
  "theme": "jam"
}

可用主题

JamNebulaPulsarHaloDusk

默认主题。采用带有页眉和 Logo 的布局，背景使用从主色派生的径向渐变。边框圆角为 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。

下一步