/* =========================================================================== Mode sombre — remappage des classes Tailwind réellement utilisées par l'app. ⚠️ FICHIER GÉNÉRÉ (scratchpad/gen_theme.py) : chaque paire encre/fond est vérifiée au contraste WCAG à la génération, jamais choisie à l'œil. Pourquoi un remappage et pas des variantes `dark:` ? Les classes sont en dur dans ~15 templates ET dans du HTML construit en JS — dont des classes composées à l'exécution (`bg-${color_key}-100` depuis la base). Une passe `dark:` ne pourrait pas les couvrir. Ici on cible les classes existantes : le markup généré en profite sans y toucher. Le thème est stampé sur par le script en tête de base.html (avant le premier rendu, donc sans flash). La préférence OS est résolue en JS, ce qui évite de dupliquer toutes les règles sous une media query prefers-color-scheme. Surface sombre #1a1a19 : celle contre laquelle la palette du Pilotage est validée (cf. static/css/pilotage.css). =========================================================================== */ [data-theme="dark"] { color-scheme: dark; /* champs, listes déroulantes, dates, ascenseurs */ } /* ---------- Coque de page ---------- */ [data-theme="dark"] body { background-color: #121211; color: #dedcd4; } /* ---------- Surfaces ---------- */ [data-theme="dark"] .bg-white { background-color: #1a1a19; } [data-theme="dark"] .bg-slate-50, [data-theme="dark"] .hover\:bg-slate-50:hover { background-color: #20201e; } [data-theme="dark"] .bg-slate-100, [data-theme="dark"] .hover\:bg-slate-100:hover, [data-theme="dark"] .bg-slate-200 { background-color: #262623; } [data-theme="dark"] .bg-slate-800, [data-theme="dark"] .bg-slate-900, [data-theme="dark"] .hover\:bg-slate-900:hover, [data-theme="dark"] .hover\:bg-slate-700:hover { background-color: #3a3a35; } /* ---------- Encre ---------- */ [data-theme="dark"] .text-slate-900, [data-theme="dark"] .text-slate-800, [data-theme="dark"] .hover\:text-slate-900:hover, [data-theme="dark"] .hover\:text-slate-800:hover { color: #f5f4ef; } [data-theme="dark"] .text-slate-700, [data-theme="dark"] .hover\:text-slate-700:hover { color: #dedcd4; } [data-theme="dark"] .text-slate-600, [data-theme="dark"] .text-slate-500, [data-theme="dark"] .hover\:text-slate-600:hover { color: #c3c2b7; } [data-theme="dark"] .text-slate-400 { color: #9d9c92; } [data-theme="dark"] .text-slate-300 { color: #7a7a72; } [data-theme="dark"] .placeholder\:text-slate-400::placeholder { color: #7a7a72; } [data-theme="dark"] ::placeholder { color: #7a7a72; opacity: 1; } /* ---------- Filets et bordures ---------- */ [data-theme="dark"] .border-slate-50, [data-theme="dark"] .border-slate-100, [data-theme="dark"] .border-slate-200, [data-theme="dark"] .divide-slate-100 > * + *, [data-theme="dark"] .hover\:border-slate-200:hover { border-color: #2e2e2b; } [data-theme="dark"] .border-slate-300, [data-theme="dark"] .hover\:border-slate-300:hover { border-color: #3f3f3a; } [data-theme="dark"] .border-slate-900 { border-color: #3a3a35; } /* ---------- Liens et marque ---------- */ [data-theme="dark"] .text-indigo-600, [data-theme="dark"] .text-indigo-700, [data-theme="dark"] .text-indigo-800, [data-theme="dark"] .text-indigo-900, [data-theme="dark"] .hover\:text-indigo-600:hover, [data-theme="dark"] .hover\:text-indigo-700:hover { color: #7678f3; } [data-theme="dark"] .text-indigo-200, [data-theme="dark"] .text-indigo-500 { color: #b9baf9; } /* ---------- Pastilles de statut et d'issue ---------- */ /* bg--50/100 + text--600..900, y compris les classes */ /* composées à l'exécution depuis lead_statuses.color_key. */ [data-theme="dark"] .bg-amber-50, [data-theme="dark"] .bg-amber-100, [data-theme="dark"] .hover\:bg-amber-50:hover, [data-theme="dark"] .hover\:bg-amber-100:hover { background-color: #413216; } [data-theme="dark"] .text-amber-600, [data-theme="dark"] .text-amber-700, [data-theme="dark"] .text-amber-800, [data-theme="dark"] .text-amber-900, [data-theme="dark"] .hover\:text-amber-700:hover, [data-theme="dark"] .hover\:text-amber-900:hover { color: #f59e0b; } [data-theme="dark"] .border-amber-100, [data-theme="dark"] .border-amber-200, [data-theme="dark"] .border-amber-300 { border-color: #644714; } [data-theme="dark"] .text-amber-400, [data-theme="dark"] .text-amber-500, [data-theme="dark"] .hover\:text-amber-500:hover { color: #faca79; } [data-theme="dark"] .bg-blue-50, [data-theme="dark"] .bg-blue-100, [data-theme="dark"] .hover\:bg-blue-50:hover, [data-theme="dark"] .hover\:bg-blue-100:hover { background-color: #202d41; } [data-theme="dark"] .text-blue-600, [data-theme="dark"] .text-blue-700, [data-theme="dark"] .text-blue-800, [data-theme="dark"] .text-blue-900, [data-theme="dark"] .hover\:text-blue-700:hover, [data-theme="dark"] .hover\:text-blue-900:hover { color: #5e98f8; } [data-theme="dark"] .border-blue-100, [data-theme="dark"] .border-blue-200, [data-theme="dark"] .border-blue-300 { border-color: #253d64; } [data-theme="dark"] .text-blue-400, [data-theme="dark"] .text-blue-500, [data-theme="dark"] .hover\:text-blue-500:hover { color: #93bafa; } [data-theme="dark"] .bg-emerald-50, [data-theme="dark"] .bg-emerald-100, [data-theme="dark"] .hover\:bg-emerald-50:hover, [data-theme="dark"] .hover\:bg-emerald-100:hover { background-color: #18372c; } [data-theme="dark"] .text-emerald-600, [data-theme="dark"] .text-emerald-700, [data-theme="dark"] .text-emerald-800, [data-theme="dark"] .text-emerald-900, [data-theme="dark"] .hover\:text-emerald-700:hover, [data-theme="dark"] .hover\:text-emerald-900:hover { color: #10b981; } [data-theme="dark"] .border-emerald-100, [data-theme="dark"] .border-emerald-200, [data-theme="dark"] .border-emerald-300 { border-color: #17503c; } [data-theme="dark"] .text-emerald-400, [data-theme="dark"] .text-emerald-500, [data-theme="dark"] .hover\:text-emerald-500:hover { color: #7cd8ba; } [data-theme="dark"] .bg-green-50, [data-theme="dark"] .bg-green-100, [data-theme="dark"] .hover\:bg-green-50:hover, [data-theme="dark"] .hover\:bg-green-100:hover { background-color: #1b3925; } [data-theme="dark"] .text-green-600, [data-theme="dark"] .text-green-700, [data-theme="dark"] .text-green-800, [data-theme="dark"] .text-green-900, [data-theme="dark"] .hover\:text-green-700:hover, [data-theme="dark"] .hover\:text-green-900:hover { color: #22c55e; } [data-theme="dark"] .border-green-100, [data-theme="dark"] .border-green-200, [data-theme="dark"] .border-green-300 { border-color: #1d5430; } [data-theme="dark"] .text-green-400, [data-theme="dark"] .text-green-500, [data-theme="dark"] .hover\:text-green-500:hover { color: #85dfa6; } [data-theme="dark"] .bg-indigo-50, [data-theme="dark"] .bg-indigo-100, [data-theme="dark"] .hover\:bg-indigo-50:hover, [data-theme="dark"] .hover\:bg-indigo-100:hover { background-color: #272840; } [data-theme="dark"] .text-indigo-600, [data-theme="dark"] .text-indigo-700, [data-theme="dark"] .text-indigo-800, [data-theme="dark"] .text-indigo-900, [data-theme="dark"] .hover\:text-indigo-700:hover, [data-theme="dark"] .hover\:text-indigo-900:hover { color: #888bf4; } [data-theme="dark"] .border-indigo-100, [data-theme="dark"] .border-indigo-200, [data-theme="dark"] .border-indigo-300 { border-color: #333462; } [data-theme="dark"] .text-indigo-400, [data-theme="dark"] .text-indigo-500, [data-theme="dark"] .hover\:text-indigo-500:hover { color: #a9abf7; } [data-theme="dark"] .bg-orange-50, [data-theme="dark"] .bg-orange-100, [data-theme="dark"] .hover\:bg-orange-50:hover, [data-theme="dark"] .hover\:bg-orange-100:hover { background-color: #422a18; } [data-theme="dark"] .text-orange-600, [data-theme="dark"] .text-orange-700, [data-theme="dark"] .text-orange-800, [data-theme="dark"] .text-orange-900, [data-theme="dark"] .hover\:text-orange-700:hover, [data-theme="dark"] .hover\:text-orange-900:hover { color: #f97316; } [data-theme="dark"] .border-orange-100, [data-theme="dark"] .border-orange-200, [data-theme="dark"] .border-orange-300 { border-color: #663818; } [data-theme="dark"] .text-orange-400, [data-theme="dark"] .text-orange-500, [data-theme="dark"] .hover\:text-orange-500:hover { color: #fcb27f; } [data-theme="dark"] .bg-purple-50, [data-theme="dark"] .bg-purple-100, [data-theme="dark"] .hover\:bg-purple-50:hover, [data-theme="dark"] .hover\:bg-purple-100:hover { background-color: #342541; } [data-theme="dark"] .text-purple-600, [data-theme="dark"] .text-purple-700, [data-theme="dark"] .text-purple-800, [data-theme="dark"] .text-purple-900, [data-theme="dark"] .hover\:text-purple-700:hover, [data-theme="dark"] .hover\:text-purple-900:hover { color: #b874f8; } [data-theme="dark"] .border-purple-100, [data-theme="dark"] .border-purple-200, [data-theme="dark"] .border-purple-300 { border-color: #4a2e64; } [data-theme="dark"] .text-purple-400, [data-theme="dark"] .text-purple-500, [data-theme="dark"] .hover\:text-purple-500:hover { color: #cfa2fb; } [data-theme="dark"] .bg-red-50, [data-theme="dark"] .bg-red-100, [data-theme="dark"] .hover\:bg-red-50:hover, [data-theme="dark"] .hover\:bg-red-100:hover { background-color: #402221; } [data-theme="dark"] .text-red-600, [data-theme="dark"] .text-red-700, [data-theme="dark"] .text-red-800, [data-theme="dark"] .text-red-900, [data-theme="dark"] .hover\:text-red-700:hover, [data-theme="dark"] .hover\:text-red-900:hover { color: #f26666; } [data-theme="dark"] .border-red-100, [data-theme="dark"] .border-red-200, [data-theme="dark"] .border-red-300 { border-color: #622828; } [data-theme="dark"] .text-red-400, [data-theme="dark"] .text-red-500, [data-theme="dark"] .hover\:text-red-500:hover { color: #f69898; } [data-theme="dark"] .bg-rose-50, [data-theme="dark"] .bg-rose-100, [data-theme="dark"] .hover\:bg-rose-50:hover, [data-theme="dark"] .hover\:bg-rose-100:hover { background-color: #412125; } [data-theme="dark"] .text-rose-600, [data-theme="dark"] .text-rose-700, [data-theme="dark"] .text-rose-800, [data-theme="dark"] .text-rose-900, [data-theme="dark"] .hover\:text-rose-700:hover, [data-theme="dark"] .hover\:text-rose-900:hover { color: #f6627b; } [data-theme="dark"] .border-rose-100, [data-theme="dark"] .border-rose-200, [data-theme="dark"] .border-rose-300 { border-color: #642730; } [data-theme="dark"] .text-rose-400, [data-theme="dark"] .text-rose-500, [data-theme="dark"] .hover\:text-rose-500:hover { color: #f995a6; } [data-theme="dark"] .bg-sky-50, [data-theme="dark"] .bg-sky-100, [data-theme="dark"] .hover\:bg-sky-50:hover, [data-theme="dark"] .hover\:bg-sky-100:hover { background-color: #18333e; } [data-theme="dark"] .text-sky-600, [data-theme="dark"] .text-sky-700, [data-theme="dark"] .text-sky-800, [data-theme="dark"] .text-sky-900, [data-theme="dark"] .hover\:text-sky-700:hover, [data-theme="dark"] .hover\:text-sky-900:hover { color: #0ea5e9; } [data-theme="dark"] .border-sky-100, [data-theme="dark"] .border-sky-200, [data-theme="dark"] .border-sky-300 { border-color: #164960; } [data-theme="dark"] .text-sky-400, [data-theme="dark"] .text-sky-500, [data-theme="dark"] .hover\:text-sky-500:hover { color: #7acef3; } [data-theme="dark"] .bg-teal-50, [data-theme="dark"] .bg-teal-100, [data-theme="dark"] .hover\:bg-teal-50:hover, [data-theme="dark"] .hover\:bg-teal-100:hover { background-color: #193632; } [data-theme="dark"] .text-teal-600, [data-theme="dark"] .text-teal-700, [data-theme="dark"] .text-teal-800, [data-theme="dark"] .text-teal-900, [data-theme="dark"] .hover\:text-teal-700:hover, [data-theme="dark"] .hover\:text-teal-900:hover { color: #14b8a6; } [data-theme="dark"] .border-teal-100, [data-theme="dark"] .border-teal-200, [data-theme="dark"] .border-teal-300 { border-color: #185049; } [data-theme="dark"] .text-teal-400, [data-theme="dark"] .text-teal-500, [data-theme="dark"] .hover\:text-teal-500:hover { color: #7ed8ce; } [data-theme="dark"] .bg-violet-50, [data-theme="dark"] .bg-violet-100, [data-theme="dark"] .hover\:bg-violet-50:hover, [data-theme="dark"] .hover\:bg-violet-100:hover { background-color: #2e2641; } [data-theme="dark"] .text-violet-600, [data-theme="dark"] .text-violet-700, [data-theme="dark"] .text-violet-800, [data-theme="dark"] .text-violet-900, [data-theme="dark"] .hover\:text-violet-700:hover, [data-theme="dark"] .hover\:text-violet-900:hover { color: #a783f8; } [data-theme="dark"] .border-violet-100, [data-theme="dark"] .border-violet-200, [data-theme="dark"] .border-violet-300 { border-color: #403064; } [data-theme="dark"] .text-violet-400, [data-theme="dark"] .text-violet-500, [data-theme="dark"] .hover\:text-violet-500:hover { color: #bfa5fa; } [data-theme="dark"] .bg-yellow-50, [data-theme="dark"] .bg-yellow-100, [data-theme="dark"] .hover\:bg-yellow-50:hover, [data-theme="dark"] .hover\:bg-yellow-100:hover { background-color: #3f3616; } [data-theme="dark"] .text-yellow-600, [data-theme="dark"] .text-yellow-700, [data-theme="dark"] .text-yellow-800, [data-theme="dark"] .text-yellow-900, [data-theme="dark"] .hover\:text-yellow-700:hover, [data-theme="dark"] .hover\:text-yellow-900:hover { color: #eab308; } [data-theme="dark"] .border-yellow-100, [data-theme="dark"] .border-yellow-200, [data-theme="dark"] .border-yellow-300 { border-color: #614e13; } [data-theme="dark"] .text-yellow-400, [data-theme="dark"] .text-yellow-500, [data-theme="dark"] .hover\:text-yellow-500:hover { color: #f3d577; } /* ---------- Ombres : inopérantes sur fond sombre ---------- */ [data-theme="dark"] .shadow-lg, [data-theme="dark"] .shadow, [data-theme="dark"] .shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.35); } /* ---------- Champs de formulaire ---------- Beaucoup de champs n'ont pas de `bg-white` : sans règle explicite ils gardent le fond par défaut du navigateur, qui tranche sur le thème. Spécificité 0,2,1 pour passer devant un `.bg-white` (0,2,0). */ [data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]), [data-theme="dark"] select, [data-theme="dark"] textarea { background-color: #20201e; color: #f5f4ef; border-color: #3f3f3a; } [data-theme="dark"] input[type="checkbox"], [data-theme="dark"] input[type="radio"] { accent-color: #6366f1; } [data-theme="dark"] input[type="datetime-local"], [data-theme="dark"] input[type="date"] { color: #f5f4ef; } /* ---------- Détails ---------- */ [data-theme="dark"] .bg-black\/40, [data-theme="dark"] .bg-slate-900\/40, [data-theme="dark"] .bg-slate-900\/55 { background-color: rgba(0,0,0,.66); } [data-theme="dark"] img:not([data-theme-invert]) { filter: none; }