/* * 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); } /* ── 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); } /* ══════════════════════════════════════════════════════════════════════════ 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="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="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="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 { 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 { 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 { 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 { 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 { 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="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 { 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 { 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 { --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 { 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 { 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 { 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 { 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 { 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; } /* -- 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; }