主题

在 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 Web 字体），请参阅自定义 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。

下一步