/* ─── THEMES ───────────────────────────────────────────────── Applied via data-theme attribute on Default (no attribute) = Midnight (the original dark amber theme) ──────────────────────────────────────────────────────────── */ /* ── MIDNIGHT (default — original) ── */ [data-theme="midnight"] { --bg: #0e1117; --bg2: #161b25; --bg3: #1e2535; --border: #2a3349; --amber: #f5a623; --amber-dim: #b37918; --amber-glow: #f5a62322; --green: #3ddc84; --green-dim: #2aa860; --red: #ff5c5c; --blue: #5b8dee; --purple: #a78bfa; --text: #e8eaf0; --text-muted: #6b7a99; --text-dim: #3d4d6a; } /* ── SLATE — cool dark blue-grey with cyan accent ── */ [data-theme="slate"] { --bg: #0d1117; --bg2: #161c24; --bg3: #1c2433; --border: #273040; --amber: #38bdf8; --amber-dim: #0ea5e9; --amber-glow: #38bdf822; --green: #34d399; --green-dim: #10b981; --red: #f87171; --blue: #818cf8; --purple: #c084fc; --text: #e2e8f0; --text-muted: #64748b; --text-dim: #334155; } /* ── FOREST — dark green terminal vibes ── */ [data-theme="forest"] { --bg: #0a0f0a; --bg2: #111811; --bg3: #182018; --border: #1f3020; --amber: #4ade80; --amber-dim: #22c55e; --amber-glow: #4ade8022; --green: #a3e635; --green-dim: #84cc16; --red: #f87171; --blue: #67e8f9; --purple: #e879f9; --text: #dcfce7; --text-muted: #4b7a52; --text-dim: #2a4a2e; } /* ── ROSE — dark with pink/rose accent ── */ [data-theme="rose"] { --bg: #110d0f; --bg2: #1a1215; --bg3: #221820; --border: #3a2030; --amber: #fb7185; --amber-dim: #e11d48; --amber-glow: #fb718522; --green: #34d399; --green-dim: #10b981; --red: #f97316; --blue: #a78bfa; --purple: #e879f9; --text: #fce7f3; --text-muted: #9d6b7a; --text-dim: #5c3040; } /* ── LIGHT — clean light mode ── */ [data-theme="light"] { --bg: #f8f9fc; --bg2: #ffffff; --bg3: #f1f3f8; --border: #dde1ee; --amber: #d97706; --amber-dim: #b45309; --amber-glow: #d9770622; --green: #059669; --green-dim: #047857; --red: #dc2626; --blue: #2563eb; --purple: #7c3aed; --text: #1e2535; --text-muted: #6b7a99; --text-dim: #a0aec0; } /* Light mode specifics — invert a few hardcoded dark colours */ [data-theme="light"] header { background: #ffffff; border-bottom-color: var(--border); } [data-theme="light"] .card { background: #ffffff; } [data-theme="light"] .form-card { background: #ffffff; } [data-theme="light"] .boss-card { background: #ffffff; } [data-theme="light"] .modal { background: #ffffff; } [data-theme="light"] .chart-card { background: #ffffff; } [data-theme="light"] .boss-row { background: #ffffff; } [data-theme="light"] .user-card { background: #ffffff; } [data-theme="light"] .entry-card { background: #ffffff; } [data-theme="light"] .toast { background: #ffffff; } [data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea { background: var(--bg3); color: var(--text); } [data-theme="light"] .badge-active { background: #dcfce7; } [data-theme="light"] .badge-inactive { background: #f1f3f8; } [data-theme="light"] tbody tr:hover { background: var(--bg3); } /* ─── THEME PICKER WIDGET ─────────────────────────────────── */ .theme-picker { position: relative; } .theme-btn { font-family: var(--mono); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); background: transparent; border: 1px solid var(--border); padding: 7px 12px; border-radius: 5px; cursor: pointer; transition: all .15s; display: flex; align-items: center; gap: 6px; } .theme-btn:hover { border-color: var(--amber-dim); color: var(--amber); } .theme-dropdown { position: absolute; top: calc(100% + 8px); right: 0; background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 6px; display: none; flex-direction: column; gap: 2px; z-index: 200; min-width: 160px; box-shadow: 0 8px 24px rgba(0,0,0,.4); } .theme-dropdown.open { display: flex; } .theme-option { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 5px; cursor: pointer; font-family: var(--mono); font-size: 12px; color: var(--text-muted); border: none; background: transparent; width: 100%; text-align: left; transition: background .12s, color .12s; } .theme-option:hover { background: var(--bg3); color: var(--text); } .theme-option.active { color: var(--amber); } .theme-option.active::after { content: '✓'; margin-left: auto; color: var(--amber); font-size: 11px; } .theme-swatch { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(255,255,255,.1); }