Thèmes

Définissez theme dans docs.json pour contrôler la mise en page, la typographie, l'espacement et le comportement du mode sombre. Trois thèmes sont disponibles : jam (par défaut), nebula et pulsar.

Les captures d'écran montrent l'interface en anglais.

docs.json

{
  "theme": "jam"
}

Thèmes disponibles

Le thème par défaut. Mise en page avec logo dans l'en-tête et fond en dégradé radial dérivé de votre couleur principale. Bordures arrondies (6-24px).

Voir un exemple en direct

{
  "theme": "jam"
}

Typographie

Chaque thème intègre des polices chargées depuis Google Fonts :

Thème	Titres	Corps	Code
Jam	Inter	Inter	JetBrains Mono
Nebula	IBM Plex Mono	IBM Plex Mono	IBM Plex Mono
Pulsar	Inter	Inter	JetBrains Mono

Nous recommandons les valeurs par défaut ; elles sont ajustées pour chaque thème. Pour un rendu différent, définissez fonts dans docs.json afin de remplacer la police de tout le site par une police Google Fonts :

{
  "fonts": {
    "family": "Lora"
  }
}

Utilisez des polices distinctes pour les titres et le corps :

{
  "fonts": {
    "heading": { "family": "Space Grotesk" },
    "body": { "family": "Inter" }
  }
}

Toute police Google Fonts fonctionne. Définissez simplement family et le build la récupère automatiquement. Pour héberger vous-même une police personnalisée, ajoutez source (URL ou chemin relatif commençant par /) et format :

{
  "fonts": {
    "family": "AcmeSans",
    "source": "/fonts/acme-sans.woff2",
    "format": "woff2"
  }
}

Définissez weight pour un corps de texte plus léger (ou plus épais). Pratique pour les polices géométriques délicates comme Geist :

{
  "fonts": {
    "family": "Geist",
    "weight": 200
  }
}

weight définit uniquement le poids du texte du corps ; les titres conservent les poids plus lourds propres à chaque thème, préservant ainsi votre hiérarchie typographique. Cela fonctionne aussi dans la forme body : "body": { "family": "Geist", "weight": 200 }.

Pour tout ce qui dépasse le champ fonts (remplacer les polices de code, ajuster les poids par niveau de titre, ou charger des polices web non-Google), consultez CSS personnalisé.

Couleurs personnalisées

Remplacez la palette par défaut pour correspondre à l'identité de votre marque :

{
  "theme": "jam",
  "colors": {
    "primary": "#635BFF",
    "light": "#7C75FF",
    "dark": "#4F46E5"
  }
}

Couleur	Utilisation
`primary`	Liens, boutons, accents
`light`	États de survol, mises en évidence
`dark`	États actifs, accents du mode sombre

Les couleurs prennent effet après votre prochain build. En développement local, redémarrez le serveur de développement pour voir les changements.

Utilisez un outil de couleurs comme Coolors ou Realtime Colors pour générer une palette harmonieuse.

Besoin de plus que des couleurs ? CSS personnalisé vous permet de remplacer les polices, l'espacement, la largeur du contenu, les rayons de bordure, les styles de callout et les détails au niveau des composants. Les thèmes définissent les valeurs par défaut ; le CSS personnalisé est la solution de secours pour tout ce que le CSS peut modifier.

Mode sombre

Tous les thèmes incluent le mode sombre. Par défaut, Jamdesk suit la préférence système de l'utilisateur et propose un bouton dans la barre de navigation. Votre palette de couleurs s'adapte automatiquement.

Fixez le site à un mode spécifique avec appearance dans docs.json :

{
  "appearance": {
    "default": "dark",
    "strict": true
  }
}

Champ	Valeurs	Par défaut	Description
`default`	`"system"` \| `"light"` \| `"dark"`	`"system"`	Mode initial pour les nouveaux visiteurs
`strict`	boolean	`false`	Lorsque `true`, masque le bouton de la barre de navigation pour que les visiteurs restent sur `default`

Définissez default seul pour suggérer un mode de départ tout en laissant les utilisateurs le changer. Ajoutez strict: true pour supprimer entièrement le bouton et verrouiller le site sur ce mode.

Pour tester le mode sombre en développement, utilisez le bouton de la barre de navigation ou émulez-le dans DevTools :

Ouvrez DevTools
Appuyez sur Cmd+Shift+P (Mac) ou Ctrl+Shift+P (Windows)
Recherchez "Emulate CSS prefers-color-scheme: dark"

Pour un contrôle précis des styles du mode sombre, utilisez CSS personnalisé.

Et ensuite ?

Image de marque

Personnalisez les logos, les couleurs et les favicons

CSS personnalisé

Remplacez les styles du thème par votre propre CSS

Navigation

Configurez les onglets, groupes et la structure des pages