/* =========================================================================== * THEMES — Toute La Classe * --------------------------------------------------------------------------- * 5 thèmes disponibles : * - dark (par défaut, slate-900) * - light (blanc / gris clair) * - sepia (papier vieilli, beige chaud) * - ocean (variante sombre bleu marine) * - high-contrast (noir pur / blanc pur, accessibilité) * * APPLICATION : attribut data-theme="..." sur . * → applique le thème clair. * Pas d'attribut → utilise le thème dark via les valeurs :root par défaut. * * Le code source utilise massivement : * - Variables CSS (var(--bg-secondary), etc.) → adaptent automatiquement. * - Classes Tailwind hardcodées (text-white, bg-slate-900, etc.) → on les * surcharge ici pour les thèmes clairs/high-contrast via des sélecteurs * html[data-theme=...] .classname. * ========================================================================= */ /* -------- Thème DARK (par défaut, déjà défini inline dans :root) -------- */ :root, html[data-theme="dark"] { --bg-primary: #0f172a; /* slate-900 — body */ --bg-secondary: #1e293b; /* slate-800 — cartes, header */ --bg-tertiary: #334155; /* slate-700 — séparateurs, fond léger */ --accent: #10b981; /* emerald-500 */ --text-primary: #ffffff; --text-muted: #94a3b8; /* slate-400 */ --border-color: #334155; /* slate-700 */ color-scheme: dark; } /* -------- Thème OCEAN (sombre bleu marine) -------- */ html[data-theme="ocean"] { --bg-primary: #0c1929; /* bleu nuit profond */ --bg-secondary: #163046; /* bleu marine */ --bg-tertiary: #1e4060; /* bleu */ --accent: #38bdf8; /* sky-400 */ --text-primary: #ffffff; --text-muted: #94c6e7; --border-color: #1e4060; color-scheme: dark; } /* -------- Thème LIGHT (blanc / gris clair) -------- */ html[data-theme="light"] { --bg-primary: #f8fafc; /* slate-50 — body */ --bg-secondary: #ffffff; /* blanc — cartes */ --bg-tertiary: #e2e8f0; /* slate-200 — séparateurs */ --accent: #059669; /* emerald-600 (plus contrasté sur blanc) */ --text-primary: #0f172a; /* slate-900 */ --text-muted: #475569; /* slate-600 */ --border-color: #cbd5e1; /* slate-300 */ color-scheme: light; } /* -------- Thème SEPIA (beige chaud) -------- */ html[data-theme="sepia"] { --bg-primary: #f5ecd9; /* beige clair */ --bg-secondary: #fdf6e3; /* crème (solarized light) */ --bg-tertiary: #ede0c2; /* beige moyen */ --accent: #b45309; /* amber-700 */ --text-primary: #3e2c1a; /* brun foncé */ --text-muted: #78624a; /* brun moyen */ --border-color: #d6c5a2; color-scheme: light; } /* -------- Thème HIGH CONTRAST (accessibilité) -------- */ html[data-theme="high-contrast"] { --bg-primary: #000000; /* noir pur */ --bg-secondary: #000000; --bg-tertiary: #1a1a1a; --accent: #ffff00; /* jaune vif — visible */ --text-primary: #ffffff; --text-muted: #e0e0e0; --border-color: #ffffff; color-scheme: dark; } /* =========================================================================== * OVERRIDES TAILWIND — pour les classes hardcodées dans plateforme.html * --------------------------------------------------------------------------- * Le code utilise massivement text-white, text-slate-300/400/500, bg-slate-*, * border-slate-*, bg-white/N, hover:bg-white/N. On les surcharge ciblé pour * chaque thème clair/HC. * * Pour les thèmes DARK et OCEAN (sombres), pas besoin de surcharger : les * couleurs Tailwind d'origine fonctionnent bien. * ========================================================================= */ /* ---------- LIGHT THEME OVERRIDES ---------- */ html[data-theme="light"] body { background: var(--bg-primary); color: var(--text-primary); } /* Textes — inverser blanc et slate clairs vers slate foncés */ html[data-theme="light"] .text-white { color: #0f172a !important; } html[data-theme="light"] .text-slate-100 { color: #1e293b !important; } html[data-theme="light"] .text-slate-200 { color: #334155 !important; } html[data-theme="light"] .text-slate-300 { color: #475569 !important; } html[data-theme="light"] .text-slate-400 { color: #64748b !important; } html[data-theme="light"] .text-slate-500 { color: #475569 !important; } html[data-theme="light"] .text-slate-600 { color: #334155 !important; } /* Couleurs vives → versions plus contrastées sur blanc */ html[data-theme="light"] .text-emerald-300 { color: #047857 !important; } html[data-theme="light"] .text-emerald-400 { color: #059669 !important; } html[data-theme="light"] .text-blue-300 { color: #1d4ed8 !important; } html[data-theme="light"] .text-blue-400 { color: #2563eb !important; } html[data-theme="light"] .text-amber-300 { color: #b45309 !important; } html[data-theme="light"] .text-amber-400 { color: #d97706 !important; } html[data-theme="light"] .text-red-300 { color: #b91c1c !important; } html[data-theme="light"] .text-red-400 { color: #dc2626 !important; } /* Fonds slate → fonds clairs */ html[data-theme="light"] .bg-slate-900 { background-color: #f1f5f9 !important; } html[data-theme="light"] .bg-slate-800 { background-color: #ffffff !important; } html[data-theme="light"] .bg-slate-700 { background-color: #e2e8f0 !important; } /* Overlays semi-transparents — basculer du blanc/N au noir/N */ html[data-theme="light"] .bg-white\/5 { background-color: rgba(15,23,42,0.04) !important; } html[data-theme="light"] .bg-white\/10 { background-color: rgba(15,23,42,0.06) !important; } html[data-theme="light"] .bg-white\/20 { background-color: rgba(15,23,42,0.10) !important; } html[data-theme="light"] .hover\:bg-white\/5:hover { background-color: rgba(15,23,42,0.04) !important; } html[data-theme="light"] .hover\:bg-white\/10:hover { background-color: rgba(15,23,42,0.08) !important; } html[data-theme="light"] .hover\:bg-white\/20:hover { background-color: rgba(15,23,42,0.12) !important; } html[data-theme="light"] .bg-black\/60 { background-color: rgba(15,23,42,0.45) !important; } html[data-theme="light"] .bg-black\/70 { background-color: rgba(15,23,42,0.55) !important; } /* Bordures slate → bordures claires */ html[data-theme="light"] .border-slate-700 { border-color: #cbd5e1 !important; } html[data-theme="light"] .border-slate-600 { border-color: #94a3b8 !important; } html[data-theme="light"] .border-slate-500 { border-color: #64748b !important; } /* Selects natifs (popup options) — voir styled inline ligne 22 */ html[data-theme="light"] select option { background: #ffffff !important; color: #0f172a !important; } /* Inputs / textarea — fond blanc explicite */ html[data-theme="light"] input[type="text"], html[data-theme="light"] input[type="email"], html[data-theme="light"] input[type="password"], html[data-theme="light"] input[type="number"], html[data-theme="light"] input[type="date"], html[data-theme="light"] input[type="time"], html[data-theme="light"] textarea { background: rgba(255,255,255,0.7); color: var(--text-primary); } /* Scrollbar plus discrète */ html[data-theme="light"] ::-webkit-scrollbar { width: 10px; height: 10px; } html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 5px; } html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* ---------- SEPIA THEME OVERRIDES ---------- */ html[data-theme="sepia"] body { background: var(--bg-primary); color: var(--text-primary); } html[data-theme="sepia"] .text-white { color: #3e2c1a !important; } html[data-theme="sepia"] .text-slate-100 { color: #4a3722 !important; } html[data-theme="sepia"] .text-slate-200 { color: #574027 !important; } html[data-theme="sepia"] .text-slate-300 { color: #6b4f30 !important; } html[data-theme="sepia"] .text-slate-400 { color: #856844 !important; } html[data-theme="sepia"] .text-slate-500 { color: #6b4f30 !important; } html[data-theme="sepia"] .text-emerald-300 { color: #166534 !important; } html[data-theme="sepia"] .text-emerald-400 { color: #15803d !important; } html[data-theme="sepia"] .text-blue-300 { color: #1e40af !important; } html[data-theme="sepia"] .text-blue-400 { color: #1d4ed8 !important; } html[data-theme="sepia"] .text-amber-300 { color: #92400e !important; } html[data-theme="sepia"] .text-amber-400 { color: #b45309 !important; } html[data-theme="sepia"] .bg-slate-900 { background-color: #ede0c2 !important; } html[data-theme="sepia"] .bg-slate-800 { background-color: #fdf6e3 !important; } html[data-theme="sepia"] .bg-slate-700 { background-color: #d6c5a2 !important; } html[data-theme="sepia"] .bg-white\/5 { background-color: rgba(62,44,26,0.05) !important; } html[data-theme="sepia"] .bg-white\/10 { background-color: rgba(62,44,26,0.08) !important; } html[data-theme="sepia"] .bg-white\/20 { background-color: rgba(62,44,26,0.12) !important; } html[data-theme="sepia"] .hover\:bg-white\/5:hover { background-color: rgba(62,44,26,0.05) !important; } html[data-theme="sepia"] .hover\:bg-white\/10:hover { background-color: rgba(62,44,26,0.10) !important; } html[data-theme="sepia"] .hover\:bg-white\/20:hover { background-color: rgba(62,44,26,0.15) !important; } html[data-theme="sepia"] .border-slate-700 { border-color: #d6c5a2 !important; } html[data-theme="sepia"] .border-slate-600 { border-color: #b8a373 !important; } html[data-theme="sepia"] select option { background: #fdf6e3 !important; color: #3e2c1a !important; } html[data-theme="sepia"] input, html[data-theme="sepia"] textarea { background: rgba(253,246,227,0.7); color: var(--text-primary); } /* ---------- HIGH CONTRAST THEME OVERRIDES ---------- */ html[data-theme="high-contrast"] body { background: #000000; color: #ffffff; } /* Forcer tous les textes en blanc pur (sauf accents) */ html[data-theme="high-contrast"] .text-white, html[data-theme="high-contrast"] .text-slate-100, html[data-theme="high-contrast"] .text-slate-200, html[data-theme="high-contrast"] .text-slate-300, html[data-theme="high-contrast"] .text-slate-400, html[data-theme="high-contrast"] .text-slate-500, html[data-theme="high-contrast"] .text-slate-600 { color: #ffffff !important; } /* Accents en jaune vif */ html[data-theme="high-contrast"] .text-emerald-300, html[data-theme="high-contrast"] .text-emerald-400, html[data-theme="high-contrast"] .text-blue-300, html[data-theme="high-contrast"] .text-blue-400, html[data-theme="high-contrast"] .text-amber-300, html[data-theme="high-contrast"] .text-amber-400 { color: #ffff00 !important; } html[data-theme="high-contrast"] .text-red-300, html[data-theme="high-contrast"] .text-red-400 { color: #ff6464 !important; } html[data-theme="high-contrast"] .bg-slate-900, html[data-theme="high-contrast"] .bg-slate-800, html[data-theme="high-contrast"] .bg-slate-700 { background-color: #000000 !important; } /* Bordures épaisses et blanches partout */ html[data-theme="high-contrast"] .border-slate-700, html[data-theme="high-contrast"] .border-slate-600, html[data-theme="high-contrast"] .border-slate-500 { border-color: #ffffff !important; } html[data-theme="high-contrast"] .border { border-width: 2px !important; } html[data-theme="high-contrast"] select option { background: #000000 !important; color: #ffffff !important; } /* =========================================================================== * UTILITY classes utiles dans la page settings et le picker — applicables * indépendamment du thème via classes courtes. * ========================================================================= */ .theme-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(255,255,255,0.2); } /* Évite que les inputs de couleur (color picker) soient déformés sur certains thèmes */ input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; } input[type="color"]::-webkit-color-swatch { border: 1px solid var(--border-color); border-radius: 4px; }