Arrière-plan
Choisissez une décoration, redéfinissez la couleur d'arrière-plan par mode, ou ajustez couleur, taille, position et opacité 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, redéfinir 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 affiche toujours un fond 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 discret de grille de points : points de 1.5px en --color-primary à 8% d'opacité, espacement de 24px |
windows | Deux spots radiaux doux dans les coins supérieurs (style givré à la Windows 11) |
none | Remplissage uni en --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
Redéfinissez la couleur d'arrière-plan de la page par mode. Accepte n'importe quelle couleur CSS : hexadécimale, rgb(...), rgba(...), ou hsl(...).
{
"background": {
"color": {
"light": "#faf7f2",
"dark": "#0a0a0d"
}
}
}| Champ | S'applique à |
|---|---|
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 redéfinir le mode clair et conserver la valeur par défaut sombre du thème, ou inversement. Fonctionne sur tous les thèmes (Jam, Nebula, Pulsar).
Combinez decoration: "none" avec une redéfinition de color pour un arrière-plan uni et personnalisé. C'est courant dans les documentations 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é (n'importe quelle couleur CSS) |
size | 500px | Rayon. N'importe quelle 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-la donc via le bloc colors.
Prise en charge des navigateurs
Le dégradé paramétrique (consommation de variable 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 redéfinitions de gradient. Le repli lui-même a un rendu propre. Il ne peut simplement pas être personnalisé.
Recettes courantes
{
"background": {
"decoration": "none",
"color": {
"light": "#faf7f2",
"dark": "#0a0a0d"
}
}
}Courant dans les documentations de style éditorial. Fonctionne sur tous les thèmes.
{
"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 de 24px discrète dans la couleur primaire de votre thème. Lit --color-primary, donc changez la couleur des points en définissant colors.primary dans docs.json.
{
"background": {
"decoration": "windows"
}
}Deux spots radiaux doux dans les coins supérieurs, ancrés à la fenêtre d'affichage. Lit --color-primary pour la couleur des spots.
{
"background": {
"color": {
"dark": "#0d0d12"
}
}
}Conserve les valeurs par défaut du thème en mode clair, choisit un arrière-plan personnalisé pour le mode sombre.