/** * /assets/dashboard-theme.css — Shared theme variables for all dashboard-style * pages (billing, support, security, api-tokens, upgrade, dashboard). * * Each page gets the same set of CSS custom properties (--primary, --card, * --text, etc.) and switches values based on the data-ui-theme attribute * applied to and . The attribute is set by the inline bootstrap * script in /includes/theme-bootstrap.php (which reads localStorage with a * fallback to aurora-light). * * Pages that already have their own CSS using these variable names will * automatically respect the user's theme choice with zero further changes. */ /* Default = Aurora (dark) */ :root { --primary: #00D4AA; --secondary: #9B5DE5; --dark: #0a0a0f; --card: #12121a; --hover: #1e1e2a; --border: rgba(255, 255, 255, 0.08); --text: #ffffff; --muted: rgba(255, 255, 255, 0.5); --gradient: linear-gradient(135deg, #00D4AA, #00B4D8, #9B5DE5); --danger: #FF4757; } /* Aurora Light — bright, neutral, daytime-friendly. */ :root[data-ui-theme="aurora-light"], body[data-ui-theme="aurora-light"] { --dark: #f7f8fb; --card: #ffffff; --hover: #eef0f6; --border: rgba(0, 0, 0, 0.08); --text: #0f172a; --muted: rgba(15, 23, 42, 0.55); --primary: #00B894; --secondary: #7C3AED; --gradient: linear-gradient(135deg, #00B894, #0EA5E9, #7C3AED); --danger: #EF4444; color-scheme: light; } body[data-ui-theme="aurora-light"] img.lp-invert-on-light { filter: invert(0.85); } /* Mono — minimal monochrome, warm grays, no brand color overlays. */ :root[data-ui-theme="mono"], body[data-ui-theme="mono"] { --dark: #fafafa; --card: #ffffff; --hover: #f0f0f0; --border: rgba(0, 0, 0, 0.1); --text: #1a1a1a; --muted: rgba(0, 0, 0, 0.55); --primary: #1a1a1a; --secondary: #404040; --gradient: linear-gradient(135deg, #1a1a1a, #404040, #737373); --danger: #DC2626; color-scheme: light; } body[data-ui-theme="mono"] img.lp-invert-on-light { filter: invert(0.85); } /* Apply the chosen theme's background + foreground to . Any page * that includes this file gets the right look automatically. */ body[data-ui-theme="aurora-light"], body[data-ui-theme="mono"] { background: var(--dark); color: var(--text); } /* Common patterns across pages — translucent whites that disappear on light * themes. These rules map them to dark-on-light equivalents. Match the * dashboard's behavior so external pages feel cohesive. */ body[data-ui-theme="aurora-light"] .pill-free, body[data-ui-theme="mono"] .pill-free { background: rgba(0, 0, 0, 0.05); color: var(--muted); } body[data-ui-theme="aurora-light"] .social-chip, body[data-ui-theme="mono"] .social-chip { background: rgba(0, 0, 0, 0.06); } body[data-ui-theme="aurora-light"] .toast, body[data-ui-theme="mono"] .toast { background: #1a1a1a; color: #fff; border-color: #000; } body[data-ui-theme="aurora-light"] .modal-overlay, body[data-ui-theme="mono"] .modal-overlay { background: rgba(0, 0, 0, 0.4); }