---
title: 主题
description: 选择内置主题（Jam、Nebula、Pulsar 或 Halo）来控制字体、布局、间距和暗色模式，并覆盖颜色以匹配品牌。
---
> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.
在 `docs.json` 中设置 `theme`，以控制布局、字体、间距和暗色模式行为。共有四种主题：`jam`（默认）、`nebula`、`pulsar` 和 `halo`。
屏幕截图显示的是英文界面。
```json docs.json
{
"theme": "jam"
}
```
## 可用主题
默认主题。采用标题栏-徽标布局，背景使用基于主色生成的径向渐变。圆角边框（6-24px）。
[查看在线示例](https://jamdesk.com/docs/introduction)
```json
{
"theme": "jam"
}
```
标题栏-徽标布局，整体使用 IBM Plex Mono。浅色模式下采用暖奶油色背景（`#FEFCF9`）。最小化圆角（2-8px）。
[查看在线示例](https://nebula.jamdesk.com)
```json
{
"theme": "nebula"
}
```
侧边栏优先布局，徽标位于侧边栏中，并使用左边框作为导航指示器。内容区域宽度为 780px 且居中。标题栏默认隐藏。
[查看在线示例](https://pulsar.jamdesk.com)
```json
{
"theme": "pulsar"
}
```
标题栏-徽标布局，整体使用 Figtree。暖沙色背景（`#F7F2E8`），内容显示在卡片上方。大圆角（8-28px）。
[查看在线示例](https://halo.jamdesk.com)
```json
{
"theme": "halo"
}
```
## 字体
每种主题都捆绑了从 Google Fonts 加载的字体：
| 主题 | 标题 | 正文 | 代码 |
|-------|----------|------|------|
| [Jam](https://jamdesk.com/docs/introduction) | Inter | Inter | JetBrains Mono |
| [Nebula](https://nebula.jamdesk.com) | IBM Plex Mono | IBM Plex Mono | IBM Plex Mono |
| [Pulsar](https://pulsar.jamdesk.com) | Inter | Inter | JetBrains Mono |
| [Halo](https://halo.jamdesk.com) | Figtree | Figtree | JetBrains Mono |
我们建议使用默认字体，它们针对各主题进行了调校。如果需要不同的外观，可以在 `docs.json` 中设置 `fonts`，将整个网站切换为某种 Google Font：
```json
{
"fonts": {
"family": "Lora"
}
}
```
为标题和正文使用不同的字体：
```json
{
"fonts": {
"heading": { "family": "Space Grotesk" },
"body": { "family": "Inter" }
}
}
```
任何 Google Font 都可以使用。只需设置 `family`，构建过程就会自动获取该字体。要自行托管自定义字体，请添加 `source`（URL 或相对于 `/` 的路径）和 `format`：
```json
{
"fonts": {
"family": "AcmeSans",
"source": "/fonts/acme-sans.woff2",
"format": "woff2"
}
}
```
设置 `weight` 可以使用更细（或更粗）的正文字体。这对 Geist 等精致的几何字体很有用：
```json
{
"fonts": {
"family": "Geist",
"weight": 200
}
}
```
`weight` 只设置**正文**文字的字重；标题保留各主题较粗的字重，因此文字层级仍然清晰。它也适用于 `body` 形式：`"body": { "family": "Geist", "weight": 200 }`。
如需进行超出 `fonts` 字段范围的设置（覆盖代码字体、调整各级标题的字重，或加载非 Google Web 字体），请参阅[自定义 CSS](/cn/customization/custom-css#外部字体)。
## 自定义颜色
覆盖默认调色板，以匹配品牌标识：
```json
{
"theme": "jam",
"colors": {
"primary": "#635BFF",
"light": "#7C75FF",
"dark": "#4F46E5"
}
}
```
| 颜色 | 用途 |
|-------|-------|
| `primary` | 链接、按钮、强调色 |
| `light` | 悬停状态、高亮 |
| `dark` | 激活状态、暗色模式强调色 |
颜色会在下一次构建后生效。在本地开发时，重启开发服务器即可查看更改。
使用 [Coolors](https://coolors.co) 或 [Realtime Colors](https://realtimecolors.com) 等配色工具生成协调的调色板。
**不只是颜色？**[自定义 CSS](/cn/customization/custom-css) 可以覆盖字体、间距、内容宽度、边框圆角、提示框样式以及组件级细节。主题设置默认值；对于 CSS 可以修改的其他内容，请使用自定义 CSS。
## 暗色模式
所有主题都包含暗色模式。默认情况下，Jamdesk 遵循用户的系统偏好，并在导航栏中提供切换开关。你的调色板会自动适配。
在 `docs.json` 中使用 `appearance`，将网站固定为特定模式：
```json
{
"appearance": {
"default": "dark",
"strict": true
}
}
```
| 字段 | 值 | 默认值 | 描述 |
|-------|--------|---------|-------------|
| `default` | `"system"` \| `"light"` \| `"dark"` | `"system"` | 首次访问者的初始模式 |
| `strict` | boolean | `false` | 为 `true` 时，隐藏导航栏切换开关，使访问者保持使用 `default` |
仅设置 `default` 可以建议初始模式，同时仍允许用户切换。添加 `strict: true` 可完全移除切换开关，将网站锁定为该模式。
要在开发期间测试暗色模式，请使用导航栏切换开关，或在 DevTools 中模拟该模式：
1. 打开 DevTools
2. 按 Cmd+Shift+P（Mac）或 Ctrl+Shift+P（Windows）
3. 搜索 "Emulate CSS prefers-color-scheme: dark"
如需精细控制暗色模式样式，请使用[自定义 CSS](/cn/customization/custom-css)。
## 下一步
自定义徽标、颜色和网站图标
使用自定义 CSS 覆盖主题样式
配置标签页、分组和页面结构