/* ========================================= _shared/css/dark-mode.css Dark mode partagé pour TOUS les thèmes. Activation : (Bootstrap 5.3 natif). Géré par _shared/js/theme-toggle.js + composant theme_toggle.html. ========================================= */ /* ---------- Variables Bootstrap natives sous dark ---------- Bootstrap 5.3 lit ces vars automatiquement quand data-bs-theme=dark. On surcharge celles qui causent le plus de soucis "blanc sur clair". */ [data-bs-theme="dark"] { --bs-body-bg: #0f1419; --bs-body-color: #e6e6e6; --bs-secondary-color: #a8b3bd; /* text-muted lisible (au lieu du gris foncé par défaut) */ --bs-tertiary-color: #8a96a3; --bs-emphasis-color: #ffffff; --bs-border-color: #2a3340; --bs-border-color-translucent: rgba(255, 255, 255, 0.1); --bs-primary-bg-subtle: #1a3d10; /* version sombre des -subtle pour rester lisibles */ --bs-secondary-bg-subtle: #1d2e35; --bs-success-bg-subtle: #0d3220; --bs-info-bg-subtle: #163445; --bs-warning-bg-subtle: #3a2d0a; --bs-danger-bg-subtle: #3a1518; --bs-light-bg-subtle: #1a212a; --bs-dark-bg-subtle: #0a0d12; } /* ---------- Surfaces (cards, sections, accordion) ---------- Patch défensif anti "blanc sur gris clair". */ [data-bs-theme="dark"] .bg-white, [data-bs-theme="dark"] .bg-light { background-color: #161c24 !important; color: var(--bs-body-color); } [data-bs-theme="dark"] .card { background-color: #161c24; border-color: #2a3340; color: var(--bs-body-color); } [data-bs-theme="dark"] .card .text-muted, [data-bs-theme="dark"] .text-muted, [data-bs-theme="dark"] .card .text-secondary, [data-bs-theme="dark"] .text-secondary, [data-bs-theme="dark"] .card .text-body-secondary, [data-bs-theme="dark"] .text-body-secondary { color: var(--bs-secondary-color) !important; } [data-bs-theme="dark"] .accordion { --bs-accordion-bg: #161c24; --bs-accordion-color: var(--bs-body-color); --bs-accordion-border-color: #2a3340; --bs-accordion-active-bg: #1a3d10; --bs-accordion-active-color: #b0e896; --bs-accordion-btn-color: var(--bs-body-color); } [data-bs-theme="dark"] .list-group-item { background-color: #161c24; color: var(--bs-body-color); border-color: #2a3340; } [data-bs-theme="dark"] .breadcrumb, [data-bs-theme="dark"] .breadcrumb-item.active { color: var(--bs-secondary-color); } /* ---------- Boutons outline qui deviennent invisibles en dark ---------- .btn-outline-X sur fond blanc OK, mais en dark le contour fonce trop. */ [data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-color: #b8c2cc; --bs-btn-border-color: #3a4754; --bs-btn-hover-bg: #2a3340; --bs-btn-hover-border-color: #4a5764; --bs-btn-hover-color: #ffffff; } [data-bs-theme="dark"] .btn-light { --bs-btn-bg: #2a3340; --bs-btn-color: #e6e6e6; --bs-btn-border-color: #2a3340; --bs-btn-hover-bg: #3a4754; --bs-btn-hover-color: #ffffff; } /* ---------- Forms (inputs / textarea) ---------- */ [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background-color: #1a212a; border-color: #2a3340; color: var(--bs-body-color); } [data-bs-theme="dark"] .form-control::placeholder { color: #6c7a89; } [data-bs-theme="dark"] .form-control:focus { background-color: #1a212a; color: var(--bs-body-color); border-color: var(--bs-primary); } /* ---------- Navigation / dropdowns ---------- */ [data-bs-theme="dark"] .navbar, [data-bs-theme="dark"] .navbar-light, [data-bs-theme="dark"] .header { background-color: #0f1419 !important; } [data-bs-theme="dark"] .navbar a, [data-bs-theme="dark"] .navmenu a, [data-bs-theme="dark"] .nav-link { color: var(--bs-body-color); } [data-bs-theme="dark"] .dropdown-menu { background-color: #161c24; border-color: #2a3340; } [data-bs-theme="dark"] .dropdown-item { color: var(--bs-body-color); } [data-bs-theme="dark"] .dropdown-item:hover, [data-bs-theme="dark"] .dropdown-item:focus { background-color: #1a3d10; color: #ffffff; } /* ---------- Section title bandes claires ---------- */ [data-bs-theme="dark"] .section, [data-bs-theme="dark"] .section-padding { background-color: transparent; } /* ---------- Toggle button (icône qui change) ---------- */ .theme-toggle-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid transparent; background: transparent; color: inherit; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .theme-toggle-btn:hover { background-color: rgba(0, 0, 0, 0.08); } [data-bs-theme="dark"] .theme-toggle-btn:hover { background-color: rgba(255, 255, 255, 0.1); } .theme-toggle-btn .bi-sun { display: none; } .theme-toggle-btn .bi-moon { display: inline-block; } [data-bs-theme="dark"] .theme-toggle-btn .bi-sun { display: inline-block; } [data-bs-theme="dark"] .theme-toggle-btn .bi-moon { display: none; }