Choisir le thème clair, sombre ou système¶
Vous êtes visiteur·se de Kirexo et vous voulez régler l'apparence de l'interface en clair, en sombre, ou la faire suivre votre système d'exploitation. Ce réglage est propre à votre navigateur : il n'affecte que ce que vous voyez, et reste mémorisé d'une visite à l'autre.
Prérequis¶
- Aucun. Le sélecteur de thème est présent dans l'entête de tous les écrans, y compris la page d'accueil publique : pas besoin d'être connecté·e.
- Un navigateur où le JavaScript est activé. Sans JavaScript, l'interface reste en thème clair par défaut et le sélecteur n'a pas d'effet.
Préférence locale, pas réglage d'instance
Le thème est une préférence par visiteur, stockée dans votre navigateur (clé localStorage kirexo-theme). Il est distinct de la couleur d'accent de la plateforme, qui est un réglage global d'instance décidé par l'administrateur·ice et identique pour tout le monde. Pour la différence de fond entre les deux, voir Pourquoi un accent d'instance piloté serveur.
Les trois modes¶
Le sélecteur propose trois modes, et uniquement ceux-ci :
| Mode | Effet |
|---|---|
| Clair | Force la palette claire, quel que soit le réglage de votre système. |
| Sombre | Force la palette sombre, quel que soit le réglage de votre système. |
| Système | Suit le réglage clair/sombre de votre système d'exploitation, en direct. |
Le mode par défaut, si vous n'avez jamais choisi, est Système.
Procédure¶
- Repérez le sélecteur de thème dans l'entête, en haut de page, côté droit (groupe de trois boutons portant les icônes soleil, lune et écran). Il est présent sur l'accueil comme dans les espaces utilisateur et admin.
- Cliquez sur le mode voulu :
- l'icône soleil pour Clair ;
- l'icône lune pour Sombre ;
- l'icône écran pour Système.
- L'interface bascule immédiatement dans le thème correspondant — aucun rechargement de page n'est nécessaire.
- Le bouton actif est mis en évidence : il reflète le mode courant.
Votre choix est mémorisé : il sera réappliqué à votre prochaine visite, sur n'importe quelle page de l'instance, depuis ce navigateur.
Le mode « Système » suit votre OS en direct¶
En mode Système, l'interface ne se contente pas de lire le réglage de votre système au chargement : elle réagit en temps réel à ses changements. Si votre système bascule en sombre le soir (bascule automatique programmée, mode nuit, etc.), l'interface de Kirexo passe en sombre toute seule, sans recharger la page ni recliquer.
Les modes Clair et Sombre, eux, ignorent le réglage système : ils forcent la palette choisie tant que vous ne changez pas de mode.
Synchronisation entre les onglets¶
Si vous avez plusieurs onglets de Kirexo ouverts dans le même navigateur, changer le thème dans l'un d'eux met à jour les autres automatiquement. Vous n'avez pas à rafraîchir chaque onglet : le nouveau mode se propage à toutes les fenêtres ouvertes de l'instance.
Pas de flash au chargement¶
Le thème est appliqué avant le premier affichage de la page. Un visiteur en mode sombre (ou en mode Système avec un OS en sombre) ne verra jamais un flash clair au chargement : la bonne palette est déjà posée dès l'ouverture de la page.
Vérifier que le changement a bien pris¶
Le thème effectif est porté par l'attribut data-theme sur la balise <html> de chaque page, avec deux valeurs possibles : light ou dark. Pour le contrôler, ouvrez l'inspecteur de votre navigateur et vérifiez l'attribut :
En mode Système, la valeur de data-theme reflète le réglage de votre OS au moment de la lecture (dark si l'OS est en sombre, light sinon).
En cas de problème¶
- Mon choix n'est pas mémorisé entre deux visites. Le thème est stocké dans le
localStoragede votre navigateur. Si vous naviguez en mode privé, ou si votre navigateur efface les données de site à la fermeture, la préférence est perdue à chaque session — c'est le comportement attendu dans ce cas. - Le sélecteur n'a aucun effet. Vérifiez que le JavaScript est activé : c'est lui qui applique et mémorise le thème. Sans JavaScript, l'interface reste en thème clair.
- Le mode Système ne suit pas mon OS. Assurez-vous d'avoir bien sélectionné Système (icône écran) et non Clair ou Sombre, qui forcent une palette fixe.
Voir aussi¶
- Pourquoi un accent d'instance piloté serveur — la distinction de fond entre l'accent (réglage d'instance, serveur) et le thème (préférence locale, visiteur).
- Définir la couleur d'accent de la plateforme — le pendant côté administrateur, pour la couleur d'accent globale.
- Design system : tokens, thèmes et accent — la mécanique
data-theme, le scripttheme.jset la clékirexo-theme. - Entête partagé : identité, déconnexion et bascule — l'entête commun qui porte le sélecteur de thème.