Fondo
Elige una decoración (gradiente, cuadrícula de puntos, manchas esmeriladas o plano), anula el color de fondo por modo, o ajusta el gradiente de Jam.
El bloque background en docs.json controla el fondo de la página. Puedes elegir uno de cuatro tratamientos de decoración, anular el color base por modo y ajustar el gradiente predeterminado.
{
"theme": "jam",
"background": {
"decoration": "none",
"color": {
"light": "#faf7f2",
"dark": "#0a0a0d"
}
}
}Todos los campos son opcionales. Omite el bloque background completo para usar los valores predeterminados del tema.
decoration
Elige el tratamiento de fondo para el modo claro del tema Jam. Cada valor renderiza un patrón distinto sobre el color base --color-bg-primary; el modo oscuro siempre se renderiza sólido sin importar el valor.
{
"background": {
"decoration": "grid"
}
}| Valor | Comportamiento |
|---|---|
gradient (predeterminado) | Gradiente radial anclado en la parte superior. Ajustable mediante el bloque gradient de abajo |
grid | Patrón sutil de cuadrícula de puntos: puntos de 1.5px en --color-primary con 8% de opacidad, espaciado de 24px |
windows | Dos manchas radiales suaves en las esquinas superiores (estilo esmerilado de Windows 11) |
none | Relleno plano --color-bg-primary, sin decoración |
decoration solo afecta al modo claro del tema Jam. Nebula y Pulsar renderizan fondos sólidos sin importar el valor. En el modo oscuro de Jam, todos los valores se renderizan sólidos.
color
Anula el color de fondo de la página por modo. Acepta cualquier color CSS: hex, rgb(...), rgba(...), o hsl(...).
{
"background": {
"color": {
"light": "#faf7f2",
"dark": "#0a0a0d"
}
}
}| Campo | Aplica a |
|---|---|
color.light | Fondo del cuerpo en modo claro |
color.dark | Fondo del cuerpo en modo oscuro |
Ambos campos son opcionales. Establece solo light para anular el modo claro y conservar el valor predeterminado oscuro del tema, o viceversa. Funciona en todos los temas (Jam, Nebula, Pulsar).
Combina decoration: "none" con una anulación de color para lograr un fondo plano y de marca. Esto es común en documentación de estilo editorial o de marketing.
gradient
Ajusta el gradiente radial del modo claro del tema Jam. Los cuatro campos son opcionales y se aplican de forma independiente. Establece solo color para recolorear, o solo size para reducir o expandir.
{
"background": {
"gradient": {
"color": "#a855f7",
"size": "800px",
"position": "top center",
"opacity": 0.25
}
}
}| Campo | Predeterminado | Descripción |
|---|---|---|
color | Hereda colors.primary | Color del gradiente (cualquier color CSS) |
size | 500px | Radio. Cualquier longitud CSS (px, rem, %, vh) |
position | top center | Punto central. Palabras clave top/bottom/center/left/right, porcentajes, o coordenadas en píxeles |
opacity | 0.12 | Opacidad máxima en el centro. Número entre 0 y 1 |
gradient solo aplica cuando decoration es gradient (o no está definido). Las decoraciones grid, windows y none ignoran este bloque: grid y windows leen --color-primary para el color de su patrón, así que personalízalo mediante el bloque colors en su lugar.
Soporte de navegadores
El gradiente paramétrico (consumo de variables CSS) usa color-mix(), que requiere:
- Chrome / Edge 111+
- Firefox 113+
- Safari 16.2+
Los navegadores más antiguos recurren al gradiente original de Jam: renderizan el valor predeterminado de la marca e ignoran tus anulaciones de gradient. El respaldo en sí se ve limpio. Simplemente no se puede personalizar.
Recetas comunes
{
"background": {
"decoration": "none",
"color": {
"light": "#faf7f2",
"dark": "#0a0a0d"
}
}
}Común en documentación de estilo editorial. Funciona en cualquier tema.
{
"background": {
"gradient": {
"color": "#a855f7",
"opacity": 0.15
}
}
}Recolorea el gradiente de Jam sin cambiar su tamaño ni posición.
{
"background": {
"gradient": {
"size": "1200px",
"position": "top left",
"opacity": 0.2
}
}
}Gradiente más amplio y difuso anclado en la esquina superior izquierda.
{
"background": {
"decoration": "grid"
}
}Pinta una tenue cuadrícula de puntos de 24px en el color primario de tu tema. Lee --color-primary, así que cambia el color de los puntos estableciendo colors.primary en docs.json.
{
"background": {
"decoration": "windows"
}
}Dos manchas radiales suaves en las esquinas superiores, ancladas al viewport. Lee --color-primary para el color de las manchas.
{
"background": {
"color": {
"dark": "#0d0d12"
}
}
}Mantiene los valores predeterminados del tema en modo claro, elige un fondo personalizado para el modo oscuro.