/* * TL.7 (#136 §3.4) — dark-mode overlay. * * Strategy: rather than refactor app.css + tool-loop-chat.css to use CSS * variables (huge surface area, big risk), we layer overrides scoped to * `[data-theme="dark"]`. We ALSO set `data-bs-theme="dark"` on , * which makes Bootstrap 5.3 auto-darken cards/dropdowns/modals/forms/ * navbars/tables for free — so this file only needs to cover surfaces * that aren't Bootstrap-themed. * * Activation: ThemeService (Sailor.AI.App.Client/Services/ThemeService.cs) * sets both attributes on at startup based on localStorage; the * UserMenu toggle flips them. The initial paint also reads the system * preference so dark-mode users don't flash light before localStorage * applies. * * No !important except where Bootstrap utility classes already use it * (dropdowns) — keep cascade rules tractable. */ /* ─── Page chrome ────────────────────────────────────────────────────── */ [data-theme="dark"] body { background-color: #0f172a; color: #e2e8f0; } [data-theme="dark"] a, [data-theme="dark"] .btn-link { color: #60a5fa; } [data-theme="dark"] .btn-primary { background-color: #2563eb; border-color: #1d4ed8; } [data-theme="dark"] .top-menu { background-color: #1e293b; border-bottom-color: #334155; } [data-theme="dark"] .top-menu .start::after, [data-theme="dark"] .lang-selector::after { background-color: #334155; } [data-theme="dark"] .top-menu .end .user-dropdown { border-color: #334155; color: #e2e8f0; } [data-theme="dark"] .top-menu .dropdown-menu { background: #1e293b !important; border-color: #334155 !important; color: #e2e8f0; } [data-theme="dark"] .top-menu .dropdown-item { color: #e2e8f0; } [data-theme="dark"] .top-menu .dropdown-item:hover, [data-theme="dark"] .top-menu .dropdown-item:focus { background-color: #334155; color: #93c5fd !important; } [data-theme="dark"] .sidebar { background-color: #1e293b; } [data-theme="dark"] .sidebar .nav-title { color: #94a3b8; } [data-theme="dark"] .page.sidebar-expanded .sidebar:hover { border-inline-end-color: #334155; } /* ─── Tool-loop chat (all .tl-* classes) ─────────────────────────────── */ [data-theme="dark"] .tl-sidebar { background: #1e293b; border-color: #334155; color: #e2e8f0; } [data-theme="dark"] .tl-sidebar-header { border-bottom-color: #334155; } [data-theme="dark"] .tl-sidebar-loading, [data-theme="dark"] .tl-sidebar-empty { color: #94a3b8; } [data-theme="dark"] .tl-sidebar-item { border-bottom-color: #334155; color: #e2e8f0; } [data-theme="dark"] .tl-sidebar-item:hover { background: #334155; } [data-theme="dark"] .tl-sidebar-item.active { background: #1e3a8a; border-left-color: #60a5fa; } [data-theme="dark"] .tl-sidebar-item-time { color: #94a3b8; } [data-theme="dark"] .tl-main { background: #0f172a; border-color: #334155; } [data-theme="dark"] .tl-empty-pane { color: #94a3b8; } [data-theme="dark"] .tl-header { border-bottom-color: #334155; background: #1e293b; color: #e2e8f0; } [data-theme="dark"] .tl-header-title { color: #f1f5f9; } [data-theme="dark"] .tl-header-status, [data-theme="dark"] .tl-header-meta { color: #94a3b8; } [data-theme="dark"] .tl-timeline { background: #0f172a; color: #e2e8f0; } [data-theme="dark"] .tl-composer, [data-theme="dark"] .tl-composer-form { background: #1e293b; border-color: #334155; color: #e2e8f0; } [data-theme="dark"] .tl-composer textarea, [data-theme="dark"] .tl-composer input[type="text"] { background: #0f172a; border-color: #334155; color: #e2e8f0; } [data-theme="dark"] .tl-composer textarea::placeholder { color: #64748b; } [data-theme="dark"] .tl-tool-chip, [data-theme="dark"] .tl-tool-result-chip { background: #1e293b; border-color: #334155; color: #e2e8f0; } [data-theme="dark"] .tl-tool-chip-error { background: #3b1414; border-color: #7f1d1d; color: #fecaca; } [data-theme="dark"] .tl-tool-args, [data-theme="dark"] .tl-tool-preview { background: #0f172a; color: #cbd5e1; } [data-theme="dark"] .tl-user-bubble { background: #1d4ed8; color: #f8fafc; } [data-theme="dark"] .tl-assistant-bubble { background: #1e293b; border-color: #334155; color: #e2e8f0; } /* Markdown content inside the assistant bubble */ [data-theme="dark"] .tl-assistant-bubble code, [data-theme="dark"] .tl-assistant-bubble pre { background: #0f172a; color: #f1f5f9; } [data-theme="dark"] .tl-assistant-bubble pre { border: 1px solid #334155; } [data-theme="dark"] .tl-assistant-bubble blockquote { border-left-color: #475569; color: #cbd5e1; } [data-theme="dark"] .tl-assistant-bubble a { color: #60a5fa; } [data-theme="dark"] .tl-assistant-bubble table { border-color: #334155; } [data-theme="dark"] .tl-assistant-bubble th, [data-theme="dark"] .tl-assistant-bubble td { border-color: #334155; } /* Diagnostic pane — dark surface, monospace JSON contrast */ [data-theme="dark"] .tl-diag, [data-theme="dark"] .tl-diag-pane { background: #1e293b; border-left-color: #334155; color: #e2e8f0; } [data-theme="dark"] .tl-diag-entry { background: #0f172a; border-color: #334155; } [data-theme="dark"] .tl-diag-entry-summary { color: #cbd5e1; } [data-theme="dark"] .tl-diag-entry pre, [data-theme="dark"] .tl-diag-payload { background: #020617; color: #e0e7ef; border-color: #334155; } [data-theme="dark"] .tl-diag-badge { background: #334155; color: #e2e8f0; } /* Right-pane Files tab (added in §3.7) */ [data-theme="dark"] .tl-files-panel { background: #1e293b; border-left-color: #334155; } [data-theme="dark"] .tl-files-header { border-bottom-color: #334155; color: #f1f5f9; } [data-theme="dark"] .tl-files-count, [data-theme="dark"] .tl-files-empty { color: #94a3b8; } [data-theme="dark"] .tl-file-row { background: #0f172a; border-bottom-color: #334155; color: #e2e8f0; } [data-theme="dark"] .tl-file-row:hover { background: #1e293b; } [data-theme="dark"] .tl-file-row-icon, [data-theme="dark"] .tl-file-row-desc { color: #94a3b8; } /* TL.7 (#138): Memory tab uses the same .tl-files-* shell — extra styling beyond the shared classes is unnecessary for now. */ /* ─── Legacy chat surfaces (kept for backward compat) ────────────────── */ [data-theme="dark"] .ai-message .message-content { background-color: #1e293b; color: #e2e8f0; border-color: #334155; } [data-theme="dark"] .user-message .message-content { background-color: #1d4ed8; color: #f8fafc; } [data-theme="dark"] .plan-progress-panel { background-color: #1e293b; border-color: #334155; color: #94a3b8; } [data-theme="dark"] .plan-progress-status-text { color: #cbd5e1; } [data-theme="dark"] .plan-progress-step-running { background: rgba(96, 165, 250, 0.12); color: #93c5fd; } [data-theme="dark"] .plan-progress-step-done { color: #86efac; } [data-theme="dark"] .plan-progress-step-failed { color: #fca5a5; background: rgba(248, 113, 113, 0.10); } [data-theme="dark"] .chat-form-container { background-color: #1e293b; } [data-theme="dark"] .chat-form-container .form-control { background-color: #0f172a; border-color: #334155; color: #e2e8f0; } [data-theme="dark"] .chat-form-container .form-control:focus { border-color: #60a5fa; } /* ─── Inline action chips (§3.3) ─────────────────────────────────────── */ [data-theme="dark"] .tl-action-chip { background: #1e293b; border-color: #475569; color: #e2e8f0; } [data-theme="dark"] .tl-action-chip:hover { background: #334155; border-color: #60a5fa; color: #f1f5f9; } /* ─── Auth pages ─────────────────────────────────────────────────────── */ [data-theme="dark"] .auth-container .start { background: linear-gradient(40.9deg, #0f172a 0%, #1e293b 99.02%); } [data-theme="dark"] .auth-container .end { background: #0f172a; color: #e2e8f0; } [data-theme="dark"] .auth-container .form-content .heading { border-bottom-color: #334155; color: #f1f5f9; } [data-theme="dark"] .auth-container .form-content .form-group .form-label { color: #94a3b8; } [data-theme="dark"] .auth-container .form-content .form-group .input-icon .form-control { background: #1e293b; border-color: #475569; color: #e2e8f0; } /* ─── Misc small surfaces ────────────────────────────────────────────── */ [data-theme="dark"] .card.col-card, [data-theme="dark"] .card.col-card-input { border-color: #475569; } [data-theme="dark"] .modal-content { background-color: #1e293b; color: #e2e8f0; border-color: #334155; } [data-theme="dark"] hr { border-color: #334155; }