/* ============================================================ themes.css : thème sombre (« black ») ------------------------------------------------------------ Active via . Ne touche QUE les neutres et les fonds sémantiques. L'accent produit (--accent...) reste inchangé. ============================================================ */ [data-theme="dark"], [data-bs-theme="dark"] { /* Neutres */ --c-bg: #0e1014; --c-surface: #171a20; --c-surface-2: #1f232b; --c-border: #2a2f38; --c-border-strong: #3a404b; --c-text: #e7eaef; --c-text-muted: #9aa1ad; --c-text-faint: #6b7280; /* Sidebar : encore plus profonde que les surfaces */ --c-sidebar-bg: #090a0d; --c-sidebar-surface: #16191f; --c-sidebar-text: #c2c8d0; --c-sidebar-text-muted: #7a808b; --c-sidebar-border: #20242c; /* Fonds sémantiques adaptés au sombre (teintes translucides) */ --c-success-soft: rgba(22, 163, 74, 0.16); --c-danger-soft: rgba(220, 38, 38, 0.16); --c-warning-soft: rgba(217, 119, 6, 0.18); --c-info-soft: rgba(8, 145, 178, 0.16); --c-orange-soft: rgba(234, 88, 12, 0.16); --c-score-strong-soft: rgba(21, 128, 61, 0.22); --c-score-good-soft: rgba(101, 163, 13, 0.20); /* Couleurs sémantiques légèrement éclaircies pour le contraste sur fond sombre */ --c-success: #36c46b; --c-danger: #f1606b; --c-warning: #f0a93b; --c-info: #2bb6d4; --c-orange: #f58549; --c-score-strong: #4ade80; --c-score-good: #a3e635; --c-success-rgb: 54, 196, 107; --c-danger-rgb: 241, 96, 107; --c-warning-rgb: 240, 169, 59; --c-info-rgb: 43, 182, 212; --c-text-muted-rgb: 154, 161, 173; /* Ombres : plus discrètes (peu visibles sur fond sombre, on garde un léger relief) */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5); --shadow: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.6); } /* ---- Ajustements de composants en thème sombre ---- */ /* Topbar translucide : fond sombre au lieu de blanc */ [data-theme="dark"] .topbar, [data-bs-theme="dark"] .topbar { background: rgba(20, 22, 27, 0.8); } /* Alertes : texte clair lisible sur fonds translucides */ [data-theme="dark"] .alert--success { color: #8ff0b3; border-color: rgba(54, 196, 107, 0.35); } [data-theme="dark"] .alert--danger { color: #ffb1b7; border-color: rgba(241, 96, 107, 0.35); } [data-theme="dark"] .alert--warning { color: #ffd699; border-color: rgba(240, 169, 59, 0.35); } [data-theme="dark"] .alert--info { color: #a3e7f5; border-color: rgba(43, 182, 212, 0.35); } /* Toast : surface claire sur fond sombre pour rester distinct */ [data-theme="dark"] .toast { background: #2a2f38; color: #fff; } /* Squelette de chargement : dégradé sombre */ [data-theme="dark"] .skeleton { background: linear-gradient(90deg, var(--c-surface-2) 25%, #2c313a 50%, var(--c-surface-2) 75%); background-size: 200% 100%; } /* Interrupteur (toggle) : piste plus visible en sombre */ [data-theme="dark"] .switch__slider { background: var(--c-border-strong); } /* Avatar / accent contrast : sur AI.biza (jaune) le texte reste sombre, OK. Rien à changer : les composants consomment --accent / --accent-contrast. */