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. Remplacez 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 arrière-plan à 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 |
La prise en charge des polices personnalisées sera disponible prochainement. Les thèmes utilisent actuellement les piles ci-dessus avec des polices système de secours.
Couleurs personnalisées
Remplacez la palette par défaut pour correspondre à votre identité de 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 changements.
Utilisez un outil de couleurs comme Coolors ou Realtime Colors pour générer une palette harmonieuse.
Mode sombre
Tous les thèmes incluent le mode sombre. Jamdesk suit la préférence système de l'utilisateur et fournit un bouton bascule dans la barre de navigation. Votre palette de couleurs s'adapte automatiquement.
Pour tester le mode sombre pendant le développement, utilisez le bouton bascule de la barre de navigation ou émullez-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é.