背景
选择背景装饰、按模式设置页面背景色，并调整 Jam 渐变的颜色和大小。
background 块控制 docs.json 中的页面背景。你可以选择四种装饰样式之一，按模式覆盖基础颜色，并调整默认渐变。
{
"theme": "jam",
"background": {
"decoration": "none",
"color": {
"light": "#faf7f2",
"dark": "#0a0a0d"
}
}
}所有字段都是可选的。省略整个 background 块即可使用主题默认值。
decoration
为 Jam 主题的浅色模式选择背景样式。每个值都会在基础 --color-bg-primary 颜色上渲染不同的图案；无论取值如何，深色模式始终渲染为纯色。
{
"background": {
"decoration": "grid"
}
}| 值 | 行为 |
|---|---|
gradient（默认） | 以顶部为锚点的径向渐变。可通过下方的 gradient 块进行调整 |
grid | 细微的点阵图案：--color-primary 颜色、8% 不透明度的 1.5px 圆点，间距为 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 可覆盖浅色模式并保留主题的深色默认值，反之亦然。适用于所有主题（Jam、Nebula、Pulsar）。
将 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 |
只有当 decoration 为 gradient（或未设置）时，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 点阵。它会读取 --color-primary，因此可以在 docs.json 中设置 colors.primary 来更改圆点颜色。
{
"background": {
"decoration": "windows"
}
}上方两个角落中有柔和的径向光斑，并以视口为锚点。它会读取 --color-primary 作为光斑颜色。
{
"background": {
"color": {
"dark": "#0d0d12"
}
}
}浅色模式保留主题默认值，同时为深色模式选择自定义背景。