/** * modules/core-theme/theme.css * ------------------------------------------------------------------ * Systeme de theme unique pour tout le site : clair/sombre + 5 teintes * au choix. A charger EN PREMIER (avant le CSS propre a chaque page), * qui doit utiliser ces memes variables plutot que des couleurs en dur. * * Reprend exactement les noms de variables deja utilises par * modules/editor-md/engine/chrome.css et modules/latex/assets/css/ * latex-core.css (partage aussi par mermaid/help) : --bg, --tx, --pri, * etc. — aucune page existante n'a donc besoin d'etre reecrite, juste * de charger ce fichier et de retirer son propre bloc :root en double. * * Bascule via deux attributs sur (voir theme-init.js) : * data-theme="light|dark" * data-accent="1|2|3|4|5" * * lot3 (2026-08-08) — CORRECTIF : les valeurs neutres (--bg/--tx/--bd) * et la teinte d'accent par defaut (1) ne correspondaient pas a la * palette chaleureuse documentee dans CHARTE-GRAPHIQUE.md et validee * sur reference-editeur.html/reference-eleve.html (fond blanc/bleu au * lieu du fond creme/corail). Corrige ici : la teinte 1 devient le * corail par defaut (au lieu du bleu), la teinte 2 devient le bleu — * theme-init.js n'a besoin d'aucune modification puisqu'il charge deja * l'accent "1" par defaut. */ :root { /* ---- Base neutre (clair) — palette chaleureuse, CHARTE-GRAPHIQUE.md §2 ---- */ --bg: #fdf9f7; --bg2: #faf8f6; --bg3: #f4efeb; --tx: #0e0906; --tx2: #5a544e; --tx3: #a39c94; --bd: #e0dbd7; --bd2: #cec7c1; --suc: #10b981; --suc-l: rgba(16, 185, 129, .1); --err: #ef4444; --err-l: rgba(239, 68, 68, .1); --war: #f59e0b; --radius: 8px; --radius-lg: 12px; --shadow: 0 1px 3px rgba(0, 0, 0, .1); --shadow-lg: 0 10px 25px rgba(0, 0, 0, .1); /* ---- Teinte d'accent : 1 = corail doux (defaut) ---- */ --pri: #c9737c; --pri-l: rgba(201, 115, 124, .12); --pri-m: rgba(201, 115, 124, .22); --pri-d: #a85860; } /* ================== Mode sombre ================== */ [data-theme="dark"] { --bg: #0b0806; --bg2: #120f0c; --bg3: #1d1a18; --tx: #ebe7e4; --tx2: #847f7b; --tx3: #5c5854; --bd: #262321; --bd2: #363330; --suc-l: rgba(16, 185, 129, .18); --err-l: rgba(239, 68, 68, .18); --shadow: 0 1px 3px rgba(0, 0, 0, .4); --shadow-lg: 0 10px 25px rgba(0, 0, 0, .5); } /* Corail en mode sombre : teinte eclaircie pour rester lisible sur fond sombre (valeur documentee dans CHARTE-GRAPHIQUE.md §2 "Mode sombre"). */ [data-theme="dark"][data-accent="1"] { --pri: #d98f96; --pri-l: rgba(217, 143, 150, .16); --pri-m: rgba(217, 143, 150, .28); --pri-d: #c9737c; } /* ================== 5 teintes d'accent ================== S'appliquent par-dessus le mode clair OU sombre (elles ne touchent que --pri*, jamais --bg/--tx). */ /* 1 = Corail doux (identique aux valeurs par defaut ci-dessus, redefini ici pour que la bascule explicite data-accent="1" fonctionne aussi). */ [data-accent="1"] { --pri: #c9737c; --pri-d: #a85860; --pri-l: rgba(201, 115, 124, .12); --pri-m: rgba(201, 115, 124, .22); } /* 2 = Bleu */ [data-accent="2"] { --pri: #3b82f6; --pri-d: #2563eb; --pri-l: rgba(59, 130, 246, .1); --pri-m: rgba(59, 130, 246, .2); } /* 3 = Vert emeraude */ [data-accent="3"] { --pri: #10b981; --pri-d: #0d9668; --pri-l: rgba(16, 185, 129, .1); --pri-m: rgba(16, 185, 129, .2); } /* 4 = Violet */ [data-accent="4"] { --pri: #8b5cf6; --pri-d: #7040e0; --pri-l: rgba(139, 92, 246, .1); --pri-m: rgba(139, 92, 246, .2); } /* 5 = Rose */ [data-accent="5"] { --pri: #e2557a; --pri-d: #c53d61; --pri-l: rgba(226, 85, 122, .1); --pri-m: rgba(226, 85, 122, .2); }