Fondo
Elige una decoración (degradado, cuadrícula, manchas esmeriladas o plano), define el color de fondo por modo, o ajusta el degradado de Jam.
El bloque background en docs.json controla el fondo de la página. Puedes elegir uno de cuatro tratamientos de decoración, sobrescribir el color base por modo, y ajustar el degradado predeterminado.
{
"theme": "jam",
"background": {
"decoration": "none",
"color": {
"light": "#faf7f2",
"dark": "#0a0a0d"
}
}
}Todos los campos son opcionales. Omite todo el bloque background 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) | Degradado radial anclado en la parte superior. Ajustable mediante el bloque gradient a continuación |
grid | Patrón sutil de cuadrícula de puntos: puntos de 1.5px en --color-primary al 8% de opacidad, espaciado de 24px |
windows | Dos manchas radiales suaves en las esquinas superiores (aspecto esmerilado estilo Windows 11) |
none | Relleno plano --color-bg-primary, sin decoración |
decoration solo afecta al modo claro del tema Jam. Nebula y Pulsar siempre renderizan fondos sólidos. En el modo oscuro de Jam, todos los valores se renderizan sólidos.
color
Sobrescribe el color de fondo de la página por modo. Acepta cualquier color CSS: hexadecimal, rgb(...), rgba(...), o hsl(...).
{
"background": {
"color": {
"light": "#faf7f2",
"dark": "#0a0a0d"
}
}
}| Campo | Se aplica a |
|---|---|
color.light | Fondo del cuerpo en modo claro |
color.dark | Fondo del cuerpo en modo oscuro |
Ambos campos son opcionales. Define solo light para sobrescribir el modo claro y mantener el valor oscuro predeterminado del tema, o viceversa. Funciona en todos los temas (Jam, Nebula, Pulsar).
Combina decoration: "none" con una sobrescritura de color para obtener un fondo plano y personalizado a tu marca. Esto es común en docs de estilo editorial o de marketing.
gradient
Ajusta el degradado radial del modo claro del tema Jam. Los cuatro campos son opcionales y se aplican de forma independiente. Define solo color para recolorear, o solo size para reducir o ampliar.
{
"background": {
"gradient": {
"color": "#a855f7",
"size": "800px",
"position": "top center",
"opacity": 0.25
}
}
}| Campo | Predeterminado | Descripción |
|---|---|---|
color | Hereda de colors.primary | Color del degradado (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 se 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.
Compatibilidad con navegadores
El degradado paramétrico (uso de variables CSS) utiliza color-mix(), que requiere:
- Chrome / Edge 111+
- Firefox 113+
- Safari 16.2+
Los navegadores más antiguos recurren al degradado original de Jam: renderizan el valor predeterminado de la marca e ignoran tus sobrescrituras 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 docs de estilo editorial. Funciona con cualquier tema.
{
"background": {
"gradient": {
"color": "#a855f7",
"opacity": 0.15
}
}
}Recolorea el degradado Jam sin cambiar su tamaño ni posición.
{
"background": {
"gradient": {
"size": "1200px",
"position": "top left",
"opacity": 0.2
}
}
}Degradado más ancho y difuso, anclado en la esquina superior izquierda.
{
"background": {
"decoration": "grid"
}
}Dibuja una cuadrícula de puntos tenue de 24px en el color primario de tu tema. Lee --color-primary, así que cambia el color de los puntos definiendo colors.primary en docs.json.
{
"background": {
"decoration": "windows"
}
}Dos manchas radiales suaves en las esquinas superiores, ancladas a la ventana gráfica. 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.