Arrière-plan
Choisissez une décoration (dégradé, grille de points, givré ou plat), réglez la couleur de fond par mode, ou ajustez couleur et taille du dégradé Jam.
Le bloc background dans docs.json contrôle l'arrière-plan de la page. Vous pouvez choisir l'un des quatre traitements de décoration, remplacer la couleur de base par mode, et ajuster le dégradé par défaut.
{
"theme": "jam",
"background": {
"decoration": "none",
"color": {
"light": "#faf7f2",
"dark": "#0a0a0d"
}
}
}Tous les champs sont facultatifs. Omettez l'intégralité du bloc background pour utiliser les valeurs par défaut du thème.
decoration
Choisissez le traitement d'arrière-plan pour le mode clair du thème Jam. Chaque valeur affiche un motif distinct sur la couleur de base --color-bg-primary ; le mode sombre s'affiche toujours en uni, quelle que soit la valeur.
{
"background": {
"decoration": "grid"
}
}| Valeur | Comportement |
|---|---|
gradient (par défaut) | Dégradé radial ancré en haut. Ajustable via le bloc gradient ci-dessous |
grid | Motif de grille de points discret : points de 1.5px en --color-primary à 8 % d'opacité, espacement de 24px |
windows | Deux taches radiales douces dans les coins supérieurs (aspect givré façon Windows 11) |
none | Remplissage plat --color-bg-primary, sans décoration |
decoration n'affecte que le mode clair du thème Jam. Nebula et Pulsar affichent toujours des arrière-plans unis. En mode sombre de Jam, toutes les valeurs s'affichent en uni.
color
Remplacez la couleur d'arrière-plan de la page par mode. Accepte toute couleur CSS : hexadécimal, rgb(...), rgba(...), ou hsl(...).
{
"background": {
"color": {
"light": "#faf7f2",
"dark": "#0a0a0d"
}
}
}| Champ | Applicable à |
|---|---|
color.light | Arrière-plan du corps en mode clair |
color.dark | Arrière-plan du corps en mode sombre |
Les deux champs sont facultatifs. Définissez uniquement light pour remplacer le mode clair et conserver la valeur sombre par défaut du thème, ou inversement. Fonctionne avec tous les thèmes (Jam, Nebula, Pulsar).
Associez decoration: "none" à un remplacement de color pour obtenir un arrière-plan plat et personnalisé à votre marque. C'est courant dans les docs de style éditorial ou marketing.
gradient
Ajustez le dégradé radial du mode clair du thème Jam. Les quatre champs sont facultatifs et s'appliquent indépendamment. Définissez uniquement color pour recolorer, ou uniquement size pour réduire ou agrandir.
{
"background": {
"gradient": {
"color": "#a855f7",
"size": "800px",
"position": "top center",
"opacity": 0.25
}
}
}| Champ | Par défaut | Description |
|---|---|---|
color | Hérite de colors.primary | Couleur du dégradé (toute couleur CSS) |
size | 500px | Rayon. Toute longueur CSS (px, rem, %, vh) |
position | top center | Point central. Mots-clés top/bottom/center/left/right, pourcentages, ou coordonnées en pixels |
opacity | 0.12 | Opacité maximale au centre. Nombre entre 0 et 1 |
gradient ne s'applique que lorsque decoration vaut gradient (ou n'est pas défini). Les décorations grid, windows et none ignorent ce bloc : grid et windows lisent --color-primary pour la couleur de leur motif, personnalisez donc celle-ci via le bloc colors à la place.
Compatibilité des navigateurs
Le dégradé paramétrique (utilisation de variables CSS) utilise color-mix(), qui nécessite :
- Chrome / Edge 111+
- Firefox 113+
- Safari 16.2+
Les navigateurs plus anciens reviennent au dégradé Jam d'origine : ils affichent la valeur par défaut de la marque et ignorent vos remplacements de gradient. Ce repli reste propre visuellement. Il ne peut simplement pas être personnalisé.
Recettes courantes
{
"background": {
"decoration": "none",
"color": {
"light": "#faf7f2",
"dark": "#0a0a0d"
}
}
}Courant dans les docs de style éditorial. Fonctionne avec tout thème.
{
"background": {
"gradient": {
"color": "#a855f7",
"opacity": 0.15
}
}
}Recolore le dégradé Jam sans changer sa taille ni sa position.
{
"background": {
"gradient": {
"size": "1200px",
"position": "top left",
"opacity": 0.2
}
}
}Dégradé plus large et plus diffus, ancré dans le coin supérieur gauche.
{
"background": {
"decoration": "grid"
}
}Dessine une grille de points discrète de 24px dans la couleur primaire de votre thème. Lit --color-primary, changez donc la couleur des points en définissant colors.primary dans docs.json.
{
"background": {
"decoration": "windows"
}
}Deux taches radiales douces dans les coins supérieurs, ancrées à la fenêtre d'affichage. Lit --color-primary pour la couleur des taches.
{
"background": {
"color": {
"dark": "#0d0d12"
}
}
}Conserve les valeurs par défaut du thème en mode clair, choisit un arrière-plan personnalisé en mode sombre.