/* ========================================================================== theme.css - socle de thème clair/sombre. Ce fichier ne connaît rien de l'application : il ne déclare QUE le contrat de jetons (variables CSS) et le bouton de bascule. Il est fait pour être copié tel quel dans une autre appli (checklist) avec son binôme js/theme.js ; c'est la feuille applicative (style.css) qui consomme les jetons et qui déclare, sur le même patron, ses propres couleurs métier. Fonctionnement (cf. js/theme.js) : le script pose sur un attribut `data-theme` valant toujours "light" ou "dark" (le thème RÉSOLU, jamais "auto"). Le CSS n'a donc qu'un seul sélecteur à connaître, `[data-theme="dark"]`, et pas de media query à dupliquer. Tant que l'utilisateur n'a pas cliqué sur le bouton, c'est la préférence du système d'exploitation qui décide, et elle est suivie en direct. Règle de contribution : une valeur de couleur ne s'écrit JAMAIS en dur dans une règle. Elle se déclare ici (ou dans le :root de la feuille applicative pour les couleurs métier), en deux exemplaires, clair et sombre. ========================================================================== */ :root { /* --- Surfaces ---------------------------------------------------------- */ --color-bg: #ffffff; /* fond de page */ --color-surface: #ffffff; /* ce qui se pose sur la page : carte, panneau, champ */ --color-muted: #f4f5f6; /* fond discret : en-tête de tableau clair, ligne alternée */ --color-disabled: #ececec; /* zone inactive : hors mois, badge verrouillé */ /* --- Traits ------------------------------------------------------------ */ --color-border: #d7dbe0; --color-border-strong: #b9c0c8; /* quand le trait doit se voir (encadré, séparation forte) */ /* --- Encres ------------------------------------------------------------ */ --color-text: #1f2933; --color-text-muted: #5c6773; /* libellé de filtre, mention secondaire */ --color-text-faint: #9aa5b1; /* information effacée : « libre », cellule hors mois */ /* --- Accent ------------------------------------------------------------- Deux jetons et non un seul, c'est LE point qui rend le thème sombre possible. En clair l'accent est foncé : la même valeur sert de fond (bouton plein, en-tête de tableau) et d'encre sur la page (bouton secondaire, badge de rôle). En sombre ces deux emplois divergent : un fond doit rester plus foncé que le texte blanc qu'il porte, une encre doit être plus claire que la page qui la porte. D'où : --color-accent : l'accent EN TANT QUE FOND (le texte dessus = accent-text) --color-accent-ink : l'accent EN TANT QU'ENCRE sur le fond de page En clair les deux valent la même chose, le rendu existant ne bouge pas. */ --color-accent: #2f3e46; --color-accent-text: #ffffff; --color-accent-ink: #2f3e46; /* --- États -------------------------------------------------------------- Chaque état a son encre ET son fond : un bandeau ou un badge d'état se peint avec le couple, jamais avec une teinte éclaircie à la volée (impossible à transposer en sombre). */ --color-danger: #c0392b; --color-danger-bg: #fbeceb; --color-success: #2e7d32; --color-success-bg: #eaf6ec; --color-warning: #b8860b; --color-warning-bg: #fdf3e0; /* Lien dans le contenu. Seule la valeur sombre est réellement posée sur les (cf. la règle en fin de fichier) : en clair, chaque page garde le bleu qu'elle avait déjà, celui du navigateur côté appli et celui de Bootstrap au Paramétrage. Le jeton est quand même déclaré dans les deux thèmes pour que le contrat soit complet, une appli reprenant ce socle pouvant vouloir fixer ses liens dans les deux sens. */ --color-link: #0d6efd; /* --- Profondeur --------------------------------------------------------- En sombre une ombre noire ne se voit plus : elle est renforcée plutôt que laissée en dur dans les règles. */ --color-shadow: rgba(0, 0, 0, 0.15); --color-overlay: rgba(0, 0, 0, 0.4); /* voile derrière un dialogue modal */ /* Widgets natifs (ascenseurs, flèches +/- d'un input number, sélecteur de date, cases à cocher) : le navigateur les peint lui-même. `color-scheme` est le seul moyen de les basculer, aucune règle CSS ne les atteint. */ color-scheme: light; } /* Thème sombre : sombre et non noir (cf. demande). La base est le gris-ardoise de l'accent clair (#2f3e46), éclairci et désaturé : l'appli garde sa teinte, elle n'est pas repeinte en gris neutre. Les niveaux sont espacés d'assez peu pour que la page reste calme, mais assez pour qu'une carte se détache de son fond. */ [data-theme="dark"] { --color-bg: #232a30; --color-surface: #2c343b; --color-muted: #293137; --color-disabled: #2a3138; --color-border: #3e4952; --color-border-strong: #58646e; --color-text: #dee3e8; /* pas de blanc pur : trop dur sur fond sombre */ --color-text-muted: #a5b0b8; --color-text-faint: #79848d; --color-accent: #4d7180; /* fond : porte du blanc (contraste 5.3) */ --color-accent-text: #ffffff; --color-accent-ink: #8fb8c6; /* encre : se lit sur la page (contraste 6.8) */ --color-danger: #e8837a; --color-danger-bg: #3b2724; --color-success: #79c67f; --color-success-bg: #223326; --color-warning: #ddb156; --color-warning-bg: #362c18; /* Le bleu de lien par défaut (#0000EE du navigateur, #007bff de Bootstrap) tombe à un contraste de 2,3 et 3,7 sur ce fond : illisible dans un cas, limite dans l'autre. */ --color-link: #6cb2f0; --color-shadow: rgba(0, 0, 0, 0.5); --color-overlay: rgba(0, 0, 0, 0.6); color-scheme: dark; } /* Champs de saisie : sans règle explicite ils tombent sur le rendu par défaut du navigateur (fond blanc, texte noir), qui reste blanc en thème sombre. Déclaré ici et non dans la feuille applicative : c'est valable pour n'importe quelle appli reprenant ce socle. `input` est ciblé par ses types texte uniquement, pour ne pas déshabiller les cases à cocher, boutons radio et sélecteurs de couleur, que `color-scheme` traite déjà correctement. */ input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="file"]), select, textarea { background-color: var(--color-surface); color: var(--color-text); border-color: var(--color-border); } /* Liens : uniquement en thème sombre, pour ne rien changer au rendu clair existant (cf. --color-link). Le sélecteur est enveloppé dans :where() À DESSEIN. Sans lui, `[data-theme="dark"] a` pèse (0,1,1) et l'emporte sur toute règle de la feuille applicative à classe unique : `.sort-link { color: inherit }` (en-tête de colonne triable) et `.copy-icon` passaient au bleu de lien, ce qui n'est pas voulu - ce sont des liens qui doivent porter la couleur de leur contexte. :where() ne compte pas dans la spécificité : la règle retombe à (0,0,1), le poids d'un `a` nu. Elle reprend donc le bleu par défaut du navigateur et celui de Bootstrap (mêmes (0,0,1), déclarés avant), et s'efface devant n'importe quelle règle de l'appli qui nomme une classe. */ :where([data-theme="dark"]) a { color: var(--color-link); } /* ========================================================================== Bouton de bascule (shared/_theme_toggle.html) Deux icônes dans le bouton, une seule visible : c'est le CSS qui choisit selon `data-theme`, pas le JS. Aucune manipulation de DOM au clic, donc aucun décalage entre l'attribut posé sur et ce qui est affiché, y compris au tout premier rendu de la page. L'icône montre la DESTINATION et non l'état courant : lune = « passer en sombre ». ========================================================================== */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; /* Aligné sur .button/.button.secondary de l'appli, pour se poser sans rupture à côté de « Mon profil » et « Déconnexion ». Carré : il ne porte pas de texte. */ width: 2.1rem; height: 2.1rem; padding: 0; border: 1px solid var(--color-accent-ink); border-radius: 4px; background: var(--color-surface); color: var(--color-accent-ink); cursor: pointer; flex: none; } .theme-toggle:hover, .theme-toggle:focus-visible { background: var(--color-muted); } .theme-toggle svg { width: 1.05rem; height: 1.05rem; display: block; /* `currentColor` sur les tracés : une seule couleur à donner, celle du bouton. */ fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .theme-toggle .theme-icon-sun { display: none; } [data-theme="dark"] .theme-toggle .theme-icon-moon { display: none; } [data-theme="dark"] .theme-toggle .theme-icon-sun { display: block; }