/** * CloviTek Universal Platform Theme System * Usage: Add or "light" * Toggle: document.documentElement.setAttribute('data-theme', newTheme) * Persist: localStorage.setItem('clovi-theme', newTheme) * * Override per-platform brand color: * :root { --brand: #YOUR_COLOR; --brand-light: #LIGHTER; --brand-dark: #DARKER; } */ /* ── Default (Dark) ────────────────────────────────────────────────── */ :root { /* Brand — override per platform */ --brand: #0D9488; --brand-light: #14B8A6; --brand-dark: #0a7a70; --on-brand: #ffffff; /* Dark theme surfaces */ --bg: #0a0f1e; --bg-alt: #0f172a; --surface: #1e293b; --surface-2: #1e2a3b; --border: rgba(255,255,255,0.08); --border-strong:rgba(255,255,255,0.15); /* Dark theme text */ --text: #f1f5f9; --text-muted: #94a3b8; --text-subtle: #64748b; --text-inv: #0f172a; /* Inputs (dark) */ --input-bg: #1e293b; --input-border: rgba(255,255,255,0.12); --input-text: #f1f5f9; --input-placeholder: #64748b; /* Buttons */ --btn-primary-bg: var(--brand); --btn-primary-text: var(--on-brand); --btn-ghost-bg: transparent; --btn-ghost-border: var(--border-strong); --btn-ghost-text: var(--text); /* Status */ --success: #34d399; --warning: #fbbf24; --error: #f87171; --info: #60a5fa; --radius: 14px; --radius-sm: 8px; --radius-full: 100px; } /* ── Light Theme Override ───────────────────────────────────────────── */ [data-theme="light"] { --bg: #ffffff; --bg-alt: #f8fafc; --surface: #ffffff; --surface-2: #f1f5f9; --border: #e2e8f0; --border-strong:#cbd5e1; --text: #0f172a; --text-muted: #475569; --text-subtle: #94a3b8; --text-inv: #ffffff; --input-bg: #ffffff; --input-border: #e2e8f0; --input-text: #0f172a; --input-placeholder: #94a3b8; --btn-ghost-border: #e2e8f0; --btn-ghost-text: #0f172a; } /* ── System auto (respects OS) ─────────────────────────────────────── */ @media (prefers-color-scheme: light) { html:not([data-theme="dark"]) { --bg: #ffffff; --bg-alt: #f8fafc; --surface: #ffffff; --surface-2: #f1f5f9; --border: #e2e8f0; --border-strong: #cbd5e1; --text: #0f172a; --text-muted: #475569; --text-subtle: #94a3b8; --input-bg: #ffffff; --input-border: #e2e8f0; --input-text: #0f172a; } } /* ── Logo switching ─────────────────────────────────────────────────── */ .logo-for-dark { display: block; } .logo-for-light { display: none; } [data-theme="light"] .logo-for-dark { display: none; } [data-theme="light"] .logo-for-light { display: block; } /* ── Theme toggle button ────────────────────────────────────────────── */ .clovi-theme-toggle { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-full); cursor: pointer; padding: 6px 12px; color: var(--text-muted); font-size: .8rem; display: inline-flex; align-items: center; gap: 6px; transition: background .15s, color .15s; } .clovi-theme-toggle:hover { background: var(--surface-2); color: var(--text); } .clovi-theme-toggle .icon-dark { display: none; } .clovi-theme-toggle .icon-light { display: inline; } [data-theme="light"] .clovi-theme-toggle .icon-dark { display: inline; } [data-theme="light"] .clovi-theme-toggle .icon-light { display: none; }