/* ============================================================ Vigilox — Mode sombre ------------------------------------------------------------ Une seule feuille pour les DEUX coquilles (base.html et rapport_base.html). Rien ne s'applique tant que ne porte pas data-bs-theme="dark" : le mode clair reste exactement ce qu'il etait, octet pour octet. Bootstrap 5.3 sait deja rhabiller SES composants quand il voit data-bs-theme="dark" (cartes, tableaux, champs, modales, listes deroulantes). Ce fichier ne refait pas ce travail : il traite ce que Bootstrap ne peut pas voir, c'est-a-dire les fonds clairs ecrits a la main dans les gabarits. ATTENTION au !important : il n'est pas cosmetique. Un style="background:#fff" pose sur la balise l'emporte sur n'importe quelle feuille externe. Sans !important, la moitie de l'application resterait blanche au milieu du sombre. ============================================================ */ /* ── Palette ────────────────────────────────────────────── */ [data-bs-theme="dark"] { --vx-bg: #0f1216; /* fond de page */ --vx-surface: #171c22; /* carte, panneau */ --vx-surface-2: #1f262e; /* en-tete, zone surelevee */ --vx-surface-3: #262f39; /* survol */ --vx-border: #2b333d; --vx-text: #e5e9ef; --vx-muted: #9aa5b1; /* L'orange de la marque ne bouge pas : c'est le seul repere visuel commun aux deux themes. */ --ix-orange: #F26522; --ix-orange-dark: #D4541A; color-scheme: dark; /* Variables Bootstrap — pilotent tout ce que Bootstrap dessine */ --bs-body-bg: var(--vx-bg); --bs-body-color: var(--vx-text); --bs-emphasis-color: #ffffff; --bs-secondary-color: var(--vx-muted); --bs-tertiary-bg: var(--vx-surface-2); --bs-border-color: var(--vx-border); --bs-card-bg: var(--vx-surface); } [data-bs-theme="dark"] body { background: var(--vx-bg) !important; color: var(--vx-text); } /* ── Surfaces peintes en clair dans les gabarits ──────────── Les selecteurs d'attribut attrapent les style="..." poses directement sur les balises. On vise le FOND seulement : [style*="background:#fff"] ne touche pas color:#fff, donc le texte blanc des boutons orange reste blanc. ───────────────────────────────────────────────────────── */ [data-bs-theme="dark"] [style*="background:#fff"], [data-bs-theme="dark"] [style*="background: #fff"], [data-bs-theme="dark"] [style*="background:#FFF"], [data-bs-theme="dark"] [style*="background:white"], [data-bs-theme="dark"] [style*="background: white"], [data-bs-theme="dark"] [style*="background-color:#fff"], [data-bs-theme="dark"] [style*="background-color: #fff"], [data-bs-theme="dark"] [style*="background-color:white"], [data-bs-theme="dark"] [style*="background:#f8fafc"], [data-bs-theme="dark"] [style*="background:#f9fafb"], [data-bs-theme="dark"] [style*="background:#f1f5f9"], [data-bs-theme="dark"] [style*="background:#f8f9fa"], [data-bs-theme="dark"] [style*="background:#f3f4f6"], [data-bs-theme="dark"] [style*="background:#fafafa"], [data-bs-theme="dark"] [style*="background:#f5f5f5"], [data-bs-theme="dark"] [style*="background:#e2e8f0"] { background: var(--vx-surface) !important; color: var(--vx-text); } /* Les fonds legerement orangés gardent leur role d'accent : on les assombrit sans les banaliser. Regle placee APRES la precedente — a specificite egale, la derniere gagne, et [style*="background:#fff"] attrape aussi #fff8f4. */ [data-bs-theme="dark"] [style*="background:#fff8f4"], [data-bs-theme="dark"] [style*="background:#fff3ec"], [data-bs-theme="dark"] [style*="background:#fef3c7"], [data-bs-theme="dark"] [style*="background:#fffbeb"] { background: #2a1f16 !important; } [data-bs-theme="dark"] [style*="background:#f0fdf4"], [data-bs-theme="dark"] [style*="background:#dcfce7"] { background: #12241a !important; } [data-bs-theme="dark"] [style*="background:#fef2f2"], [data-bs-theme="dark"] [style*="background:#fee2e2"] { background: #2a1618 !important; } [data-bs-theme="dark"] [style*="background:#eff6ff"], [data-bs-theme="dark"] [style*="background:#dbeafe"], [data-bs-theme="dark"] [style*="background:#f0f9ff"] { background: #14202e !important; } /* ── Texte fonce ecrit en dur ─────────────────────────────── Un fond devenu sombre avec un texte reste #1e293b est illisible. Ces valeurs sont celles reellement presentes dans les gabarits (relevees, pas devinees). ───────────────────────────────────────────────────────── */ [data-bs-theme="dark"] [style*="color:#1C1C1C"], [data-bs-theme="dark"] [style*="color:#1c1c1c"], [data-bs-theme="dark"] [style*="color:#111"], [data-bs-theme="dark"] [style*="color:#222"], [data-bs-theme="dark"] [style*="color:#333"], [data-bs-theme="dark"] [style*="color:#000"], [data-bs-theme="dark"] [style*="color:#212529"], [data-bs-theme="dark"] [style*="color:#0f172a"], [data-bs-theme="dark"] [style*="color:#1e293b"], [data-bs-theme="dark"] [style*="color:#334155"], [data-bs-theme="dark"] [style*="color:#374151"], [data-bs-theme="dark"] [style*="color:#1f2937"] { color: var(--vx-text) !important; } [data-bs-theme="dark"] [style*="color:#475569"], [data-bs-theme="dark"] [style*="color:#64748b"], [data-bs-theme="dark"] [style*="color:#6b7280"] { color: var(--vx-muted) !important; } /* Bordures gris clair posees a la main */ [data-bs-theme="dark"] [style*="border:1px solid #e2e8f0"], [data-bs-theme="dark"] [style*="border:1px solid #e5e7eb"], [data-bs-theme="dark"] [style*="border:1px solid #dee2e6"], [data-bs-theme="dark"] [style*="border:2px solid #e2e8f0"], [data-bs-theme="dark"] [style*="border:1px solid #ddd"] { border-color: var(--vx-border) !important; } /* ── Classes utilitaires Bootstrap que 5.3 laisse en clair ── */ [data-bs-theme="dark"] .bg-white, [data-bs-theme="dark"] .bg-light { background-color: var(--vx-surface) !important; color: var(--vx-text); } [data-bs-theme="dark"] .text-dark { color: var(--vx-text) !important; } [data-bs-theme="dark"] .text-muted { color: var(--vx-muted) !important; } [data-bs-theme="dark"] .border { border-color: var(--vx-border) !important; } [data-bs-theme="dark"] .card { background-color: var(--vx-surface); border-color: var(--vx-border); } [data-bs-theme="dark"] .card-header, [data-bs-theme="dark"] .card-footer, [data-bs-theme="dark"] .list-group-item, [data-bs-theme="dark"] .accordion-button, [data-bs-theme="dark"] .accordion-body { background-color: var(--vx-surface-2); border-color: var(--vx-border); color: var(--vx-text); } [data-bs-theme="dark"] .modal-content, [data-bs-theme="dark"] .dropdown-menu, [data-bs-theme="dark"] .offcanvas { background-color: var(--vx-surface); border-color: var(--vx-border); color: var(--vx-text); } [data-bs-theme="dark"] .dropdown-item { color: var(--vx-text); } [data-bs-theme="dark"] .dropdown-item:hover, [data-bs-theme="dark"] .dropdown-item:focus { background-color: var(--vx-surface-3); color: #fff; } /* Champs de saisie — Bootstrap 5.3 les traite, mais pas quand le gabarit leur a pose un fond blanc en dur. */ [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select, [data-bs-theme="dark"] textarea, [data-bs-theme="dark"] input[type="text"], [data-bs-theme="dark"] input[type="email"], [data-bs-theme="dark"] input[type="tel"], [data-bs-theme="dark"] input[type="number"], [data-bs-theme="dark"] input[type="date"], [data-bs-theme="dark"] input[type="time"], [data-bs-theme="dark"] input[type="password"], [data-bs-theme="dark"] select { background-color: var(--vx-surface-2) !important; border-color: var(--vx-border) !important; color: var(--vx-text) !important; } [data-bs-theme="dark"] .form-control::placeholder, [data-bs-theme="dark"] textarea::placeholder { color: #6b7480 !important; } [data-bs-theme="dark"] .input-group-text { background-color: var(--vx-surface-3) !important; border-color: var(--vx-border) !important; color: var(--vx-muted) !important; } /* Tableaux */ [data-bs-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--vx-text); --bs-table-border-color: var(--vx-border); --bs-table-striped-bg: rgba(255,255,255,.03); --bs-table-hover-bg: rgba(255,255,255,.06); } [data-bs-theme="dark"] .table > thead { color: var(--vx-muted); } /* Ombres — une ombre noire sur fond sombre ne se voit pas et aplatit tout. On la remplace par un liseré. */ [data-bs-theme="dark"] [style*="box-shadow"] { box-shadow: 0 1px 3px rgba(0,0,0,.45) !important; } /* ── Coquille publique / applicative (base.html) ────────── */ [data-bs-theme="dark"] .navbar { background: var(--vx-surface) !important; border-bottom: 2px solid var(--ix-orange); } [data-bs-theme="dark"] .navbar-brand, [data-bs-theme="dark"] .navbar .nav-link { color: var(--vx-text) !important; } [data-bs-theme="dark"] .navbar-brand span { color: var(--ix-orange) !important; } [data-bs-theme="dark"] .navbar-toggler { border-color: var(--vx-border); } [data-bs-theme="dark"] .navbar-toggler-icon { filter: invert(1) grayscale(100%) brightness(200%); } /* ── Coquille rapport (rapport_base.html) ─────────────────── Topbar et sidebar sont deja sombres en mode clair : on les descend d'un cran pour qu'elles ne paraissent pas PLUS claires que le contenu, ce qui inverserait la hierarchie. */ [data-bs-theme="dark"] #topbar { background: #0b0e12 !important; } [data-bs-theme="dark"] #sidebar { background: #0b0e12 !important; } /* ── L'interrupteur lui-meme ────────────────────────────── */ .vx-theme-btn { background: transparent; border: 1px solid rgba(128,128,128,.35); color: inherit; border-radius: 8px; padding: 3px 9px; line-height: 1; cursor: pointer; font-size: .95rem; } .vx-theme-btn:hover { border-color: var(--ix-orange); color: var(--ix-orange); } /* Un seul bouton, deux icones : on montre celle du theme vers lequel le clic emmene, pas celle du theme courant. */ .vx-theme-btn .vx-i-dark { display: inline; } .vx-theme-btn .vx-i-light { display: none; } [data-bs-theme="dark"] .vx-theme-btn .vx-i-dark { display: none; } [data-bs-theme="dark"] .vx-theme-btn .vx-i-light { display: inline; } /* Les photos ne se teintent jamais : un rapport d'inspection se juge sur ses images. */ [data-bs-theme="dark"] img { filter: none !important; } /* ── Ce qui DOIT rester blanc ────────────────────────────── Une signature est un trace NOIR sur fond blanc. Repeindre ce fond en sombre ne la rend pas discrete : elle devient INVISIBLE. L'inspecteur croit sa signature perdue, et le pave de saisie semble ne rien enregistrer. Quatre endroits reels : settings.html (apercu + canvas #sig-pad) et rapport_signatures.html (inspecteur + client). La specificite est volontairement superieure a celle de la regle des fonds clairs du haut : img[style*=…] ajoute un selecteur de type, donc cette regle gagne quelle que soit sa position dans la feuille. ───────────────────────────────────────────────────────── */ [data-bs-theme="dark"] img[style*="background:#fff"], [data-bs-theme="dark"] img[style*="background: #fff"], [data-bs-theme="dark"] img[style*="background:white"], [data-bs-theme="dark"] canvas[style*="background:#fff"], [data-bs-theme="dark"] canvas[style*="background: #fff"], [data-bs-theme="dark"] canvas[style*="background:white"] { background: #ffffff !important; } /* ── Cartes blanches declarees dans les