/* * Mode sombre — calque de surcharge additif. * * Ce theme (LearnUp) n'a jamais de systeme de variables complet : la * plupart des couleurs de styles.css sont ecrites en dur. On ne reecrit * pas ce fichier (7500+ lignes, trop de risque de regression) — on ajoute * ici un calque qui (1) redefinit les variables CSS que le theme utilise * deja largement (--bodycolor, --headingcolor, --maincolor, etc., via * [data-bs-theme=dark], la convention native Bootstrap 5) et (2) surcharge * les fonds/textes les plus visibles qui restent codes en dur ailleurs. * Resultat propre sur l'essentiel du site, pas garanti pixel-parfait sur * chaque page rare. * * Charge inconditionnellement (petit fichier), inerte tant que * n'est pas pose par le bouton de bascule * (voir layouts/frontend.blade.php). */ [data-bs-theme="dark"] { --maincolor:#3f8fd9; --backupcolor:#5aa8f0; --graycolor:#1b2434; /* --navcolor n'est JAMAIS utilisé comme fond dans styles.css (vérifié : uniquement `color:` et des bordures décoratives) — c'est la couleur de texte de toute la navigation (liens, menus déroulants, sous-menus). La garder sombre ici la rendait quasi invisible sur le fond sombre qu'on donne par ailleurs à la nav (texte #0d1424 sur fond #131b2a). */ --navcolor:#e4e9f2; --darkcolor:#e8edf4; --lightcolor:#141b2a; --headingcolor:#eef2f8; --bodycolor:#c3cbda; --mutedcolor:#8592a8; --formborder:#2c3648; --formbg:#1b2434; --form-color:#dbe1ea; --inversecolor:#7fb4f0; --footerbg:#0b111c; --footercolor:#8592a8; } [data-bs-theme="dark"] html, [data-bs-theme="dark"] body { background:#0f1520; } [data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2, [data-bs-theme="dark"] h3, [data-bs-theme="dark"] h4, [data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6, [data-bs-theme="dark"] .text-dark { color: var(--headingcolor) !important; } /* Pastilles "glass" posées sur la photo du bandeau d'accueil (.stat-pill) : fond volontairement clair même en mode sombre (elles flottent sur une image, pas sur le fond de page) — sans cette exception, la règle .text-dark ci-dessus rendait leur texte blanc sur fond resté blanc. */ [data-bs-theme="dark"] .stat-pill .text-dark { color: #1c2130 !important; } [data-bs-theme="dark"] .text-muted, [data-bs-theme="dark"] .text-muted-2 { /* .text-muted ET .text-muted-2 sont tous les deux codés en dur dans styles.css (color-mix(in srgb, #00305c, ...) !important) — pas une variable, donc jamais couvert par la redéfinition de --navcolor ci-dessus. C'est LA classe utilisée pour le texte secondaire sur la quasi-totalité des pages de contenu (à propos, cours, etc.). */ color: var(--mutedcolor) !important; } /* Navigation principale + menus deroulants */ [data-bs-theme="dark"] .nav-menus-wrapper, [data-bs-theme="dark"] .navigation, [data-bs-theme="dark"] .navigation-landscape, [data-bs-theme="dark"] .nav-dropdown, [data-bs-theme="dark"] .nav-dropdown-left { background: #131b2a !important; } [data-bs-theme="dark"] .navigation .nav-menu > li > a { color: var(--bodycolor) !important; } [data-bs-theme="dark"] .selecteur-langue .dropdown-toggle { color: var(--bodycolor); border-color: var(--formborder); } [data-bs-theme="dark"] .selecteur-langue .dropdown-item { color: var(--bodycolor) !important; } /* La langue ACTIVE (celle avec le ✓) a sa propre règle dans layouts/frontend.blade.php : .dropdown-item.active{color:#1c2130!important} — même spécificité que la règle ci-dessus (3 classes), donc l'ordre d'apparition dans le document tranchait, et cette règle-ci, plus bas dans le , gagnait. Sélecteur volontairement plus spécifique (attribut + 3 classes) pour ne plus dépendre de l'ordre. */ [data-bs-theme="dark"] .selecteur-langue .dropdown-item.active, [data-bs-theme="dark"] .selecteur-langue .dropdown-item:active { color: var(--bodycolor) !important; } /* Cartes, widgets, blocs blancs génériques du theme */ [data-bs-theme="dark"] .card, [data-bs-theme="dark"] .card-header, [data-bs-theme="dark"] .single-widgets, [data-bs-theme="dark"] .bg-white, [data-bs-theme="dark"] .modal-content, [data-bs-theme="dark"] .dropdown-menu, [data-bs-theme="dark"] .apercu-panneau, [data-bs-theme="dark"] .chat-ia-panneau { background: #161f30 !important; color: var(--bodycolor); border-color: var(--formborder); } [data-bs-theme="dark"] .card-header { border-color: var(--formborder) !important; } [data-bs-theme="dark"] .chat-ia-corps { background: transparent; } [data-bs-theme="dark"] .chat-ia-msg-bot { background: #1e293e !important; color: var(--bodycolor); } /* Formulaires */ [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select, [data-bs-theme="dark"] textarea { background-color: var(--formbg); border-color: var(--formborder); color: var(--form-color); } [data-bs-theme="dark"] .form-control::placeholder { color: var(--mutedcolor); } [data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus { background-color: var(--formbg); color: var(--form-color); } /* Tableaux */ [data-bs-theme="dark"] .table { color: var(--bodycolor); } [data-bs-theme="dark"] .table > :not(caption) > * > * { background-color: transparent; color: var(--bodycolor); border-color: var(--formborder); } [data-bs-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: rgba(255,255,255,.04); } /* Sections a fond clair codees en dur (accueil, pages de contenu) */ [data-bs-theme="dark"] .bg-light, [data-bs-theme="dark"] section.bg-light, [data-bs-theme="dark"] .py-5.bg-light { background: #131b2a !important; } [data-bs-theme="dark"] hr { border-color: var(--formborder); } /* Images/illustrations : un peu adoucies pour ne pas eblouir sur fond sombre */ [data-bs-theme="dark"] img:not(.no-dim) { filter: brightness(.92); }