/* * AiDevStudio — UI Theme Skins * ============================================================ * Applied via [data-theme] attribute on . * Loaded after app.css — same-specificity selectors cascade correctly. * "default" theme needs no overrides (app.css handles it). * Each dark skin also sets color-scheme so browser chrome matches. * ============================================================ */ /* ── NEON NOIR ───────────────────────────────────────────────────────────── Cyberpunk: electric cyan on near-black, purple accents */ [data-theme="neon-noir"] { color-scheme: dark; /* Core palette */ --bs-body-bg: #050508; --bs-body-color: #dde6f0; --bs-secondary-color: #7888a4; --bs-tertiary-color: #4a5568; --bs-emphasis-color: #f0f4ff; /* Primary accent */ --bs-primary: #00e5ff; --bs-primary-rgb: 0, 229, 255; --bs-link-color: #00e5ff; --bs-link-hover-color: #60f0ff; /* Cards */ --bs-card-bg: #0c0c14; --bs-card-cap-bg: #12121e; --bs-card-border-color: rgba(0, 229, 255, 0.1); /* Borders */ --bs-border-color: rgba(0, 229, 255, 0.1); --bs-border-color-translucent: rgba(0, 229, 255, 0.07); /* Inputs */ --bs-input-bg: #131320; --bs-input-border-color: rgba(0, 229, 255, 0.2); --bs-input-focus-border-color: #00e5ff; --bs-input-focus-box-shadow: 0 0 0 0.2rem rgba(0, 229, 255, 0.18); /* Modals / dropdowns */ --bs-modal-bg: #0c0c14; --bs-modal-border-color: rgba(0, 229, 255, 0.1); --bs-dropdown-bg: #12121e; --bs-dropdown-border-color: rgba(0, 229, 255, 0.1); --bs-dropdown-link-color: #dde6f0; --bs-dropdown-link-hover-bg: rgba(0, 229, 255, 0.07); --bs-list-group-bg: #0c0c14; --bs-list-group-border-color: rgba(0, 229, 255, 0.1); --bs-popover-bg: #12121e; --bs-popover-border-color: rgba(0, 229, 255, 0.18); --bs-tooltip-bg: #1a1a30; /* Tables */ --bs-table-striped-bg: rgba(0, 229, 255, 0.025); --bs-table-hover-bg: rgba(0, 229, 255, 0.04); /* Code */ --bs-code-color: #bf7fff; /* App vars */ --ads-sidebar-bg: #040410; --ads-topbar-bg: rgba(5, 5, 8, 0.9); --ads-border: rgba(0, 229, 255, 0.1); /* Theme primary helpers */ --ads-primary: #00e5ff; --ads-primary-hover: #00c4da; --ads-focus-shadow: rgba(0, 229, 255, 0.28); } /* ── AURORA ──────────────────────────────────────────────────────────────── Northern lights: violet on deep space navy, mint-green code accents */ [data-theme="aurora"] { color-scheme: dark; --bs-body-bg: #060818; --bs-body-color: #dce8f5; --bs-secondary-color: #7a9ac0; --bs-tertiary-color: #4a6280; --bs-emphasis-color: #eef3ff; --bs-primary: #8b5cf6; --bs-primary-rgb: 139, 92, 246; --bs-link-color: #a78bfa; --bs-link-hover-color: #c4b5fd; --bs-card-bg: #0d1228; --bs-card-cap-bg: #111a35; --bs-card-border-color: rgba(139, 92, 246, 0.12); --bs-border-color: rgba(139, 92, 246, 0.12); --bs-border-color-translucent: rgba(139, 92, 246, 0.08); --bs-input-bg: #111d38; --bs-input-border-color: rgba(139, 92, 246, 0.25); --bs-input-focus-border-color: #8b5cf6; --bs-input-focus-box-shadow: 0 0 0 0.2rem rgba(139, 92, 246, 0.2); --bs-modal-bg: #0d1228; --bs-modal-border-color: rgba(139, 92, 246, 0.12); --bs-dropdown-bg: #111a35; --bs-dropdown-border-color: rgba(139, 92, 246, 0.12); --bs-dropdown-link-color: #dce8f5; --bs-dropdown-link-hover-bg: rgba(139, 92, 246, 0.08); --bs-list-group-bg: #0d1228; --bs-list-group-border-color: rgba(139, 92, 246, 0.12); --bs-popover-bg: #111a35; --bs-popover-border-color: rgba(139, 92, 246, 0.2); --bs-tooltip-bg: #1a2540; --bs-table-striped-bg: rgba(139, 92, 246, 0.03); --bs-table-hover-bg: rgba(139, 92, 246, 0.05); --bs-code-color: #34d399; --ads-sidebar-bg: #040810; --ads-topbar-bg: rgba(6, 8, 24, 0.9); --ads-border: rgba(139, 92, 246, 0.12); --ads-primary: #8b5cf6; --ads-primary-hover: #7c3aed; --ads-focus-shadow: rgba(139, 92, 246, 0.28); } /* ── SYNTHWAVE ───────────────────────────────────────────────────────────── Retro 80s: hot-pink on deep purple, neon-yellow code */ [data-theme="synthwave"] { color-scheme: dark; --bs-body-bg: #0c0018; --bs-body-color: #f0e0ff; --bs-secondary-color: #c098e0; --bs-tertiary-color: #8060a0; --bs-emphasis-color: #fff0ff; --bs-primary: #ff2d78; --bs-primary-rgb: 255, 45, 120; --bs-link-color: #ff2d78; --bs-link-hover-color: #ff6fa4; --bs-card-bg: #160022; --bs-card-cap-bg: #1e0030; --bs-card-border-color: rgba(255, 45, 120, 0.18); --bs-border-color: rgba(255, 45, 120, 0.18); --bs-border-color-translucent: rgba(255, 45, 120, 0.1); --bs-input-bg: #1d0030; --bs-input-border-color: rgba(255, 45, 120, 0.3); --bs-input-focus-border-color: #ff2d78; --bs-input-focus-box-shadow: 0 0 0 0.2rem rgba(255, 45, 120, 0.22); --bs-modal-bg: #160022; --bs-modal-border-color: rgba(255, 45, 120, 0.18); --bs-dropdown-bg: #1e0030; --bs-dropdown-border-color: rgba(255, 45, 120, 0.18); --bs-dropdown-link-color: #f0e0ff; --bs-dropdown-link-hover-bg: rgba(255, 45, 120, 0.1); --bs-list-group-bg: #160022; --bs-list-group-border-color: rgba(255, 45, 120, 0.18); --bs-popover-bg: #1e0030; --bs-popover-border-color: rgba(255, 45, 120, 0.25); --bs-tooltip-bg: #2a0040; --bs-table-striped-bg: rgba(255, 45, 120, 0.04); --bs-table-hover-bg: rgba(255, 45, 120, 0.06); --bs-code-color: #f9e900; --ads-sidebar-bg: #080014; --ads-topbar-bg: rgba(12, 0, 24, 0.9); --ads-border: rgba(255, 45, 120, 0.18); --ads-primary: #ff2d78; --ads-primary-hover: #e0155e; --ads-focus-shadow: rgba(255, 45, 120, 0.28); } /* ── OBSIDIAN ────────────────────────────────────────────────────────────── Warm amber on rich charcoal — earthy, golden, luxe */ [data-theme="obsidian"] { color-scheme: dark; --bs-body-bg: #151210; --bs-body-color: #f5f0e8; --bs-secondary-color: #b8a890; --bs-tertiary-color: #7a6a55; --bs-emphasis-color: #fff8f0; --bs-primary: #f59e0b; --bs-primary-rgb: 245, 158, 11; --bs-link-color: #fbbf24; --bs-link-hover-color: #fcd34d; --bs-card-bg: #221a14; --bs-card-cap-bg: #2c2018; --bs-card-border-color: rgba(245, 158, 11, 0.14); --bs-border-color: rgba(245, 158, 11, 0.14); --bs-border-color-translucent: rgba(245, 158, 11, 0.09); --bs-input-bg: #2c2018; --bs-input-border-color: rgba(245, 158, 11, 0.25); --bs-input-focus-border-color: #f59e0b; --bs-input-focus-box-shadow: 0 0 0 0.2rem rgba(245, 158, 11, 0.2); --bs-modal-bg: #221a14; --bs-modal-border-color: rgba(245, 158, 11, 0.14); --bs-dropdown-bg: #2c2018; --bs-dropdown-border-color: rgba(245, 158, 11, 0.14); --bs-dropdown-link-color: #f5f0e8; --bs-dropdown-link-hover-bg: rgba(245, 158, 11, 0.09); --bs-list-group-bg: #221a14; --bs-list-group-border-color: rgba(245, 158, 11, 0.14); --bs-popover-bg: #2c2018; --bs-popover-border-color: rgba(245, 158, 11, 0.2); --bs-tooltip-bg: #3c2c1a; --bs-table-striped-bg: rgba(245, 158, 11, 0.03); --bs-table-hover-bg: rgba(245, 158, 11, 0.05); --bs-code-color: #fb923c; --ads-sidebar-bg: #100e0c; --ads-topbar-bg: rgba(21, 18, 16, 0.9); --ads-border: rgba(245, 158, 11, 0.14); --ads-primary: #f59e0b; --ads-primary-hover: #d97706; --ads-focus-shadow: rgba(245, 158, 11, 0.28); } /* ── OCEAN DEEP ──────────────────────────────────────────────────────────── Aqua cyan on deep teal-black — cool, deep, immersive */ [data-theme="ocean"] { color-scheme: dark; --bs-body-bg: #030f14; --bs-body-color: #dff2f7; --bs-secondary-color: #6aaaba; --bs-tertiary-color: #3a6878; --bs-emphasis-color: #eefbff; --bs-primary: #06b6d4; --bs-primary-rgb: 6, 182, 212; --bs-link-color: #22d3ee; --bs-link-hover-color: #67e8f9; --bs-card-bg: #071a24; --bs-card-cap-bg: #0c2535; --bs-card-border-color: rgba(6, 182, 212, 0.14); --bs-border-color: rgba(6, 182, 212, 0.14); --bs-border-color-translucent: rgba(6, 182, 212, 0.09); --bs-input-bg: #0c2535; --bs-input-border-color: rgba(6, 182, 212, 0.25); --bs-input-focus-border-color: #06b6d4; --bs-input-focus-box-shadow: 0 0 0 0.2rem rgba(6, 182, 212, 0.2); --bs-modal-bg: #071a24; --bs-modal-border-color: rgba(6, 182, 212, 0.14); --bs-dropdown-bg: #0c2535; --bs-dropdown-border-color: rgba(6, 182, 212, 0.14); --bs-dropdown-link-color: #dff2f7; --bs-dropdown-link-hover-bg: rgba(6, 182, 212, 0.09); --bs-list-group-bg: #071a24; --bs-list-group-border-color: rgba(6, 182, 212, 0.14); --bs-popover-bg: #0c2535; --bs-popover-border-color: rgba(6, 182, 212, 0.2); --bs-tooltip-bg: #0f2e40; --bs-table-striped-bg: rgba(6, 182, 212, 0.03); --bs-table-hover-bg: rgba(6, 182, 212, 0.05); --bs-code-color: #22d3ee; --ads-sidebar-bg: #02090f; --ads-topbar-bg: rgba(3, 15, 20, 0.9); --ads-border: rgba(6, 182, 212, 0.14); --ads-primary: #06b6d4; --ads-primary-hover: #0891b2; --ads-focus-shadow: rgba(6, 182, 212, 0.28); } /* ── ROSE GOLD ───────────────────────────────────────────────────────────── Vivid rose on dark maroon-black, gold code accents */ [data-theme="rose-gold"] { color-scheme: dark; --bs-body-bg: #120a10; --bs-body-color: #fce7f0; --bs-secondary-color: #c080a0; --bs-tertiary-color: #804060; --bs-emphasis-color: #fff0f6; --bs-primary: #f43f5e; --bs-primary-rgb: 244, 63, 94; --bs-link-color: #fb7185; --bs-link-hover-color: #fda4b0; --bs-card-bg: #1e0f18; --bs-card-cap-bg: #271420; --bs-card-border-color: rgba(244, 63, 94, 0.15); --bs-border-color: rgba(244, 63, 94, 0.15); --bs-border-color-translucent: rgba(244, 63, 94, 0.09); --bs-input-bg: #261420; --bs-input-border-color: rgba(244, 63, 94, 0.25); --bs-input-focus-border-color: #f43f5e; --bs-input-focus-box-shadow: 0 0 0 0.2rem rgba(244, 63, 94, 0.22); --bs-modal-bg: #1e0f18; --bs-modal-border-color: rgba(244, 63, 94, 0.15); --bs-dropdown-bg: #271420; --bs-dropdown-border-color: rgba(244, 63, 94, 0.15); --bs-dropdown-link-color: #fce7f0; --bs-dropdown-link-hover-bg: rgba(244, 63, 94, 0.09); --bs-list-group-bg: #1e0f18; --bs-list-group-border-color: rgba(244, 63, 94, 0.15); --bs-popover-bg: #271420; --bs-popover-border-color: rgba(244, 63, 94, 0.22); --bs-tooltip-bg: #351830; --bs-table-striped-bg: rgba(244, 63, 94, 0.04); --bs-table-hover-bg: rgba(244, 63, 94, 0.06); --bs-code-color: #fbbf24; --ads-sidebar-bg: #0e0810; --ads-topbar-bg: rgba(18, 10, 16, 0.9); --ads-border: rgba(244, 63, 94, 0.15); --ads-primary: #f43f5e; --ads-primary-hover: #e11d48; --ads-focus-shadow: rgba(244, 63, 94, 0.28); } /* ── MIDNIGHT ────────────────────────────────────────────────────────────── Professional royal blue on deep navy — clean, corporate, trusted */ [data-theme="midnight"] { color-scheme: dark; --bs-body-bg: #08101c; --bs-body-color: #e2ecf7; --bs-secondary-color: #7899bc; --bs-tertiary-color: #4a6480; --bs-emphasis-color: #eef4ff; --bs-primary: #3b82f6; --bs-primary-rgb: 59, 130, 246; --bs-link-color: #60a5fa; --bs-link-hover-color: #93c5fd; --bs-card-bg: #0f1a2c; --bs-card-cap-bg: #142238; --bs-card-border-color: rgba(59, 130, 246, 0.14); --bs-border-color: rgba(59, 130, 246, 0.14); --bs-border-color-translucent: rgba(59, 130, 246, 0.09); --bs-input-bg: #142238; --bs-input-border-color: rgba(59, 130, 246, 0.25); --bs-input-focus-border-color: #3b82f6; --bs-input-focus-box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.2); --bs-modal-bg: #0f1a2c; --bs-modal-border-color: rgba(59, 130, 246, 0.14); --bs-dropdown-bg: #142238; --bs-dropdown-border-color: rgba(59, 130, 246, 0.14); --bs-dropdown-link-color: #e2ecf7; --bs-dropdown-link-hover-bg: rgba(59, 130, 246, 0.09); --bs-list-group-bg: #0f1a2c; --bs-list-group-border-color: rgba(59, 130, 246, 0.14); --bs-popover-bg: #142238; --bs-popover-border-color: rgba(59, 130, 246, 0.2); --bs-tooltip-bg: #1a2c48; --bs-table-striped-bg: rgba(59, 130, 246, 0.03); --bs-table-hover-bg: rgba(59, 130, 246, 0.05); --bs-code-color: #60a5fa; --ads-sidebar-bg: #050c16; --ads-topbar-bg: rgba(8, 16, 28, 0.9); --ads-border: rgba(59, 130, 246, 0.14); --ads-primary: #3b82f6; --ads-primary-hover: #2563eb; --ads-focus-shadow: rgba(59, 130, 246, 0.28); } /* ── CARBON ──────────────────────────────────────────────────────────────── Ultra-minimal contemporary dark: near-black, slate grays, soft violet. Inspired by Linear, Vercel, Cursor IDE — the premium 2025 SaaS aesthetic. */ [data-theme="carbon"] { color-scheme: dark; --bs-body-bg: #09090b; --bs-body-color: #ededed; --bs-secondary-color: #a1a1aa; --bs-tertiary-color: #71717a; --bs-emphasis-color: #fafafa; --bs-primary: #7c3aed; --bs-primary-rgb: 124, 58, 237; --bs-link-color: #a78bfa; --bs-link-hover-color: #c4b5fd; --bs-card-bg: #111113; --bs-card-cap-bg: #18181b; --bs-card-border-color: rgba(255, 255, 255, 0.06); --bs-border-color: rgba(255, 255, 255, 0.07); --bs-border-color-translucent: rgba(255, 255, 255, 0.04); --bs-input-bg: #18181b; --bs-input-border-color: rgba(255, 255, 255, 0.1); --bs-input-focus-border-color: #7c3aed; --bs-input-focus-box-shadow: 0 0 0 0.2rem rgba(124, 58, 237, 0.2); --bs-modal-bg: #111113; --bs-modal-border-color: rgba(255, 255, 255, 0.07); --bs-dropdown-bg: #18181b; --bs-dropdown-border-color: rgba(255, 255, 255, 0.07); --bs-dropdown-link-color: #ededed; --bs-dropdown-link-hover-bg: rgba(124, 58, 237, 0.1); --bs-list-group-bg: #111113; --bs-list-group-border-color: rgba(255, 255, 255, 0.06); --bs-popover-bg: #18181b; --bs-popover-border-color: rgba(124, 58, 237, 0.2); --bs-tooltip-bg: #27272a; --bs-table-striped-bg: rgba(255, 255, 255, 0.02); --bs-table-hover-bg: rgba(124, 58, 237, 0.06); --bs-code-color: #c084fc; --ads-sidebar-bg: #050507; --ads-topbar-bg: rgba(9, 9, 11, 0.92); --ads-border: rgba(255, 255, 255, 0.07); --ads-primary: #7c3aed; --ads-primary-hover: #6d28d9; --ads-focus-shadow: rgba(124, 58, 237, 0.28); } /* ── STUDIO ──────────────────────────────────────────────────────────────── Premium warm-dark: deep charcoal with cream text and emerald-green accent. Inspired by Figma Dark, Apple Developer docs — warm, polished, refined. */ [data-theme="studio"] { color-scheme: dark; --bs-body-bg: #0f0e13; --bs-body-color: #f0eeff; --bs-secondary-color: #9990c0; --bs-tertiary-color: #6b6090; --bs-emphasis-color: #ffffff; --bs-primary: #10b981; --bs-primary-rgb: 16, 185, 129; --bs-link-color: #34d399; --bs-link-hover-color: #6ee7b7; --bs-card-bg: #18151f; --bs-card-cap-bg: #211d2e; --bs-card-border-color: rgba(255, 255, 255, 0.07); --bs-border-color: rgba(255, 255, 255, 0.08); --bs-border-color-translucent: rgba(255, 255, 255, 0.04); --bs-input-bg: #211d2e; --bs-input-border-color: rgba(255, 255, 255, 0.12); --bs-input-focus-border-color: #10b981; --bs-input-focus-box-shadow: 0 0 0 0.2rem rgba(16, 185, 129, 0.2); --bs-modal-bg: #18151f; --bs-modal-border-color: rgba(255, 255, 255, 0.07); --bs-dropdown-bg: #211d2e; --bs-dropdown-border-color: rgba(255, 255, 255, 0.08); --bs-dropdown-link-color: #f0eeff; --bs-dropdown-link-hover-bg: rgba(16, 185, 129, 0.1); --bs-list-group-bg: #18151f; --bs-list-group-border-color: rgba(255, 255, 255, 0.07); --bs-popover-bg: #211d2e; --bs-popover-border-color: rgba(16, 185, 129, 0.2); --bs-tooltip-bg: #2d2540; --bs-table-striped-bg: rgba(16, 185, 129, 0.03); --bs-table-hover-bg: rgba(16, 185, 129, 0.06); --bs-code-color: #34d399; --ads-sidebar-bg: #0a0910; --ads-topbar-bg: rgba(15, 14, 19, 0.92); --ads-border: rgba(255, 255, 255, 0.07); --ads-primary: #10b981; --ads-primary-hover: #059669; --ads-focus-shadow: rgba(16, 185, 129, 0.28); } /* ── SLATE ───────────────────────────────────────────────────────────────── Clean light mode: cool slate grays, indigo accent, dark indigo sidebar */ [data-theme="slate"] { color-scheme: light; --bs-body-bg: #f1f5f9; --bs-body-color: #0f172a; --bs-secondary-color: #475569; --bs-tertiary-color: #64748b; --bs-emphasis-color: #020617; --bs-primary: #6366f1; --bs-primary-rgb: 99, 102, 241; --bs-link-color: #6366f1; --bs-link-hover-color: #4f46e5; --bs-card-bg: #ffffff; --bs-card-cap-bg: #f8fafc; --bs-card-border-color: rgba(0, 0, 0, 0.08); --bs-border-color: rgba(0, 0, 0, 0.09); --bs-border-color-translucent: rgba(0, 0, 0, 0.06); --bs-input-bg: #ffffff; --bs-input-border-color: rgba(0, 0, 0, 0.15); --bs-input-focus-border-color: #6366f1; --bs-input-focus-box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.18); --bs-modal-bg: #ffffff; --bs-modal-border-color: rgba(0, 0, 0, 0.08); --bs-dropdown-bg: #ffffff; --bs-dropdown-border-color: rgba(0, 0, 0, 0.08); --bs-dropdown-link-color: #0f172a; --bs-dropdown-link-hover-bg: rgba(99, 102, 241, 0.07); --bs-list-group-bg: #ffffff; --bs-list-group-border-color: rgba(0, 0, 0, 0.08); --bs-popover-bg: #ffffff; --bs-popover-border-color: rgba(99, 102, 241, 0.2); --bs-tooltip-bg: #1e1b4b; --bs-table-striped-bg: rgba(99, 102, 241, 0.04); --bs-table-hover-bg: rgba(99, 102, 241, 0.06); --bs-code-color: #7c3aed; --ads-sidebar-bg: #1e1b4b; --ads-topbar-bg: rgba(241, 245, 249, 0.94); --ads-border: rgba(0, 0, 0, 0.08); --ads-primary: #6366f1; --ads-primary-hover: #4f46e5; --ads-focus-shadow: rgba(99, 102, 241, 0.28); } /* ── ZINC ────────────────────────────────────────────────────────────────── Clean light mode: gray-50 canvas, white cards, indigo accent, ink sidebar. Inspired by Linear / Vercel light — the go-to 2025 SaaS light aesthetic. */ [data-theme="zinc"] { color-scheme: light; --bs-body-bg: #f9fafb; --bs-body-color: #111827; --bs-secondary-color: #6b7280; --bs-tertiary-color: #9ca3af; --bs-emphasis-color: #030712; --bs-primary: #4f46e5; --bs-primary-rgb: 79, 70, 229; --bs-link-color: #4f46e5; --bs-link-hover-color: #4338ca; --bs-card-bg: #ffffff; --bs-card-cap-bg: #f9fafb; --bs-card-border-color: rgba(0, 0, 0, 0.07); --bs-border-color: rgba(0, 0, 0, 0.08); --bs-border-color-translucent: rgba(0, 0, 0, 0.05); --bs-input-bg: #ffffff; --bs-input-border-color: rgba(0, 0, 0, 0.14); --bs-input-focus-border-color: #4f46e5; --bs-input-focus-box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.18); --bs-modal-bg: #ffffff; --bs-modal-border-color: rgba(0, 0, 0, 0.08); --bs-dropdown-bg: #ffffff; --bs-dropdown-border-color: rgba(0, 0, 0, 0.08); --bs-dropdown-link-color: #111827; --bs-dropdown-link-hover-bg: rgba(79, 70, 229, 0.07); --bs-list-group-bg: #ffffff; --bs-list-group-border-color: rgba(0, 0, 0, 0.07); --bs-popover-bg: #ffffff; --bs-popover-border-color: rgba(79, 70, 229, 0.2); --bs-tooltip-bg: #111827; --bs-table-striped-bg: rgba(79, 70, 229, 0.04); --bs-table-hover-bg: rgba(79, 70, 229, 0.06); --bs-code-color: #7c3aed; --ads-sidebar-bg: #111827; --ads-topbar-bg: rgba(249, 250, 251, 0.95); --ads-border: rgba(0, 0, 0, 0.08); --ads-primary: #4f46e5; --ads-primary-hover: #4338ca; --ads-focus-shadow: rgba(79, 70, 229, 0.25); } /* ── GRAPHITE ─────────────────────────────────────────────────────────────── Warm dark: stone-950 canvas, orange accent, cosy dimmed feel. Inspired by GitHub Dark Dimmed / Figma Dark — softer than pure black. */ [data-theme="graphite"] { color-scheme: dark; --bs-body-bg: #1c1917; --bs-body-color: #e7e5e4; --bs-secondary-color: #a8a29e; --bs-tertiary-color: #78716c; --bs-emphasis-color: #fafaf9; --bs-primary: #fb923c; --bs-primary-rgb: 251, 146, 60; --bs-link-color: #fb923c; --bs-link-hover-color: #fdba74; --bs-card-bg: #231f1c; --bs-card-cap-bg: #2c2723; --bs-card-border-color: rgba(255, 255, 255, 0.06); --bs-border-color: rgba(255, 255, 255, 0.07); --bs-border-color-translucent: rgba(255, 255, 255, 0.04); --bs-input-bg: #2c2723; --bs-input-border-color: rgba(255, 255, 255, 0.1); --bs-input-focus-border-color: #fb923c; --bs-input-focus-box-shadow: 0 0 0 0.2rem rgba(251, 146, 60, 0.2); --bs-modal-bg: #231f1c; --bs-modal-border-color: rgba(255, 255, 255, 0.07); --bs-dropdown-bg: #2c2723; --bs-dropdown-border-color: rgba(255, 255, 255, 0.07); --bs-dropdown-link-color: #e7e5e4; --bs-dropdown-link-hover-bg: rgba(251, 146, 60, 0.1); --bs-list-group-bg: #231f1c; --bs-list-group-border-color: rgba(255, 255, 255, 0.06); --bs-popover-bg: #2c2723; --bs-popover-border-color: rgba(251, 146, 60, 0.2); --bs-tooltip-bg: #3c3330; --bs-table-striped-bg: rgba(251, 146, 60, 0.03); --bs-table-hover-bg: rgba(251, 146, 60, 0.06); --bs-code-color: #fb923c; --bs-secondary-bg: #2c2723; --ads-sidebar-bg: #0c0a09; --ads-topbar-bg: rgba(28, 25, 23, 0.92); --ads-border: rgba(255, 255, 255, 0.07); --ads-primary: #fb923c; --ads-primary-hover: #f97316; --ads-focus-shadow: rgba(251, 146, 60, 0.28); } /* ── COPPER ───────────────────────────────────────────────────────────────── Industrial dark: near-black with rich copper/amber accent. Inspired by Raycast's premium dark theme — bold but not neon. */ [data-theme="copper"] { color-scheme: dark; --bs-body-bg: #0f0d0b; --bs-body-color: #f0e8e2; --bs-secondary-color: #b8a898; --bs-tertiary-color: #7a6a5a; --bs-emphasis-color: #fdf6f0; --bs-primary: #c2773b; --bs-primary-rgb: 194, 119, 59; --bs-link-color: #d4894a; --bs-link-hover-color: #e6a468; --bs-card-bg: #1a1410; --bs-card-cap-bg: #231a14; --bs-card-border-color: rgba(194, 119, 59, 0.13); --bs-border-color: rgba(194, 119, 59, 0.12); --bs-border-color-translucent: rgba(194, 119, 59, 0.07); --bs-input-bg: #231a14; --bs-input-border-color: rgba(194, 119, 59, 0.22); --bs-input-focus-border-color: #c2773b; --bs-input-focus-box-shadow: 0 0 0 0.2rem rgba(194, 119, 59, 0.2); --bs-modal-bg: #1a1410; --bs-modal-border-color: rgba(194, 119, 59, 0.13); --bs-dropdown-bg: #231a14; --bs-dropdown-border-color: rgba(194, 119, 59, 0.13); --bs-dropdown-link-color: #f0e8e2; --bs-dropdown-link-hover-bg: rgba(194, 119, 59, 0.09); --bs-list-group-bg: #1a1410; --bs-list-group-border-color: rgba(194, 119, 59, 0.13); --bs-popover-bg: #231a14; --bs-popover-border-color: rgba(194, 119, 59, 0.2); --bs-tooltip-bg: #332212; --bs-table-striped-bg: rgba(194, 119, 59, 0.03); --bs-table-hover-bg: rgba(194, 119, 59, 0.06); --bs-code-color: #e6a468; --bs-secondary-bg: #231a14; --ads-sidebar-bg: #080604; --ads-topbar-bg: rgba(15, 13, 11, 0.92); --ads-border: rgba(194, 119, 59, 0.12); --ads-primary: #c2773b; --ads-primary-hover: #a8622a; --ads-focus-shadow: rgba(194, 119, 59, 0.28); } /* ── FROST ────────────────────────────────────────────────────────────────── Cool light mode: blue-tinted white canvas, sky-blue accent, midnight nav. Inspired by Vercel / Azure Fluent 2 — clean, airy, professional. */ [data-theme="frost"] { color-scheme: light; --bs-body-bg: #f0f4ff; --bs-body-color: #1e293b; --bs-secondary-color: #475569; --bs-tertiary-color: #64748b; --bs-emphasis-color: #0f172a; --bs-primary: #0284c7; --bs-primary-rgb: 2, 132, 199; --bs-link-color: #0284c7; --bs-link-hover-color: #0369a1; --bs-card-bg: #ffffff; --bs-card-cap-bg: #f8faff; --bs-card-border-color: rgba(0, 0, 0, 0.07); --bs-border-color: rgba(0, 0, 0, 0.08); --bs-border-color-translucent: rgba(0, 0, 0, 0.05); --bs-input-bg: #ffffff; --bs-input-border-color: rgba(0, 0, 0, 0.13); --bs-input-focus-border-color: #0284c7; --bs-input-focus-box-shadow: 0 0 0 0.2rem rgba(2, 132, 199, 0.18); --bs-modal-bg: #ffffff; --bs-modal-border-color: rgba(0, 0, 0, 0.08); --bs-dropdown-bg: #ffffff; --bs-dropdown-border-color: rgba(0, 0, 0, 0.08); --bs-dropdown-link-color: #1e293b; --bs-dropdown-link-hover-bg: rgba(2, 132, 199, 0.07); --bs-list-group-bg: #ffffff; --bs-list-group-border-color: rgba(0, 0, 0, 0.07); --bs-popover-bg: #ffffff; --bs-popover-border-color: rgba(2, 132, 199, 0.2); --bs-tooltip-bg: #0f172a; --bs-table-striped-bg: rgba(2, 132, 199, 0.04); --bs-table-hover-bg: rgba(2, 132, 199, 0.06); --bs-code-color: #0284c7; --ads-sidebar-bg: #0f172a; --ads-topbar-bg: rgba(240, 244, 255, 0.95); --ads-border: rgba(0, 0, 0, 0.08); --ads-primary: #0284c7; --ads-primary-hover: #0369a1; --ads-focus-shadow: rgba(2, 132, 199, 0.25); } /* ══════════════════════════════════════════════════════════════════════════ COMPONENT OVERRIDES These target elements whose colors are hard-coded in app.css with !important or inline CSS, so need a more-specific override here. Applied to all non-default themes via [data-theme] attribute prefix. ══════════════════════════════════════════════════════════════════════════ */ /* -- Primary button -------------------------------------------------------- */ [data-theme="neon-noir"] .btn-primary, [data-theme="aurora"] .btn-primary, [data-theme="synthwave"] .btn-primary, [data-theme="obsidian"] .btn-primary, [data-theme="ocean"] .btn-primary, [data-theme="rose-gold"] .btn-primary, [data-theme="midnight"] .btn-primary, [data-theme="carbon"] .btn-primary, [data-theme="studio"] .btn-primary, [data-theme="slate"] .btn-primary { background-color: var(--ads-primary) !important; border-color: var(--ads-primary) !important; } [data-theme="neon-noir"] .btn-primary:hover, [data-theme="neon-noir"] .btn-primary:focus, [data-theme="aurora"] .btn-primary:hover, [data-theme="aurora"] .btn-primary:focus, [data-theme="synthwave"] .btn-primary:hover, [data-theme="synthwave"] .btn-primary:focus, [data-theme="obsidian"] .btn-primary:hover, [data-theme="obsidian"] .btn-primary:focus, [data-theme="ocean"] .btn-primary:hover, [data-theme="ocean"] .btn-primary:focus, [data-theme="rose-gold"] .btn-primary:hover, [data-theme="rose-gold"] .btn-primary:focus, [data-theme="midnight"] .btn-primary:hover, [data-theme="midnight"] .btn-primary:focus, [data-theme="carbon"] .btn-primary:hover, [data-theme="carbon"] .btn-primary:focus, [data-theme="studio"] .btn-primary:hover, [data-theme="studio"] .btn-primary:focus, [data-theme="slate"] .btn-primary:hover, [data-theme="slate"] .btn-primary:focus { background-color: var(--ads-primary-hover) !important; border-color: var(--ads-primary-hover) !important; box-shadow: 0 0 0 0.2rem var(--ads-focus-shadow) !important; } /* -- Focus ring ------------------------------------------------------------ */ [data-theme="neon-noir"] .btn:focus, [data-theme="neon-noir"] .form-control:focus, [data-theme="neon-noir"] .form-check-input:focus, [data-theme="aurora"] .btn:focus, [data-theme="aurora"] .form-control:focus, [data-theme="aurora"] .form-check-input:focus, [data-theme="synthwave"] .btn:focus, [data-theme="synthwave"] .form-control:focus, [data-theme="synthwave"] .form-check-input:focus, [data-theme="obsidian"] .btn:focus, [data-theme="obsidian"] .form-control:focus, [data-theme="obsidian"] .form-check-input:focus, [data-theme="ocean"] .btn:focus, [data-theme="ocean"] .form-control:focus, [data-theme="ocean"] .form-check-input:focus, [data-theme="rose-gold"] .btn:focus, [data-theme="rose-gold"] .form-control:focus, [data-theme="rose-gold"] .form-check-input:focus, [data-theme="midnight"] .btn:focus, [data-theme="midnight"] .form-control:focus, [data-theme="midnight"] .form-check-input:focus, [data-theme="carbon"] .btn:focus, [data-theme="carbon"] .form-control:focus, [data-theme="carbon"] .form-check-input:focus, [data-theme="studio"] .btn:focus, [data-theme="studio"] .form-control:focus, [data-theme="studio"] .form-check-input:focus, [data-theme="slate"] .btn:focus, [data-theme="slate"] .form-control:focus, [data-theme="slate"] .form-check-input:focus { box-shadow: 0 0 0 0.18rem var(--ads-focus-shadow) !important; } /* -- Form inputs (dark themes override app.css hard-coded dark colors) ----- */ [data-theme="neon-noir"] .form-control, [data-theme="neon-noir"] .form-select, [data-theme="aurora"] .form-control, [data-theme="aurora"] .form-select, [data-theme="synthwave"] .form-control, [data-theme="synthwave"] .form-select, [data-theme="obsidian"] .form-control, [data-theme="obsidian"] .form-select, [data-theme="ocean"] .form-control, [data-theme="ocean"] .form-select, [data-theme="rose-gold"] .form-control, [data-theme="rose-gold"] .form-select, [data-theme="midnight"] .form-control, [data-theme="midnight"] .form-select, [data-theme="carbon"] .form-control, [data-theme="carbon"] .form-select, [data-theme="studio"] .form-control, [data-theme="studio"] .form-select { background-color: var(--bs-input-bg); border-color: var(--bs-input-border-color); color: var(--bs-body-color); } [data-theme="neon-noir"] .form-control:focus, [data-theme="neon-noir"] .form-select:focus, [data-theme="aurora"] .form-control:focus, [data-theme="aurora"] .form-select:focus, [data-theme="synthwave"] .form-control:focus, [data-theme="synthwave"] .form-select:focus, [data-theme="obsidian"] .form-control:focus, [data-theme="obsidian"] .form-select:focus, [data-theme="ocean"] .form-control:focus, [data-theme="ocean"] .form-select:focus, [data-theme="rose-gold"] .form-control:focus, [data-theme="rose-gold"] .form-select:focus, [data-theme="midnight"] .form-control:focus, [data-theme="midnight"] .form-select:focus, [data-theme="carbon"] .form-control:focus, [data-theme="carbon"] .form-select:focus, [data-theme="studio"] .form-control:focus, [data-theme="studio"] .form-select:focus { background-color: var(--bs-input-bg); border-color: var(--bs-input-focus-border-color); color: var(--bs-body-color); box-shadow: var(--bs-input-focus-box-shadow); } [data-theme="neon-noir"] .form-control::placeholder, [data-theme="aurora"] .form-control::placeholder, [data-theme="synthwave"] .form-control::placeholder, [data-theme="obsidian"] .form-control::placeholder, [data-theme="ocean"] .form-control::placeholder, [data-theme="rose-gold"] .form-control::placeholder, [data-theme="midnight"] .form-control::placeholder, [data-theme="carbon"] .form-control::placeholder, [data-theme="studio"] .form-control::placeholder { color: var(--bs-tertiary-color); } [data-theme="neon-noir"] .form-label, [data-theme="aurora"] .form-label, [data-theme="synthwave"] .form-label, [data-theme="obsidian"] .form-label, [data-theme="ocean"] .form-label, [data-theme="rose-gold"] .form-label, [data-theme="midnight"] .form-label, [data-theme="carbon"] .form-label, [data-theme="studio"] .form-label { color: var(--bs-secondary-color); font-size: 0.85rem; font-weight: 500; } [data-theme="neon-noir"] .input-group-text, [data-theme="aurora"] .input-group-text, [data-theme="synthwave"] .input-group-text, [data-theme="obsidian"] .input-group-text, [data-theme="ocean"] .input-group-text, [data-theme="rose-gold"] .input-group-text, [data-theme="midnight"] .input-group-text, [data-theme="carbon"] .input-group-text, [data-theme="studio"] .input-group-text { background: var(--bs-card-cap-bg); border-color: var(--bs-input-border-color); color: var(--bs-tertiary-color); } /* -- Primary badge --------------------------------------------------------- */ [data-theme="neon-noir"] .badge.bg-primary, [data-theme="aurora"] .badge.bg-primary, [data-theme="synthwave"] .badge.bg-primary, [data-theme="obsidian"] .badge.bg-primary, [data-theme="ocean"] .badge.bg-primary, [data-theme="rose-gold"] .badge.bg-primary, [data-theme="midnight"] .badge.bg-primary, [data-theme="carbon"] .badge.bg-primary, [data-theme="studio"] .badge.bg-primary, [data-theme="slate"] .badge.bg-primary { background-color: var(--ads-primary) !important; } /* -- Card headers on dark themes ------------------------------------------ */ [data-theme="neon-noir"] .card-header, [data-theme="aurora"] .card-header, [data-theme="synthwave"] .card-header, [data-theme="obsidian"] .card-header, [data-theme="ocean"] .card-header, [data-theme="rose-gold"] .card-header, [data-theme="midnight"] .card-header, [data-theme="carbon"] .card-header, [data-theme="studio"] .card-header { background: var(--bs-card-cap-bg); border-bottom-color: var(--bs-card-border-color); font-weight: 600; font-size: 0.9rem; } /* -- Card borders on dark themes ------------------------------------------ */ [data-theme="neon-noir"] .card, [data-theme="aurora"] .card, [data-theme="synthwave"] .card, [data-theme="obsidian"] .card, [data-theme="ocean"] .card, [data-theme="rose-gold"] .card, [data-theme="midnight"] .card, [data-theme="carbon"] .card, [data-theme="studio"] .card { border-color: var(--bs-card-border-color); } /* -- Table text on dark themes -------------------------------------------- */ [data-theme="neon-noir"] .table, [data-theme="aurora"] .table, [data-theme="synthwave"] .table, [data-theme="obsidian"] .table, [data-theme="ocean"] .table, [data-theme="rose-gold"] .table, [data-theme="midnight"] .table, [data-theme="carbon"] .table, [data-theme="studio"] .table { --bs-table-border-color: var(--bs-border-color); color: var(--bs-body-color); } [data-theme="neon-noir"] .table th, [data-theme="aurora"] .table th, [data-theme="synthwave"] .table th, [data-theme="obsidian"] .table th, [data-theme="ocean"] .table th, [data-theme="rose-gold"] .table th, [data-theme="midnight"] .table th, [data-theme="carbon"] .table th, [data-theme="studio"] .table th { color: var(--bs-secondary-color); border-bottom-color: var(--bs-border-color); } /* -- Scrollbars on dark custom themes ------------------------------------- */ [data-theme="neon-noir"] ::-webkit-scrollbar, [data-theme="aurora"] ::-webkit-scrollbar, [data-theme="synthwave"] ::-webkit-scrollbar, [data-theme="obsidian"] ::-webkit-scrollbar, [data-theme="ocean"] ::-webkit-scrollbar, [data-theme="rose-gold"] ::-webkit-scrollbar, [data-theme="midnight"] ::-webkit-scrollbar, [data-theme="carbon"] ::-webkit-scrollbar, [data-theme="studio"] ::-webkit-scrollbar { width: 6px; height: 6px; } [data-theme="neon-noir"] ::-webkit-scrollbar-track, [data-theme="aurora"] ::-webkit-scrollbar-track, [data-theme="synthwave"] ::-webkit-scrollbar-track, [data-theme="obsidian"] ::-webkit-scrollbar-track, [data-theme="ocean"] ::-webkit-scrollbar-track, [data-theme="rose-gold"] ::-webkit-scrollbar-track, [data-theme="midnight"] ::-webkit-scrollbar-track, [data-theme="carbon"] ::-webkit-scrollbar-track, [data-theme="studio"] ::-webkit-scrollbar-track { background: transparent; } [data-theme="neon-noir"] ::-webkit-scrollbar-thumb, [data-theme="aurora"] ::-webkit-scrollbar-thumb, [data-theme="synthwave"] ::-webkit-scrollbar-thumb, [data-theme="obsidian"] ::-webkit-scrollbar-thumb, [data-theme="ocean"] ::-webkit-scrollbar-thumb, [data-theme="rose-gold"] ::-webkit-scrollbar-thumb, [data-theme="midnight"] ::-webkit-scrollbar-thumb, [data-theme="carbon"] ::-webkit-scrollbar-thumb, [data-theme="studio"] ::-webkit-scrollbar-thumb { background: var(--ads-border); border-radius: 3px; } [data-theme="neon-noir"] ::-webkit-scrollbar-thumb:hover, [data-theme="aurora"] ::-webkit-scrollbar-thumb:hover, [data-theme="synthwave"] ::-webkit-scrollbar-thumb:hover, [data-theme="obsidian"] ::-webkit-scrollbar-thumb:hover, [data-theme="ocean"] ::-webkit-scrollbar-thumb:hover, [data-theme="rose-gold"] ::-webkit-scrollbar-thumb:hover, [data-theme="midnight"] ::-webkit-scrollbar-thumb:hover, [data-theme="carbon"] ::-webkit-scrollbar-thumb:hover, [data-theme="studio"] ::-webkit-scrollbar-thumb:hover { background: var(--ads-primary); opacity: 0.4; } /* -- Slate (light) specific overrides ------------------------------------- */ [data-theme="slate"] .form-control, [data-theme="slate"] .form-select { background-color: #ffffff; border-color: rgba(0, 0, 0, 0.15); color: #0f172a; } [data-theme="slate"] .form-control:focus, [data-theme="slate"] .form-select:focus { background-color: #ffffff; border-color: #6366f1; color: #0f172a; box-shadow: 0 0 0 0.18rem rgba(99, 102, 241, 0.2); } [data-theme="slate"] .form-control::placeholder { color: #94a3b8; } [data-theme="slate"] .form-label { color: #475569; font-size: 0.85rem; font-weight: 500; } [data-theme="slate"] .input-group-text { background: #f1f5f9; border-color: rgba(0,0,0,.15); color: #64748b; } [data-theme="slate"] .card-header { font-weight: 600; font-size: 0.9rem; } [data-theme="slate"] .btn-primary { color: #fff !important; } /* ══ NEW CONTEMPORARY THEME OVERRIDES ══════════════════════════════════════ Graphite + Copper (dark) and Zinc + Frost (light) — added 2025. ══════════════════════════════════════════════════════════════════════════ */ /* Primary button */ [data-theme="graphite"] .btn-primary, [data-theme="copper"] .btn-primary { background-color: var(--ads-primary) !important; border-color: var(--ads-primary) !important; } [data-theme="zinc"] .btn-primary, [data-theme="frost"] .btn-primary { color: #fff !important; } [data-theme="graphite"] .btn-primary:hover, [data-theme="graphite"] .btn-primary:focus, [data-theme="copper"] .btn-primary:hover, [data-theme="copper"] .btn-primary:focus { background-color: var(--ads-primary-hover) !important; border-color: var(--ads-primary-hover) !important; box-shadow: 0 0 0 0.2rem var(--ads-focus-shadow) !important; } /* Focus ring */ [data-theme="graphite"] .btn:focus, [data-theme="graphite"] .form-control:focus, [data-theme="graphite"] .form-check-input:focus, [data-theme="copper"] .btn:focus, [data-theme="copper"] .form-control:focus, [data-theme="copper"] .form-check-input:focus, [data-theme="zinc"] .btn:focus, [data-theme="zinc"] .form-control:focus, [data-theme="zinc"] .form-check-input:focus, [data-theme="frost"] .btn:focus, [data-theme="frost"] .form-control:focus, [data-theme="frost"] .form-check-input:focus { box-shadow: 0 0 0 0.18rem var(--ads-focus-shadow) !important; } /* Dark inputs */ [data-theme="graphite"] .form-control, [data-theme="graphite"] .form-select, [data-theme="copper"] .form-control, [data-theme="copper"] .form-select { background-color: var(--bs-input-bg); border-color: var(--bs-input-border-color); color: var(--bs-body-color); } [data-theme="graphite"] .form-control:focus, [data-theme="graphite"] .form-select:focus, [data-theme="copper"] .form-control:focus, [data-theme="copper"] .form-select:focus { background-color: var(--bs-input-bg); border-color: var(--bs-input-focus-border-color); color: var(--bs-body-color); box-shadow: var(--bs-input-focus-box-shadow); } [data-theme="graphite"] .form-control::placeholder, [data-theme="copper"] .form-control::placeholder { color: var(--bs-tertiary-color); } [data-theme="graphite"] .form-label, [data-theme="copper"] .form-label { color: var(--bs-secondary-color); font-size: 0.85rem; font-weight: 500; } [data-theme="graphite"] .input-group-text, [data-theme="copper"] .input-group-text { background: var(--bs-card-cap-bg); border-color: var(--bs-input-border-color); color: var(--bs-tertiary-color); } /* Light inputs (zinc / frost) */ [data-theme="zinc"] .form-control, [data-theme="zinc"] .form-select, [data-theme="frost"] .form-control, [data-theme="frost"] .form-select { background-color: #ffffff; border-color: rgba(0, 0, 0, 0.13); color: var(--bs-body-color); } [data-theme="zinc"] .form-control:focus, [data-theme="zinc"] .form-select:focus, [data-theme="frost"] .form-control:focus, [data-theme="frost"] .form-select:focus { background-color: #ffffff; border-color: var(--bs-input-focus-border-color); color: var(--bs-body-color); box-shadow: var(--bs-input-focus-box-shadow); } [data-theme="zinc"] .form-control::placeholder { color: #9ca3af; } [data-theme="frost"] .form-control::placeholder { color: #94a3b8; } [data-theme="zinc"] .form-label { color: #6b7280; font-size: 0.85rem; font-weight: 500; } [data-theme="frost"] .form-label { color: #475569; font-size: 0.85rem; font-weight: 500; } [data-theme="zinc"] .input-group-text { background: #f9fafb; border-color: rgba(0,0,0,.12); color: #6b7280; } [data-theme="frost"] .input-group-text { background: #f0f4ff; border-color: rgba(0,0,0,.12); color: #475569; } [data-theme="zinc"] .card-header { font-weight: 600; font-size: 0.9rem; } [data-theme="frost"] .card-header { font-weight: 600; font-size: 0.9rem; } /* Badges */ [data-theme="graphite"] .badge.bg-primary, [data-theme="copper"] .badge.bg-primary, [data-theme="zinc"] .badge.bg-primary, [data-theme="frost"] .badge.bg-primary { background-color: var(--ads-primary) !important; } /* Card headers */ [data-theme="graphite"] .card-header, [data-theme="copper"] .card-header { background: var(--bs-card-cap-bg); border-bottom-color: var(--bs-card-border-color); font-weight: 600; font-size: 0.9rem; } /* Card borders */ [data-theme="graphite"] .card, [data-theme="copper"] .card { border-color: var(--bs-card-border-color); } /* Tables */ [data-theme="graphite"] .table, [data-theme="copper"] .table { --bs-table-border-color: var(--bs-border-color); color: var(--bs-body-color); } [data-theme="graphite"] .table th, [data-theme="copper"] .table th { color: var(--bs-secondary-color); border-bottom-color: var(--bs-border-color); } /* Scrollbars (dark) */ [data-theme="graphite"] ::-webkit-scrollbar, [data-theme="copper"] ::-webkit-scrollbar { width: 6px; height: 6px; } [data-theme="graphite"] ::-webkit-scrollbar-track, [data-theme="copper"] ::-webkit-scrollbar-track { background: transparent; } [data-theme="graphite"] ::-webkit-scrollbar-thumb, [data-theme="copper"] ::-webkit-scrollbar-thumb { background: var(--ads-border); border-radius: 3px; } [data-theme="graphite"] ::-webkit-scrollbar-thumb:hover, [data-theme="copper"] ::-webkit-scrollbar-thumb:hover { background: var(--ads-primary); opacity: 0.4; } /* Alert overrides */ [data-theme="graphite"] .alert-success { background: rgba(251, 146, 60, 0.1); border-color: rgba(251, 146, 60, 0.25); color: #fdba74; } [data-theme="copper"] .alert-success { background: rgba(194, 119, 59, 0.1); border-color: rgba(194, 119, 59, 0.25); color: #e6a468; } /* ── end new themes ──────────────────────────────────────────────────────── */ /* -- Alert overrides for colourful themes --------------------------------- */ [data-theme="neon-noir"] .alert-success, [data-theme="aurora"] .alert-success, [data-theme="midnight"] .alert-success { background: rgba(52, 211, 153, 0.1); border-color: rgba(52, 211, 153, 0.25); color: #6ee7b7; } [data-theme="synthwave"] .alert-success { background: rgba(249, 233, 0, 0.08); border-color: rgba(249, 233, 0, 0.2); color: #f9e900; } [data-theme="obsidian"] .alert-success { background: rgba(251, 146, 60, 0.1); border-color: rgba(251, 146, 60, 0.25); color: #fdba74; } [data-theme="ocean"] .alert-success { background: rgba(34, 211, 238, 0.1); border-color: rgba(34, 211, 238, 0.25); color: #67e8f9; } [data-theme="rose-gold"] .alert-success { background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.25); color: #fcd34d; } [data-theme="carbon"] .alert-success { background: rgba(192, 132, 252, 0.1); border-color: rgba(192, 132, 252, 0.25); color: #c084fc; } [data-theme="studio"] .alert-success { background: rgba(52, 211, 153, 0.1); border-color: rgba(52, 211, 153, 0.25); color: #6ee7b7; } [data-theme="galaxy"] .alert-success { background: rgba(79, 142, 247, 0.1); border-color: rgba(79, 142, 247, 0.25); color: #93bbff; } /* ── GALAXY ──────────────────────────────────────────────────────────────── Deep navy AI dashboard: electric blue primary, pink & cyan chart accents. Inspired by Midjourney-generated dark AI studio dashboard concept. */ [data-theme="galaxy"] { color-scheme: dark; /* Core palette */ --bs-body-bg: #0d0f1a; --bs-body-color: #e8eaf6; --bs-secondary-color: #6272a4; --bs-tertiary-color: #3d4466; --bs-emphasis-color: #f0f2ff; /* Primary accent — electric blue */ --bs-primary: #4f8ef7; --bs-primary-rgb: 79, 142, 247; --bs-link-color: #4f8ef7; --bs-link-hover-color: #7aaeff; /* Cards */ --bs-card-bg: #141728; --bs-card-cap-bg: #1a1f35; --bs-card-border-color: rgba(79, 142, 247, 0.12); /* Borders */ --bs-border-color: rgba(79, 142, 247, 0.12); --bs-border-color-translucent: rgba(79, 142, 247, 0.07); /* Inputs */ --bs-input-bg: #181c30; --bs-input-border-color: rgba(79, 142, 247, 0.22); --bs-input-focus-border-color: #4f8ef7; --bs-input-focus-box-shadow: 0 0 0 0.2rem rgba(79, 142, 247, 0.18); /* Modals / dropdowns */ --bs-modal-bg: #141728; --bs-modal-border-color: rgba(79, 142, 247, 0.12); --bs-dropdown-bg: #1a1f35; --bs-dropdown-border-color: rgba(79, 142, 247, 0.12); --bs-dropdown-link-color: #e8eaf6; --bs-dropdown-link-hover-bg: rgba(79, 142, 247, 0.08); --bs-list-group-bg: #141728; --bs-list-group-border-color: rgba(79, 142, 247, 0.12); --bs-popover-bg: #1a1f35; --bs-popover-border-color: rgba(79, 142, 247, 0.2); --bs-tooltip-bg: #1e2340; /* Tables */ --bs-table-striped-bg: rgba(79, 142, 247, 0.03); --bs-table-hover-bg: rgba(79, 142, 247, 0.05); /* Code — pink accent */ --bs-code-color: #e040fb; /* App vars */ --ads-sidebar-bg: #0a0c18; --ads-topbar-bg: rgba(13, 15, 26, 0.92); --ads-border: rgba(79, 142, 247, 0.14); /* Theme primary helpers */ --ads-primary: #4f8ef7; --ads-primary-hover: #3a7ae8; --ads-focus-shadow: rgba(79, 142, 247, 0.28); } /* Primary button */ [data-theme="galaxy"] .btn-primary { background-color: var(--ads-primary) !important; border-color: var(--ads-primary) !important; } [data-theme="galaxy"] .btn-primary:hover, [data-theme="galaxy"] .btn-primary:focus { background-color: var(--ads-primary-hover) !important; border-color: var(--ads-primary-hover) !important; box-shadow: 0 0 0 0.2rem var(--ads-focus-shadow) !important; } /* Focus ring */ [data-theme="galaxy"] .btn:focus, [data-theme="galaxy"] .form-control:focus, [data-theme="galaxy"] .form-check-input:focus { box-shadow: 0 0 0 0.18rem var(--ads-focus-shadow) !important; } /* Inputs */ [data-theme="galaxy"] .form-control, [data-theme="galaxy"] .form-select { background-color: var(--bs-input-bg); border-color: var(--bs-input-border-color); color: var(--bs-body-color); } [data-theme="galaxy"] .form-control:focus, [data-theme="galaxy"] .form-select:focus { background-color: var(--bs-input-bg); border-color: var(--bs-input-focus-border-color); color: var(--bs-body-color); box-shadow: var(--bs-input-focus-box-shadow); } [data-theme="galaxy"] .form-control::placeholder { color: var(--bs-tertiary-color); } [data-theme="galaxy"] .form-label { color: var(--bs-secondary-color); font-size: 0.85rem; font-weight: 500; } [data-theme="galaxy"] .input-group-text { background: var(--bs-card-cap-bg); border-color: var(--bs-input-border-color); color: var(--bs-tertiary-color); } /* Badges */ [data-theme="galaxy"] .badge.bg-primary { background-color: var(--ads-primary) !important; } /* Card headers */ [data-theme="galaxy"] .card-header { background: var(--bs-card-cap-bg); border-bottom-color: var(--bs-card-border-color); font-weight: 600; font-size: 0.9rem; } /* Card borders */ [data-theme="galaxy"] .card { border-color: var(--bs-card-border-color); } /* Tables */ [data-theme="galaxy"] .table { --bs-table-border-color: var(--bs-border-color); color: var(--bs-body-color); } [data-theme="galaxy"] .table th { color: var(--bs-secondary-color); border-bottom-color: var(--bs-border-color); } /* Scrollbars */ [data-theme="galaxy"] ::-webkit-scrollbar { width: 6px; height: 6px; } [data-theme="galaxy"] ::-webkit-scrollbar-track { background: transparent; } [data-theme="galaxy"] ::-webkit-scrollbar-thumb { background: var(--ads-border); border-radius: 3px; } [data-theme="galaxy"] ::-webkit-scrollbar-thumb:hover { background: var(--ads-primary); opacity: 0.4; } /* ── end galaxy ──────────────────────────────────────────────────────────── */ /* ── ORBIT ────────────────────────────────────────────────────────────────── Dashboard2 aesthetic — deep space, indigo primary, cyan accent */ [data-theme="orbit"] { color-scheme: dark; /* Core palette */ --bs-body-bg: #0b0c10; --bs-body-color: #e2e8f0; --bs-secondary-color: #8a94a6; --bs-tertiary-color: #4a5568; --bs-emphasis-color: #f9fafb; /* Primary accent — indigo */ --bs-primary: #4F6EF7; --bs-primary-rgb: 79, 110, 247; --bs-link-color: #4F6EF7; --bs-link-hover-color: #7b96fa; /* Cards */ --bs-card-bg: #191B1F; --bs-card-cap-bg: #20232a; --bs-card-border-color: rgba(79, 110, 247, 0.12); /* Borders */ --bs-border-color: rgba(79, 110, 247, 0.12); --bs-border-color-translucent: rgba(79, 110, 247, 0.08); /* Inputs */ --bs-input-bg: #20232a; --bs-input-border-color: rgba(79, 110, 247, 0.22); --bs-input-focus-border-color: #4F6EF7; --bs-input-focus-box-shadow: 0 0 0 0.2rem rgba(79, 110, 247, 0.2); /* Modals / dropdowns */ --bs-modal-bg: #191B1F; --bs-modal-border-color: rgba(79, 110, 247, 0.12); --bs-dropdown-bg: #20232a; --bs-dropdown-border-color: rgba(79, 110, 247, 0.12); --bs-dropdown-link-color: #e2e8f0; --bs-dropdown-link-hover-bg: rgba(79, 110, 247, 0.08); --bs-list-group-bg: #191B1F; --bs-list-group-border-color: rgba(79, 110, 247, 0.12); --bs-popover-bg: #20232a; --bs-popover-border-color: rgba(79, 110, 247, 0.2); --bs-tooltip-bg: #2a2e38; /* Tables */ --bs-table-striped-bg: rgba(79, 110, 247, 0.03); --bs-table-hover-bg: rgba(79, 110, 247, 0.05); /* Code */ --bs-code-color: #06b6d4; /* App vars */ --ads-sidebar-bg: #111317; --ads-topbar-bg: rgba(11, 12, 16, 0.96); --ads-border: rgba(79, 110, 247, 0.12); --ads-primary: #4F6EF7; --ads-primary-hover: #3a58d6; --ads-focus-shadow: rgba(79, 110, 247, 0.28); } /* Nav sidebar — wider to match Dashboard2 */ @media (min-width: 641px) { [data-theme="orbit"] .sidebar { width: 256px; } } /* Nav active / hover */ [data-theme="orbit"] .nav-link.active, [data-theme="orbit"] .nav-item.active > .nav-link { background: rgba(79, 110, 247, 0.14) !important; color: #4F6EF7 !important; border-left: 3px solid #4F6EF7; } [data-theme="orbit"] .nav-link:hover { background: rgba(79, 110, 247, 0.07) !important; color: #7b96fa !important; } /* Cards — rounded, subtle shadow */ [data-theme="orbit"] .card { border-color: var(--bs-card-border-color); border-radius: 12px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); } [data-theme="orbit"] .card-header { background: var(--bs-card-cap-bg); border-bottom-color: var(--bs-card-border-color); border-radius: 12px 12px 0 0 !important; font-weight: 600; font-size: 0.9rem; } /* Buttons */ [data-theme="orbit"] .btn-primary { background-color: #4F6EF7; border-color: #4F6EF7; color: #fff; border-radius: 8px; } [data-theme="orbit"] .btn-primary:hover { background-color: #3a58d6; border-color: #3a58d6; } [data-theme="orbit"] .btn-outline-primary { color: #4F6EF7; border-color: #4F6EF7; border-radius: 8px; } [data-theme="orbit"] .btn-outline-primary:hover { background-color: rgba(79,110,247,0.12); color: #7b96fa; } [data-theme="orbit"] .btn { border-radius: 8px; } /* Badges */ [data-theme="orbit"] .badge.bg-primary { background-color: var(--ads-primary) !important; } /* Tables */ [data-theme="orbit"] .table { --bs-table-border-color: var(--bs-border-color); color: var(--bs-body-color); } [data-theme="orbit"] .table th { color: var(--bs-secondary-color); border-bottom-color: var(--bs-border-color); font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; } /* Alerts */ [data-theme="orbit"] .alert-primary { background: rgba(79, 110, 247, 0.1); border-color: rgba(79, 110, 247, 0.3); color: #a5b4fb; } /* Form labels */ [data-theme="orbit"] .form-label { color: var(--bs-secondary-color); font-size: 0.85rem; font-weight: 500; } [data-theme="orbit"] .input-group-text { background: var(--bs-card-cap-bg); border-color: var(--bs-input-border-color); color: var(--bs-tertiary-color); } /* Scrollbars */ [data-theme="orbit"] ::-webkit-scrollbar { width: 6px; height: 6px; } [data-theme="orbit"] ::-webkit-scrollbar-track { background: transparent; } [data-theme="orbit"] ::-webkit-scrollbar-thumb { background: rgba(79,110,247,0.25); border-radius: 3px; } [data-theme="orbit"] ::-webkit-scrollbar-thumb:hover { background: rgba(79,110,247,0.5); } /* ── end orbit ────────────────────────────────────────────────────────────── */ /* ── RETRO ─────────────────────────────────────────────────────────────────── Terminal green on near-black — monospace, minimal, old-school */ [data-theme="retro"] { color-scheme: dark; /* Font */ --bs-body-font-family: 'JetBrains Mono', 'Courier New', monospace; /* Core palette */ --bs-body-bg: #030803; --bs-body-color: #b8f0b8; --bs-secondary-color: rgba(184, 240, 184, 0.6); --bs-tertiary-color: rgba(184, 240, 184, 0.35); --bs-emphasis-color: #e8ffe8; /* Primary accent — terminal green */ --bs-primary: #22c55e; --bs-primary-rgb: 34, 197, 94; --bs-link-color: #22c55e; --bs-link-hover-color: #4ade80; /* Cards */ --bs-card-bg: #0d160d; --bs-card-cap-bg: #111c11; --bs-card-border-color: rgba(34, 197, 94, 0.15); /* Borders */ --bs-border-color: rgba(34, 197, 94, 0.15); --bs-border-color-translucent: rgba(34, 197, 94, 0.1); /* Inputs */ --bs-input-bg: #0a130a; --bs-input-border-color: rgba(34, 197, 94, 0.25); --bs-input-focus-border-color: #22c55e; --bs-input-focus-box-shadow: 0 0 0 0.2rem rgba(34, 197, 94, 0.2); /* Modals / dropdowns */ --bs-modal-bg: #0d160d; --bs-modal-border-color: rgba(34, 197, 94, 0.15); --bs-dropdown-bg: #111c11; --bs-dropdown-border-color: rgba(34, 197, 94, 0.15); --bs-dropdown-link-color: #b8f0b8; --bs-dropdown-link-hover-bg: rgba(34, 197, 94, 0.07); --bs-list-group-bg: #0d160d; --bs-list-group-border-color: rgba(34, 197, 94, 0.15); --bs-popover-bg: #111c11; --bs-popover-border-color: rgba(34, 197, 94, 0.2); --bs-tooltip-bg: #0d160d; /* Tables */ --bs-table-striped-bg: rgba(34, 197, 94, 0.025); --bs-table-hover-bg: rgba(34, 197, 94, 0.04); /* Code */ --bs-code-color: #4ade80; /* App vars */ --ads-sidebar-bg: #030803; --ads-topbar-bg: rgba(3, 8, 3, 0.96); --ads-border: rgba(34, 197, 94, 0.15); --ads-primary: #22c55e; --ads-primary-hover: #16a34a; --ads-focus-shadow: rgba(34, 197, 94, 0.28); } /* Body-level font override */ [data-theme="retro"] body, [data-theme="retro"] .form-control, [data-theme="retro"] .btn, [data-theme="retro"] .nav-link { font-family: 'JetBrains Mono', 'Courier New', monospace; } /* Nav active / hover */ [data-theme="retro"] .nav-link.active, [data-theme="retro"] .nav-item.active > .nav-link { background: rgba(34, 197, 94, 0.1) !important; color: #22c55e !important; border-left: 2px solid #22c55e; } [data-theme="retro"] .nav-link:hover { background: rgba(34, 197, 94, 0.06) !important; color: #4ade80 !important; } /* Cards — flat, sharp corners */ [data-theme="retro"] .card { border-color: rgba(34, 197, 94, 0.15); border-radius: 2px; box-shadow: none; } [data-theme="retro"] .card-header { background: var(--bs-card-cap-bg); border-bottom-color: rgba(34, 197, 94, 0.15); border-radius: 0 !important; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: #22c55e; } /* Buttons — flat outlined style */ [data-theme="retro"] .btn { border-radius: 2px; font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.82rem; letter-spacing: 0.03em; text-transform: uppercase; } [data-theme="retro"] .btn-primary { background-color: transparent; border: 1px solid #22c55e; color: #22c55e; } [data-theme="retro"] .btn-primary:hover { background-color: rgba(34, 197, 94, 0.12); border-color: #4ade80; color: #4ade80; } [data-theme="retro"] .btn-outline-primary { color: #22c55e; border-color: #22c55e; border-radius: 2px; } [data-theme="retro"] .btn-outline-primary:hover { background-color: rgba(34, 197, 94, 0.1); color: #4ade80; } [data-theme="retro"] .btn-secondary { background-color: transparent; border: 1px solid rgba(184, 240, 184, 0.25); color: rgba(184, 240, 184, 0.6); } [data-theme="retro"] .btn-secondary:hover { background-color: rgba(34, 197, 94, 0.06); border-color: rgba(34, 197, 94, 0.4); color: #b8f0b8; } /* Badges */ [data-theme="retro"] .badge { border-radius: 2px; } [data-theme="retro"] .badge.bg-primary { background-color: transparent !important; border: 1px solid #22c55e; color: #22c55e; } [data-theme="retro"] .badge.bg-success { background-color: transparent !important; border: 1px solid #4ade80; color: #4ade80; } /* Tables */ [data-theme="retro"] .table { --bs-table-border-color: rgba(34, 197, 94, 0.12); color: #b8f0b8; font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.82rem; } [data-theme="retro"] .table th { color: #22c55e; border-bottom-color: rgba(34, 197, 94, 0.2); font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; } /* Alerts */ [data-theme="retro"] .alert { border-radius: 2px; font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.82rem; } [data-theme="retro"] .alert-success { background: rgba(34, 197, 94, 0.07); border-color: rgba(34, 197, 94, 0.3); color: #4ade80; } [data-theme="retro"] .alert-danger { background: rgba(239, 68, 68, 0.07); border-color: rgba(239, 68, 68, 0.3); color: #f87171; } [data-theme="retro"] .alert-primary { background: rgba(34, 197, 94, 0.07); border-color: rgba(34, 197, 94, 0.25); color: #86efac; } /* Form controls */ [data-theme="retro"] .form-control, [data-theme="retro"] .form-select { border-radius: 2px; font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.85rem; background-color: var(--bs-input-bg); border-color: var(--bs-input-border-color); color: #b8f0b8; } [data-theme="retro"] .form-label { color: rgba(184, 240, 184, 0.6); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-family: 'JetBrains Mono', 'Courier New', monospace; } [data-theme="retro"] .input-group-text { background: #0a130a; border-color: var(--bs-input-border-color); color: rgba(184, 240, 184, 0.5); border-radius: 2px; font-family: 'JetBrains Mono', 'Courier New', monospace; } /* Modal */ [data-theme="retro"] .modal-header { border-bottom-color: rgba(34, 197, 94, 0.15); border-radius: 0 !important; } [data-theme="retro"] .modal-footer { border-top-color: rgba(34, 197, 94, 0.15); } [data-theme="retro"] .modal-content { border-radius: 2px; } /* Headings take on primary colour */ [data-theme="retro"] h1, [data-theme="retro"] h2, [data-theme="retro"] h3, [data-theme="retro"] h4 { color: #22c55e; } /* Scrollbars */ [data-theme="retro"] ::-webkit-scrollbar { width: 4px; height: 4px; } [data-theme="retro"] ::-webkit-scrollbar-track { background: transparent; } [data-theme="retro"] ::-webkit-scrollbar-thumb { background: rgba(34, 197, 94, 0.3); border-radius: 1px; } [data-theme="retro"] ::-webkit-scrollbar-thumb:hover { background: rgba(34, 197, 94, 0.6); } /* ── end retro ───────────────────────────────────────────────────────────── */