---
title: Thèmes
description: 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.
```json 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 dégradé radial dérivé de votre couleur principale. Bordures arrondies (6-24px).
[Voir un exemple en direct](https://jamdesk.com/docs/introduction)
```json
{
"theme": "jam"
}
```
Mise en page avec logo dans l'en-tête et IBM Plex Mono sur l'ensemble du site. Fond crème chaud (`#FEFCF9`) en mode clair. Rayon de bordure minimal (2-8px).
[Voir un exemple en direct](https://nebula.jamdesk.com)
```json
{
"theme": "nebula"
}
```
Mise en page avec la barre latérale en premier, le logo dans la barre latérale et des indicateurs de navigation à bordure gauche. Pleine largeur avec contenu centré sur 780px. En-tête masqué par défaut.
[Voir un exemple en direct](https://pulsar.jamdesk.com)
```json
{
"theme": "pulsar"
}
```
## Typographie
Chaque thème inclut des polices chargées depuis Google Fonts :
| Thème | Titres | Corps | Code |
|-------|--------|-------|------|
| [Jam](https://jamdesk.com/docs/introduction) | Inter | Inter | JetBrains Mono |
| [Nebula](https://nebula.jamdesk.com) | IBM Plex Mono | IBM Plex Mono | IBM Plex Mono |
| [Pulsar](https://pulsar.jamdesk.com) | 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 :
```json
{
"fonts": {
"family": "Lora"
}
}
```
Utilisez des polices distinctes pour les titres et le corps :
```json
{
"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` :
```json
{
"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é](/fr/customization/custom-css#polices-externes).
## Couleurs personnalisées
Remplacez la palette par défaut pour correspondre à l'identité de votre marque :
```json
{
"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](https://coolors.co) ou [Realtime Colors](https://realtimecolors.com) pour générer une palette harmonieuse.
**Besoin de plus que des couleurs ?** Le [CSS personnalisé](/fr/customization/custom-css) 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` :
```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 :
1. Ouvrez DevTools
2. Appuyez sur Cmd+Shift+P (Mac) ou Ctrl+Shift+P (Windows)
3. Recherchez « Emulate CSS prefers-color-scheme: dark »
Pour un contrôle précis des styles en mode sombre, utilisez le [CSS personnalisé](/fr/customization/custom-css).
## Et ensuite ?
Personnalisez les logos, les couleurs et les favicons
Remplacez les styles du thème avec votre propre CSS
Configurez les onglets, les groupes et la structure des pages