Thèmes
Choisissez un thème intégré — Jam, Nebula ou Pulsar — pour contrôler la typographie, la mise en page, l'espacement et le mode sombre. Personnalisez les couleurs pour correspondre à 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. Trois thèmes sont disponibles : jam (par défaut), nebula et pulsar.
Les captures d'écran montrent l'interface en anglais.
{
"theme": "jam"
}Thèmes disponibles
Le thème par défaut. Mise en page avec logo dans l'en-tête et fond dégradé radial dérivé de votre couleur principale. Bordures arrondies (6-24px).
{
"theme": "jam"
}Typographie
Chaque thème inclut 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 optimisées pour chaque thème. Si vous avez besoin d'un aspect différent, définissez fonts dans docs.json pour remplacer la police de l'ensemble du site par une Google Font :
{
"fonts": {
"family": "Lora"
}
}Utilisez des polices distinctes pour les titres et le corps :
{
"fonts": {
"heading": { "family": "Space Grotesk" },
"body": { "family": "Inter" }
}
}Toute Google Font est compatible — 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"
}
}Pour tout ce qui dépasse le champ fonts — remplacement des polices de code, ajustement des graisses par niveau de titre, ou chargement de webfonts 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 en 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 modifications.
Utilisez un outil de couleurs comme Coolors ou Realtime Colors pour générer une palette harmonieuse.
Besoin de plus que des couleurs ? Le CSS personnalisé vous permet de remplacer les polices, l'espacement, la largeur du contenu, les rayons de bordure, les styles de blocs d'appel et les détails au niveau des composants. Les thèmes définissent les valeurs par défaut ; le CSS personnalisé est l'échappatoire pour tout ce que 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 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 | Défaut | Description |
|---|---|---|---|
default | "system" | "light" | "dark" | "system" | Mode initial pour les nouveaux visiteurs |
strict | boolean | false | Lorsque true, masque le bouton bascule dans la barre de navigation afin que les visiteurs restent sur le mode default |
Définissez default seul pour suggérer un mode de départ tout en laissant les utilisateurs changer. Ajoutez strict: true pour supprimer entièrement le bouton bascule et verrouiller le site sur ce mode.
Pour tester le mode sombre en cours de développement, utilisez le bouton bascule de la barre de navigation ou émulez-en le comportement 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 en mode sombre, utilisez le CSS personnalisé.