/* ============================================================ Themes — user-selectable visual styles Applied by adding .theme-dark | .theme-light | .theme-vibrant to . The default (no class) keeps the original dark look. Overrides CSS custom properties from dashboard.css so the entire site reskins without touching individual components. ============================================================ */ /* ---------- LIGHT (Neutral Professional, Stripe/Linear vibe) ---------- */ body.theme-light { --bg: #f6f7f9; --bg-soft: #ffffff; --panel: #ffffff; --panel-2: #fafbfc; --panel-3: #f1f3f6; --line: #e4e7eb; --line-strong: #cdd2d8; --text: #0f172a; --muted: #64748b; --blue: #2563eb; --blue-2: #3b82f6; --steel: #475569; --gold: #b45309; --green: #047857; --amber: #b45309; --red: #b91c1c; --shadow: 0 12px 32px rgba(15, 23, 42, 0.10); --shadow-soft: 0 4px 12px rgba(15, 23, 42, 0.06); background: radial-gradient(circle at 12% 0%, rgba(37, 99, 235, 0.04), transparent 30%), radial-gradient(circle at 88% 0%, rgba(37, 99, 235, 0.02), transparent 30%), #f6f7f9; } body.theme-light h1, body.theme-light h2, body.theme-light h3, body.theme-light h4, body.theme-light h5, body.theme-light h6 { color: #0f172a; } body.theme-light ::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.18); } /* ---------- VIBRANT (Bold Modern, violet/pink accents) ---------- */ body.theme-vibrant { --bg: #ffffff; --bg-soft: #fafafa; --panel: #ffffff; --panel-2: #fafafa; --panel-3: #f4f4f5; --line: #e5e7eb; --line-strong: #d4d4d8; --text: #18181b; --muted: #71717a; --blue: #7c3aed; --blue-2: #a855f7; --steel: #6d28d9; --gold: #d97706; --green: #059669; --amber: #d97706; --red: #dc2626; --shadow: 0 16px 40px -8px rgba(124, 58, 237, 0.20); --shadow-soft: 0 8px 20px -4px rgba(124, 58, 237, 0.10); background: radial-gradient(circle at 10% 0%, rgba(236, 72, 153, 0.06), transparent 28%), radial-gradient(circle at 90% 0%, rgba(124, 58, 237, 0.06), transparent 28%), #ffffff; } body.theme-vibrant h1, body.theme-vibrant h2, body.theme-vibrant h3, body.theme-vibrant h4, body.theme-vibrant h5, body.theme-vibrant h6 { color: #18181b; } body.theme-vibrant ::-webkit-scrollbar-thumb { background: rgba(124, 58, 237, 0.30); } /* ---------- DARK (current navy/blue — explicit class for symmetry) ---------- */ body.theme-dark { /* Uses the dashboard.css :root defaults. Nothing to override. */ } /* ============================================================ Theme picker UI (sits in the top-left area of the sidebar) ============================================================ */ .theme-picker { display: flex; gap: 6px; padding: 12px 14px 0; align-items: center; } .theme-picker-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-right: 4px; } .theme-swatch { width: 26px; height: 26px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; padding: 0; position: relative; transition: transform 0.12s, border-color 0.12s; outline: none; } .theme-swatch:hover { transform: translateY(-1px); } .theme-swatch.is-active { border-color: var(--text); box-shadow: 0 0 0 2px var(--panel); } .theme-swatch-dark { background: linear-gradient(135deg, #050b16, #67b4ff); } .theme-swatch-light { background: linear-gradient(135deg, #ffffff, #2563eb); border: 2px solid #cdd2d8; } .theme-swatch-vibrant { background: linear-gradient(135deg, #7c3aed, #ec4899, #f59e0b); } .theme-swatch.is-active::after { content: ""; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--text); }