Thème clair / sombre

Vue d’ensemble — à quoi ça sert

La console InfraGuard est livrée avec deux thèmes : sombre (par défaut) et clair. Le thème se change par un unique attribut posé sur la racine du document (<html>), data-theme, dont la valeur permute l’ensemble des jetons de variables CSS --infr-* définis en SCSS. Tous les composants utilisent des jetons var(--infr-*) plutôt que des valeurs hexadécimales en dur : changer un seul mot (dark ↔ light) repeint donc instantanément toute l’interface.

La valeur par défaut est sombre — en tant que console de NOC (centre d’exploitation réseau), elle utilise un fond bleu-noir profond avec des accents de signal turquoise, afin que les couleurs de gravité (crit / warn / good) ressortent nettement sur un fond sombre.

<html data-theme="dark">   ← par défaut, sombre NOC
<html data-theme="light">  ← clair (environnements de bureau lumineux)

Le thème est une préférence purement front-end. Il n’est jamais stocké sur le serveur et n’a aucun rapport avec votre compte ni avec la base de données — il vit uniquement dans le localStorage du navigateur. Il survit à la déconnexion et, si quelqu’un se connecte avec le même compte depuis un autre appareil, cet appareil suit son propre réglage.

Quand l’utiliser

• Exploitation de nuit / murs d’écrans de NOC → sombre (moins d’éblouissement, meilleur contraste des couleurs de gravité).
• Bureaux lumineux, vidéoprojecteurs, captures d’écran pour la documentation → clair.
• Préférence personnelle de contraste ou de vision des couleurs — se change par utilisateur.

Une fois choisi, il persiste dans ce navigateur : vous ne le réglez donc normalement qu’une seule fois.

Disposition

Bouton de bascule dans la barre supérieure

L’enveloppe de la console (layouts/app.blade.php) comme l’écran de connexion (layouts/simple.blade.php) placent un bouton de changement de thème à droite de la barre supérieure.

L’écran avant connexion (invité) porte le même bouton : vous pouvez donc changer de thème sans vous authentifier.

Groupes de jetons de couleur

resources/scss/_variables.scss définit les mêmes noms de jetons avec des valeurs différentes dans deux blocs : :root[data-theme="dark"] et :root[data-theme="light"]. Jetons représentatifs :

Au-delà de ceux-ci, chaque thème définit aussi --infr-surface-2/hi, --infr-border-2, --infr-accent-soft/ink, --infr-on-accent (texte de bouton sur l’accent), les couleurs d’état TCP (--infr-state-*), les couleurs de graphique (--infr-chart-2), l’ombre et la lueur (--infr-shadow / --infr-glow), ainsi que le verre de la barre supérieure (--infr-topbar-*). Chaque bloc déclare également color-scheme: dark|light afin que les contrôles de formulaire natifs et les barres de défilement s’accordent au thème.

La palette du terminal SSH fait exception. Les jetons --infr-term-* restent d’un sombre profond et immersif quel que soit data-theme. Même en thème clair, la console SSH conserve un terminal sombre.

Mode d’emploi

Basculer

1. Cliquez sur l’icône demi-lune (Changer de thème) à droite de la barre supérieure.
2. Elle bascule immédiatement sombre ↔ clair, et le choix est enregistré automatiquement.
3. À la visite suivante ou au rechargement de la page, votre dernier choix est restauré.

Sous le capot (référence développeur)

Le front-end est câblé dans resources/js/app.js. Logique principale :

const THEME_KEY = 'infr-theme';                 // clé de localStorage
const get_theme = () => localStorage.getItem(THEME_KEY) || 'dark';   // sombre par défaut
const set_theme = (t) => {
    document.documentElement.setAttribute('data-theme', t);   // attribut de la racine
    localStorage.setItem(THEME_KEY, t);                        // persister
    window.dispatchEvent(new CustomEvent('infr:theme', { detail: t })); // recolorer les graphiques
};
// câbler le bouton de bascule
document.querySelectorAll('[data-theme-toggle]')
    .forEach(btn => btn.addEventListener('click',
        () => set_theme(get_theme() === 'dark' ? 'light' : 'dark')));

Résumé du comportement :

Prévention du flash de contenu non stylé (FOUC) — script exécuté avant le rendu

Un minuscule script en ligne tout en haut de <head> (partagé par app.blade.php et simple.blade.php, avant le chargement CSS par @vite) fixe data-theme avant qu’aucune feuille de style ne s’applique. Cela supprime le « flash sombre→clair » au rechargement.

<script>
  (function () {
    try { document.documentElement.setAttribute('data-theme',
            localStorage.getItem('infr-theme') || 'dark'); }
    catch (e) { document.documentElement.setAttribute('data-theme', 'dark'); }
  })();
</script>

Même là où localStorage est bloqué (navigation privée, stockage tiers bloqué, etc.), le catch retombe sans risque sur sombre.

Les graphiques et les éditeurs suivent le thème

• ECharts (<metric-chart> / echarts-kit) : lit les jetons --infr-* via getComputedStyle pour construire les couleurs, les axes et les infobulles du graphique, et recolore sur l’événement infr:theme. Le test is_dark() est data-theme !== 'light' (sombre étant la valeur par défaut). Voir Séries temporelles des serveurs.
• CodeMirror (<cm-editor>) : la propriété :dark bascule entre oneDark (sombre) et un thème clair. Les pages Vue calculent is_dark_mode = document.documentElement.dataset.theme === 'dark', le transmettent via :dark="is_dark_mode" et le rafraîchissent sur l’événement infr:theme. Voir Générateur de scripts de sauvegarde.

<cm-editor v-model="script.body" lang="bash" :dark="is_dark_mode"></cm-editor>

Sources de données

Le thème n’a strictement aucun stockage en base ni côté serveur. Il n’utilise que :

L’annexe C (jetons du thème clair/sombre) de CLAUDE.md fait référence pour la conception de la palette.

Accès

Le thème est une préférence d’interface sans rapport avec l’authentification ni l’autorisation.

• Tous les utilisateurs, y compris les invités (avant connexion), peuvent en changer librement — aucun filtrage par niveau.
• Le comportement est identique en demo=1 / staff=5 / admin=10.
• Comme rien n’est écrit côté serveur, il n’apparaît jamais dans le journal d’audit (infr_audit_log).

Dépannage et FAQ

Q. Le thème est réinitialisé au rechargement. Si le navigateur bloque localStorage (navigation privée, réglages de confidentialité stricts, blocage du stockage tiers), le choix ne peut pas être enregistré et il revient à chaque fois au sombre par défaut. Accordez l’accès au stockage pour le site.

Q. Je l’ai changé dans un onglet, mais un autre onglet ne s’est pas mis à jour. La bascule se propage aux autres onglets du même navigateur via l’événement storage. Si ce n’est pas répercuté immédiatement, cet onglet n’a peut-être pas encore chargé le câblage de l’écouteur (app.js) — rechargez-le. Des appareils/navigateurs différents ont des stockages distincts et ne se synchronisent pas (c’est voulu).

Q. Je suis passé en clair, mais le terminal SSH reste sombre. C’est le comportement attendu. Le terminal utilise une palette dédiée --infr-term-* qui reste très sombre quel que soit le thème de l’application (lisibilité / immersion).

Q. Un composant s’affiche mal (le thème ne s’y applique pas). Ce composant a codé en dur des valeurs hexadécimales au lieu d’utiliser les jetons. Par convention, les composants ne doivent utiliser que des jetons var(--infr-*). Recherchez les valeurs hexadécimales directes dans resources/scss/pages avec le grep de non-régression :

rg -n "#[0-9a-fA-F]{3,6}" resources/scss/pages

Q. Je veux qu’il suive le mode sombre de mon système d’exploitation. L’implémentation actuelle ne suit pas la préférence du système (prefers-color-scheme). La valeur initiale est toujours dark, et elle ne mémorise que ce que l’utilisateur a explicitement choisi avec le bouton. L’intégration au système figure à la feuille de route.

Voir aussi

• Navigation et disposition — la zone d’actions de la barre supérieure (thème / langue / menu utilisateur)
• Langue · paramètres régionaux — l’autre préférence front-end, aux côtés du thème
• Rechercher dans ce manuel — la recherche et la structure de /manual
• Séries temporelles des serveurs et MetricChart — les graphiques qui se recolorent à partir des jetons du thème
• Générateur de scripts de sauvegarde — la liaison :dark de CodeMirror
• Console SSH — un terminal fixé en sombre, indépendant du thème de l’application