背景
选择装饰样式（渐变、点阵网格、磨砂光斑或纯色），按模式设置页面背景色，或调整 Jam 渐变的颜色和大小。
docs.json 中的 background 配置块用于控制页面背景。你可以选择四种装饰样式之一，按模式覆盖基础颜色，或调整默认渐变。
{
"theme": "jam",
"background": {
"decoration": "none",
"color": {
"light": "#faf7f2",
"dark": "#0a0a0d"
}
}
}所有字段均为可选。省略整个 background 配置块即可使用主题默认值。
decoration
为 Jam 主题的浅色模式选择背景样式。每个值都会在基础 --color-bg-primary 颜色之上渲染不同的图案。深色模式始终为纯色。
{
"background": {
"decoration": "grid"
}
}| 值 | 行为 |
|---|---|
gradient（默认） | 顶部锚定的径向渐变。可通过下方的 gradient 配置块调整 |
grid | 细微的点阵图案：1.5px 圆点，颜色为 --color-primary，不透明度 8%，间距 24px |
windows | 位于上方两个角落的两个柔和径向光斑（Windows 11 风格的磨砂效果） |
none | 平面 --color-bg-primary 填充，无装饰 |
decoration 仅影响 Jam 主题的浅色模式。无论如何，Nebula 和 Pulsar 都渲染纯色背景。Jam 深色模式始终为纯色。
color
按模式覆盖页面背景色。接受任意 CSS 颜色：十六进制、rgb(...)、rgba(...) 或 hsl(...)。
{
"background": {
"color": {
"light": "#faf7f2",
"dark": "#0a0a0d"
}
}
}| 字段 | 适用范围 |
|---|---|
color.light | 浅色模式页面背景 |
color.dark | 深色模式页面背景 |
只设置 light 即可覆盖浅色模式，并保留主题的深色默认值。只设置 dark 则相反。此配置适用于所有主题：Jam、Nebula、Pulsar、Halo 和 Dusk。
将 decoration: "none" 与 color 覆盖搭配使用，可获得平面的品牌背景。这在编辑风格或营销风格的文档中很常见。
gradient
调整 Jam 主题浅色模式的径向渐变。每个字段均为可选，且可独立生效。只设置 color 即可更换颜色，只设置 size 即可缩放。
{
"background": {
"gradient": {
"color": "#a855f7",
"size": "800px",
"position": "top center",
"opacity": 0.25
}
}
}| 字段 | 默认值 | 说明 |
|---|---|---|
color | 继承 colors.primary | 渐变颜色（任意 CSS 颜色） |
size | 500px | 半径。任意 CSS 长度（px、rem、%、vh） |
position | top center | 中心点。top/bottom/center/left/right 关键字、百分比或像素坐标 |
opacity | 0.12 | 中心处的峰值不透明度。0 到 1 之间的数字 |
gradient 仅在 decoration 为 gradient（或未设置）时生效。grid、windows 和 none 装饰会忽略此配置块。grid 和 windows 的图案颜色取自 --color-primary。可在 colors 配置块中修改。
浏览器支持
参数化渐变（CSS 变量读取）使用 color-mix()，需要：
- Chrome / Edge 111+
- Firefox 113+
- Safari 16.2+
较旧的浏览器会回退到原始的 Jam 渐变，并忽略你的 gradient 覆盖设置。
常用配置
{
"background": {
"decoration": "none",
"color": {
"light": "#faf7f2",
"dark": "#0a0a0d"
}
}
}常见于编辑风格的文档。适用于任何主题。
{
"background": {
"gradient": {
"color": "#a855f7",
"opacity": 0.15
}
}
}更换 Jam 渐变的颜色，但不改变其大小或位置。
{
"background": {
"gradient": {
"size": "1200px",
"position": "top left",
"opacity": 0.2
}
}
}更宽、更弥散的渐变，锚定在左上角。
{
"background": {
"decoration": "grid"
}
}以主题主色绘制淡色 24px 点阵网格。可在 docs.json 中通过 colors.primary 修改圆点颜色。
{
"background": {
"decoration": "windows"
}
}位于上方两个角落的两个柔和径向光斑，锚定在视口上。光斑颜色读取 --color-primary。
{
"background": {
"color": {
"dark": "#0d0d12"
}
}
}浅色模式保持主题默认值，深色模式使用自定义背景。