/* ============================================================ SkoolDash — themes.css Thème sombre appliqué via [data-theme="dark"] sur . Les variables ci-dessous overrident celles de main.css. ============================================================ */ [data-theme="dark"] { --color-primary: #8b83ff; --color-primary-hover: #a09aff; --color-primary-soft: #2a2947; --color-secondary: #1A1B2E; --color-accent: #2dd4a8; --color-accent-hover: #4fe2bd; --color-danger: #ff6b7a; --color-danger-hover: #ff8591; --color-warning: #ffb43b; --color-info: #5dade2; --color-text: #e6e8ec; --color-text-soft: #9ca3af; --color-sidebar: #14151f; --color-sidebar-hover: #22233a; --color-sidebar-active: #8b83ff; --color-sidebar-text: #FFFFFF; --color-sidebar-muted: #8a8fa3; --color-card-bg: #2A2B3D; --color-page-bg: #1A1B2E; --color-border: #3A3B4E; --color-border-soft: #323347; --shadow: 0 2px 12px rgba(0, 0, 0, 0.4); --shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.55); --shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.3); --tier-free: #6b7280; --tier-standard: #5dade2; --tier-premium: #8b83ff; --tier-vip: #ffb43b; --tier-honneur: #2dd4a8; --star-active: #ffb43b; --star-inactive: #4a4b5f; } [data-theme="dark"] body { color: var(--color-text); background: var(--color-page-bg); } [data-theme="dark"] .app-header { background: var(--color-card-bg); border-bottom-color: var(--color-border); } [data-theme="dark"] .app-header__search input { background: var(--color-page-bg); border-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] .app-header__search input:focus { background: var(--color-card-bg); } [data-theme="dark"] .app-header__logout { border-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] .table thead th { background: var(--color-page-bg); color: var(--color-text-soft); } [data-theme="dark"] .table tbody tr:hover { background: rgba(255, 255, 255, 0.04); } [data-theme="dark"] .form-input, [data-theme="dark"] .form-select, [data-theme="dark"] .form-textarea { background: var(--color-page-bg); border-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] .form-input::placeholder { color: var(--color-text-soft); } [data-theme="dark"] .form-error { background: rgba(255, 71, 87, 0.15); color: #ffb3bb; } [data-theme="dark"] .form-success { background: rgba(0, 200, 150, 0.15); color: #7be0c1; } [data-theme="dark"] .level-badge--NSA { background: rgba(255, 71, 87, 0.2); color: #ffb3bb; } [data-theme="dark"] .level-badge--NA { background: rgba(108, 99, 255, 0.2); color: #b0abff; } [data-theme="dark"] .level-badge--NM { background: rgba(0, 200, 150, 0.2); color: #7be0c1; } [data-theme="dark"] .status-pill--active { background: rgba(0, 200, 150, 0.15); color: #7be0c1; } [data-theme="dark"] .status-pill--left { background: rgba(255, 71, 87, 0.15); color: #ffb3bb; } /* KPI cards — thème sombre : le delta (sous-texte %) doit rester lisible */ [data-theme="dark"] .kpi-card__delta { color: var(--color-text-soft); } [data-theme="dark"] .kpi-card__delta--up { color: var(--color-accent); } [data-theme="dark"] .kpi-card__delta--down { color: var(--color-danger); } [data-theme="dark"] .gr-toggle { background: var(--color-page-bg); border-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] .gr-toggle.is-active { background: rgba(45, 212, 168, 0.12); color: var(--color-accent); border-color: var(--color-accent); } [data-theme="dark"] .btn--ghost { border-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] .btn--ghost:hover:not(:disabled) { background: rgba(255, 255, 255, 0.05); } /* Toggle UI pour basculer thème (composant réutilisable) */ .theme-toggle { background: none; border: 1px solid var(--color-border); border-radius: 999px; padding: 5px 10px; cursor: pointer; font-size: .85rem; color: var(--color-text); transition: all var(--transition); } .theme-toggle:hover { background: var(--color-secondary); }