/* ===================================================== THEME SYSTEM — CSS Custom Properties Change theme by setting data-theme on ===================================================== */ /* ===== Default: Blue ===== */ :root, [data-theme="blue"] { --theme-primary: #2563eb; --theme-primary-hover: #1d4ed8; --theme-primary-light: #eff6ff; --theme-primary-rgb: 37, 99, 235; --theme-gradient: linear-gradient(135deg, #2563eb, #7c3aed); --theme-sidebar-bg: linear-gradient(180deg, #1e293b 0%, #0f172a 100%); --theme-sidebar-text: rgba(255,255,255,0.7); --theme-sidebar-active: rgba(255,255,255,0.12); --theme-sidebar-brand: #fff; --theme-body-bg: #f8fafc; --theme-surface: #fff; --theme-border: #e2e8f0; --theme-text: #1e293b; --theme-text-muted: #64748b; --theme-topbar-bg: #f1f5f9; } /* ===== Indigo ===== */ [data-theme="indigo"] { --theme-primary: #6366f1; --theme-primary-hover: #4f46e5; --theme-primary-light: #eef2ff; --theme-primary-rgb: 99, 102, 241; --theme-gradient: linear-gradient(135deg, #6366f1, #a855f7); --theme-sidebar-bg: linear-gradient(180deg, #312e81 0%, #1e1b4b 100%); } /* ===== Emerald ===== */ [data-theme="emerald"] { --theme-primary: #059669; --theme-primary-hover: #047857; --theme-primary-light: #ecfdf5; --theme-primary-rgb: 5, 150, 105; --theme-gradient: linear-gradient(135deg, #059669, #0d9488); --theme-sidebar-bg: linear-gradient(180deg, #064e3b 0%, #022c22 100%); } /* ===== Rose ===== */ [data-theme="rose"] { --theme-primary: #e11d48; --theme-primary-hover: #be123c; --theme-primary-light: #fff1f2; --theme-primary-rgb: 225, 29, 72; --theme-gradient: linear-gradient(135deg, #e11d48, #f43f5e); --theme-sidebar-bg: linear-gradient(180deg, #4c0519 0%, #1a0208 100%); } /* ===== Amber ===== */ [data-theme="amber"] { --theme-primary: #d97706; --theme-primary-hover: #b45309; --theme-primary-light: #fffbeb; --theme-primary-rgb: 217, 119, 6; --theme-gradient: linear-gradient(135deg, #d97706, #ea580c); --theme-sidebar-bg: linear-gradient(180deg, #451a03 0%, #1c0a00 100%); } /* ===== Teal ===== */ [data-theme="teal"] { --theme-primary: #0d9488; --theme-primary-hover: #0f766e; --theme-primary-light: #f0fdfa; --theme-primary-rgb: 13, 148, 136; --theme-gradient: linear-gradient(135deg, #0d9488, #06b6d4); --theme-sidebar-bg: linear-gradient(180deg, #134e4a 0%, #042f2e 100%); } /* ===== Slate (Dark) ===== */ [data-theme="dark"] { --theme-primary: #60a5fa; --theme-primary-hover: #3b82f6; --theme-primary-light: rgba(96,165,250,0.1); --theme-primary-rgb: 96, 165, 250; --theme-gradient: linear-gradient(135deg, #3b82f6, #8b5cf6); --theme-sidebar-bg: linear-gradient(180deg, #111827 0%, #030712 100%); --theme-body-bg: #0f172a; --theme-surface: #1e293b; --theme-border: #334155; --theme-text: #e2e8f0; --theme-text-muted: #94a3b8; --theme-topbar-bg: #1e293b; --theme-sidebar-text: rgba(255,255,255,0.6); /* ---- Bootstrap-variable bridge ---------------------------------------- Bootstrap 5 uses its own CSS variable family (--bs-*) that's independent from our --theme-* tokens. Without this bridge, components like .card, .form-control, .table, .dropdown-menu, .modal, .list-group, .nav-link keep their default white surfaces in dark mode regardless of what our app.css overrides. Re-pointing Bootstrap's vars at our tokens flips an entire class of elements with no per-component CSS edits. */ color-scheme: dark; --bs-body-bg: var(--theme-body-bg); --bs-body-color: var(--theme-text); --bs-secondary-bg: var(--theme-surface); --bs-tertiary-bg: var(--theme-topbar-bg); --bs-secondary-color: var(--theme-text-muted); --bs-tertiary-color: var(--theme-text-muted); --bs-emphasis-color: var(--theme-text); --bs-border-color: var(--theme-border); --bs-border-color-translucent: rgba(255, 255, 255, 0.12); --bs-link-color: var(--theme-primary); --bs-link-hover-color: var(--theme-primary-hover); /* Cards + dropdown + modal + list-group */ --bs-card-bg: var(--theme-surface); --bs-card-color: var(--theme-text); --bs-card-border-color: var(--theme-border); --bs-card-cap-bg: var(--theme-topbar-bg); --bs-dropdown-bg: var(--theme-surface); --bs-dropdown-color: var(--theme-text); --bs-dropdown-border-color: var(--theme-border); --bs-dropdown-link-color: var(--theme-text); --bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.06); --bs-dropdown-link-hover-color: var(--theme-text); --bs-modal-bg: var(--theme-surface); --bs-modal-color: var(--theme-text); --bs-modal-border-color: var(--theme-border); --bs-list-group-bg: var(--theme-surface); --bs-list-group-color: var(--theme-text); --bs-list-group-border-color: var(--theme-border); /* Tables — alternating-row stripe also needs the dark variant. */ --bs-table-bg: var(--theme-surface); --bs-table-color: var(--theme-text); --bs-table-border-color: var(--theme-border); --bs-table-striped-bg: rgba(255, 255, 255, 0.03); --bs-table-hover-bg: rgba(255, 255, 255, 0.06); /* Forms — Bootstrap reads --bs-form-control-* but most rules also fall back to body-bg / border-color, both already mapped above. Pinning the muted form-text + placeholder explicitly avoids dim-on-dim contrast. */ --bs-form-control-bg: var(--theme-surface); --bs-form-control-color: var(--theme-text); --bs-form-control-disabled-bg: var(--theme-topbar-bg); /* Alerts — light variants are unreadable on dark; nudge toward translucent overlays of the original tints. */ --bs-light-bg-subtle: var(--theme-surface); --bs-light-border-subtle: var(--theme-border); } /* Loose elements that still hardcode white via inline-style or page CSS. */ [data-theme="dark"] .bg-white { background-color: var(--theme-surface) !important; color: var(--theme-text); } [data-theme="dark"] .bg-light, [data-theme="dark"] .bg-body-tertiary { background-color: var(--theme-topbar-bg) !important; } [data-theme="dark"] .text-muted, [data-theme="dark"] .text-secondary { color: var(--theme-text-muted) !important; } /* Native form controls that don't pick up Bootstrap variables (date pickers, number steppers, file inputs) keep a forced colour-scheme so they render their own dark variants. */ [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select { color-scheme: dark; } /* Belt-and-suspenders overrides — guarantees dark mode lands on Identity scaffolded pages (Login, Register, RegisterConfirmation, Manage/*) and anywhere else where Bootstrap component CSS doesn't reliably honour the --bs-* variable map. Direct background-color overrides win over any cascade fight, including legacy stylesheets that hardcode #fff. */ [data-theme="dark"] .card, [data-theme="dark"] .modal-content, [data-theme="dark"] .list-group, [data-theme="dark"] .list-group-item, [data-theme="dark"] .toast, [data-theme="dark"] .offcanvas { background-color: var(--theme-surface); color: var(--theme-text); border-color: var(--theme-border); } [data-theme="dark"] .card-header, [data-theme="dark"] .card-footer, [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { background-color: var(--theme-topbar-bg); color: var(--theme-text); border-color: var(--theme-border); } [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: var(--theme-topbar-bg); color: var(--theme-text); border-color: var(--theme-border); } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background-color: var(--theme-topbar-bg); color: var(--theme-text); border-color: var(--theme-primary); } [data-theme="dark"] .form-control::placeholder { color: var(--theme-text-muted); opacity: 0.7; } [data-theme="dark"] .form-floating > label { color: var(--theme-text-muted); } [data-theme="dark"] .form-check-input { background-color: var(--theme-topbar-bg); border-color: var(--theme-border); } [data-theme="dark"] .form-check-input:checked { background-color: var(--theme-primary); border-color: var(--theme-primary); } /* Alerts — Bootstrap's tinted alert variants stay roughly the same hue but need a much darker ground to read against the slate page. */ [data-theme="dark"] .alert { background-color: rgba(255, 255, 255, 0.04); color: var(--theme-text); border-color: var(--theme-border); } [data-theme="dark"] .alert-success { color: #6ee7b7; border-color: rgba(110, 231, 183, 0.3); } [data-theme="dark"] .alert-info { color: #93c5fd; border-color: rgba(147, 197, 253, 0.3); } [data-theme="dark"] .alert-warning { color: #fcd34d; border-color: rgba(252, 211, 77, 0.3); } [data-theme="dark"] .alert-danger { color: #fca5a5; border-color: rgba(252, 165, 165, 0.3); } /* code blocks: Bootstrap's defaults to a pink tint on light bg. In dark mode, pin to slate surface + brighter pink. */ [data-theme="dark"] code { color: #f472b6; background-color: rgba(255, 255, 255, 0.05); } /* Borders on hr / dividers / subtle utilities. */ [data-theme="dark"] hr, [data-theme="dark"] .border, [data-theme="dark"] .border-top, [data-theme="dark"] .border-bottom, [data-theme="dark"] .border-start, [data-theme="dark"] .border-end { border-color: var(--theme-border) !important; } /* Directory card surfaces (/users + /directory listings). provider.css hardcodes the light-mode colours; this block flips every surface to theme tokens in dark mode so the cards read as slate panels rather than glaring white blocks. */ [data-theme="dark"] .directory-card { background: var(--theme-surface); border-color: var(--theme-border); color: var(--theme-text); } [data-theme="dark"] .directory-card:hover { border-color: var(--theme-primary); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .directory-card__avatar { background: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .directory-card__avatar i { color: var(--theme-text-muted); } [data-theme="dark"] .directory-card__title { color: var(--theme-text); } [data-theme="dark"] .directory-card__meta { color: var(--theme-text-muted); } /* Kind badges — translucent tints of the original hues. */ [data-theme="dark"] .directory-card__kind { background: rgba(96, 165, 250, 0.18); color: #93c5fd; } [data-theme="dark"] .directory-card__kind--teacher { background: rgba(16, 185, 129, 0.18); color: #6ee7b7; } [data-theme="dark"] .directory-card__kind--translator { background: rgba(6, 182, 212, 0.18); color: #67e8f9; } /* Language chips — neutral "Speaks" + emerald-tinted "Learning". */ [data-theme="dark"] .directory-card__lang { background: rgba(255, 255, 255, 0.08); color: var(--theme-text); } [data-theme="dark"] .directory-card__lang--learning { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; } /* Filter sidebar card on /users + /directory. */ [data-theme="dark"] .directory-filter .card { background: var(--theme-surface); border-color: var(--theme-border); }