Thèmes
Choisissez un thème intégré (Jam, Nebula, Pulsar, Halo, Dusk) qui gère typographie, mise en page et mode sombre, et adaptez les couleurs à votre marque.
Définissez theme dans docs.json pour contrôler la mise en page, la typographie, l'espacement et le comportement du mode sombre. Cinq thèmes sont disponibles : jam (par défaut), nebula, pulsar, halo et dusk.
Les captures d'écran montrent l'interface en anglais.
{
"theme": "jam"
}Essayez chaque thème sur cette documentation avant de choisir. Sélectionnez-en un sous Preview a theme en haut de la barre latérale. Sur mobile, ouvrez le menu de navigation. La preview dure jusqu'à la fermeture de votre navigateur.
Thèmes disponibles
Le thème par défaut. Disposition avec logo dans l'en-tête et arrière-plan en dégradé radial dérivé de votre couleur principale. Bordures arrondies (6-24 px).
{
"theme": "jam"
}Typographie
Chaque thème regroupe 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 |
| Halo | Figtree | Figtree | JetBrains Mono |
| Dusk | IBM Plex Serif | Inter | JetBrains Mono |
Nous recommandons les valeurs par défaut ; elles sont ajustées à chaque thème. Si vous souhaitez un rendu différent, définissez fonts dans docs.json pour remplacer la police de l'ensemble du site par une police Google Fonts :
{
"fonts": {
"family": "Lora"
}
}Utilisez des polices distinctes pour les titres et le corps de texte :
{
"fonts": {
"heading": { "family": "Space Grotesk" },
"body": { "family": "Inter" }
}
}N'importe quelle 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). Cela est utile pour les polices géométriques délicates comme Geist :
{
"fonts": {
"family": "Geist",
"weight": 200
}
}weight ne définit que le poids du texte du corps ; les titres conservent les poids plus élevés propres à chaque thème, de sorte que votre hiérarchie typographique reste intacte. Cela fonctionne aussi dans la forme body : "body": { "family": "Geist", "weight": 200 }.
Pour tout ce qui dépasse le champ fonts (remplacement des polices de code, ajustement des poids par niveau de titre, ou chargement de 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 couleurs de la page, l'espacement, les rayons de bordure, les styles des encadrés 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 de bascule 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 visiteurs lors de leur première visite |
strict | boolean | false | Lorsque true, masque le bouton de bascule de la barre de navigation afin que les visiteurs restent sur default |
Définissez default seul pour suggérer un mode de départ tout en laissant les utilisateurs basculer. Ajoutez strict: true pour supprimer entièrement le bouton de bascule et verrouiller le site sur ce mode.
Pour tester le mode sombre pendant le développement, utilisez le bouton de bascule de la barre de navigation ou simulez-le dans les DevTools :
- Ouvrez les 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é.