/* Jetons de couleur du site, en deux palettes. * * Les pages n'ecrivent jamais une couleur en dur : elles n'utilisent que des * noms de roles (--bg, --fg2, --line...), et basculent donc d'un theme a * l'autre sans rien changer chez elles. Meme principe que src/theme.tsx dans * l'app, et les valeurs claires sont les siennes, deja calibrees au contraste. * * Trois etats possibles, dans cet ordre de priorite : * 1. [data-theme] pose sur par le choix de l'utilisateur ; * 2. sinon, la preference du systeme ; * 3. sinon, le sombre, qui reste l'identite du site. * * `color-scheme` accompagne chaque palette : c'est lui qui met les ascenseurs, * les champs de formulaire et les menus natifs dans le bon sens. */ :root { color-scheme: dark; --bg: #0E0F11; --surface: #16181B; --surface2: #1E2125; --line: rgba(255, 255, 255, 0.08); --line2: rgba(255, 255, 255, 0.12); --fg: #F2F4F7; --fg2: #A8AEB7; --fg3: #868C95; /* Marque. `--lime` ne sert qu'aux APLATS, `--accent` a tout ce qui porte du * texte ou une icone : sur du blanc le vert plein tombe a 2,2:1, illisible. * En sombre les deux se confondent, d'ou la duplication apparente. */ --lime: #D7FF3A; --accent: #D7FF3A; --on-lime: #0E0F11; --gold: #FFB23A; --gold-text: #FFB23A; --gold-soft: rgba(255, 178, 58, 0.08); --lime-soft: rgba(215, 255, 58, 0.10); --lime-line: rgba(215, 255, 58, 0.20); --lime-dim: #A8C82C; /* Halos de marque de la page d'accueil. Ils portent l'identite sur du noir ; * sur du blanc un halo sature bave, d'ou des valeurs bien plus discretes en * clair. */ --glow-lime: rgba(215, 255, 58, 0.25); --glow-gold: rgba(255, 178, 58, 0.20); /* Ombre laterale d'un tableau qui deborde. */ --scroll-shadow: rgba(0, 0, 0, 0.45); /* Barre superieure collante : translucide pour laisser jouer le flou, elle * doit donc reprendre la couleur de la page et non un noir fixe. */ --bg-blur: rgba(14, 15, 17, 0.85); } /* Clair par preference systeme, sauf choix explicite du sombre. */ @media (prefers-color-scheme: light) { :root:not([data-theme='dark']) { color-scheme: light; --bg: #EFEFEC; --surface: #FFFFFF; --surface2: #E4E4E0; --line: rgba(14, 15, 17, 0.08); --line2: rgba(14, 15, 17, 0.14); --fg: #0E0F11; --fg2: #565B63; --fg3: #63686F; --lime: #5BC68A; --accent: #177B4A; --on-lime: #0E0F11; --gold: #FFB23A; --gold-text: #9A6200; --gold-soft: rgba(154, 98, 0, 0.10); --lime-soft: rgba(23, 123, 74, 0.12); --lime-line: rgba(23, 123, 74, 0.30); --lime-dim: #3FA872; --glow-lime: rgba(23, 123, 74, 0.14); --glow-gold: rgba(154, 98, 0, 0.12); --scroll-shadow: rgba(14, 15, 17, 0.18); --lime-soft: rgba(23, 123, 74, 0.12); --lime-line: rgba(23, 123, 74, 0.30); --lime-dim: #3FA872; --glow-lime: rgba(23, 123, 74, 0.14); --glow-gold: rgba(154, 98, 0, 0.12); --scroll-shadow: rgba(14, 15, 17, 0.18); --bg-blur: rgba(239, 239, 236, 0.85); } } /* Choix explicite du clair : doit gagner meme si le systeme est en sombre. */ :root[data-theme='light'] { color-scheme: light; --bg: #EFEFEC; --surface: #FFFFFF; --surface2: #E4E4E0; --line: rgba(14, 15, 17, 0.08); --line2: rgba(14, 15, 17, 0.14); --fg: #0E0F11; --fg2: #565B63; --fg3: #63686F; --lime: #5BC68A; --accent: #177B4A; --on-lime: #0E0F11; --gold: #FFB23A; --gold-text: #9A6200; --gold-soft: rgba(154, 98, 0, 0.10); --bg-blur: rgba(239, 239, 236, 0.85); } /* ── Bouton de bascule ───────────────────────────────────────────────────── */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line2); border-radius: 999px; background: transparent; color: var(--fg2); cursor: pointer; flex-shrink: 0; transition: color .15s, border-color .15s; } .theme-toggle:hover { color: var(--fg); border-color: var(--fg3); } .theme-toggle svg { width: 17px; height: 17px; display: block; } /* Une seule des deux icones est visible, selon le theme actif. Le CSS suit la * meme cascade que les palettes ci-dessus : pas de JavaScript pour ca. */ .theme-toggle .icon-sun { display: block; } .theme-toggle .icon-moon { display: none; } @media (prefers-color-scheme: light) { :root:not([data-theme='dark']) .theme-toggle .icon-sun { display: none; } :root:not([data-theme='dark']) .theme-toggle .icon-moon { display: block; } } :root[data-theme='light'] .theme-toggle .icon-sun { display: none; } :root[data-theme='light'] .theme-toggle .icon-moon { display: block; } :root[data-theme='dark'] .theme-toggle .icon-sun { display: block; } :root[data-theme='dark'] .theme-toggle .icon-moon { display: none; } /* Le bouton se range a cote du selecteur de langue, dans l'en-tete. */ .head-actions { display: flex; align-items: center; gap: 10px; }