/** * MERP Theme System * 15 Modern Themes organized in 5 categories * * Applied via attribute. * If no attribute, falls back to Default Blue. */ /* ====================== HELPER MIXIN (repeated per theme) ====================== */ /* =========================================================== CORE — Default Blue (data-theme="default") =========================================================== */ [data-theme="default"], body:not([data-theme]) { --primary-color: #4f8cff; --primary-dark: #2b5fc7; --primary-light: #b3d1ff; --secondary-color: #6c63ff; --success-color: #4fd18c; --danger-color: #ff6b6b; --warning-color: #ffe066; --info-color: #38b6ff; --glass-bg: rgba(255,255,255,0.72); --glass-blur: 16px; --bg-primary: #f6f8fc; --bg-secondary: #eaf0fa; --text-primary: #22223b; --text-secondary: #4a4e69; --border-color: #d1d9e6; --shadow-sm: 0 2px 8px rgba(79,140,255,0.08); --shadow-md: 0 8px 24px rgba(79,140,255,0.12); --shadow-lg: 0 16px 48px rgba(79,140,255,0.16); --navbar-bg: #4f8cff; --navbar-text: #fff; --body-bg: linear-gradient(135deg, #f6f8fc 0%, #e8f0fe 100%); --accent-gradient: linear-gradient(120deg, #4f8cff 0%, #6c63ff 100%); --scrollbar-thumb: #6c63ff; } /* =========================================================== CORE — Emerald (data-theme="emerald") =========================================================== */ [data-theme="emerald"] { --primary-color: #10b981; --primary-dark: #059669; --primary-light: #a7f3d0; --secondary-color: #14b8a6; --success-color: #22c55e; --danger-color: #ef4444; --warning-color: #f59e0b; --info-color: #06b6d4; --glass-bg: rgba(255,255,255,0.75); --glass-blur: 16px; --bg-primary: #f0fdf4; --bg-secondary: #dcfce7; --text-primary: #14532d; --text-secondary: #3f6212; --border-color: #bbf7d0; --shadow-sm: 0 2px 8px rgba(16,185,129,0.08); --shadow-md: 0 8px 24px rgba(16,185,129,0.12); --shadow-lg: 0 16px 48px rgba(16,185,129,0.16); --navbar-bg: #059669; --navbar-text: #fff; --body-bg: linear-gradient(135deg, #f0fdf4 0%, #d1fae5 100%); --accent-gradient: linear-gradient(120deg, #10b981 0%, #14b8a6 100%); --scrollbar-thumb: #14b8a6; } /* =========================================================== CORE — Sunset (data-theme="sunset") =========================================================== */ [data-theme="sunset"] { --primary-color: #8b5cf6; --primary-dark: #6d28d9; --primary-light: #ddd6fe; --secondary-color: #f97316; --success-color: #22c55e; --danger-color: #ef4444; --warning-color: #f59e0b; --info-color: #a78bfa; --glass-bg: rgba(255,255,255,0.72); --glass-blur: 16px; --bg-primary: #faf5ff; --bg-secondary: #f3e8ff; --text-primary: #1e1b4b; --text-secondary: #4c1d95; --border-color: #e9d5ff; --shadow-sm: 0 2px 8px rgba(139,92,246,0.08); --shadow-md: 0 8px 24px rgba(139,92,246,0.12); --shadow-lg: 0 16px 48px rgba(139,92,246,0.16); --navbar-bg: #7c3aed; --navbar-text: #fff; --body-bg: linear-gradient(135deg, #faf5ff 0%, #fce7f3 50%, #fff7ed 100%); --accent-gradient: linear-gradient(120deg, #8b5cf6 0%, #f97316 100%); --scrollbar-thumb: #8b5cf6; } /* =========================================================== LIFESTYLE — Lumen Glow (data-theme="lumen_glow") Sleek, futuristic vibe for parties or weddings =========================================================== */ [data-theme="lumen_glow"] { --primary-color: #f59e0b; --primary-dark: #d97706; --primary-light: #fef3c7; --secondary-color: #fbbf24; --success-color: #34d399; --danger-color: #f87171; --warning-color: #fcd34d; --info-color: #fde68a; --glass-bg: rgba(255,255,255,0.78); --glass-blur: 18px; --bg-primary: #fffbeb; --bg-secondary: #fef3c7; --text-primary: #451a03; --text-secondary: #78350f; --border-color: #fde68a; --shadow-sm: 0 2px 8px rgba(245,158,11,0.10); --shadow-md: 0 8px 24px rgba(245,158,11,0.14); --shadow-lg: 0 16px 48px rgba(245,158,11,0.18); --navbar-bg: #d97706; --navbar-text: #fff; --body-bg: linear-gradient(135deg, #fffbeb 0%, #fef3c7 50%, #fde68a 100%); --accent-gradient: linear-gradient(120deg, #f59e0b 0%, #fbbf24 100%); --scrollbar-thumb: #d97706; } /* =========================================================== LIFESTYLE — Urban Oasis (data-theme="urban_oasis") Modern city-meets-nature theme =========================================================== */ [data-theme="urban_oasis"] { --primary-color: #0d9488; --primary-dark: #0f766e; --primary-light: #99f6e4; --secondary-color: #64748b; --success-color: #22c55e; --danger-color: #ef4444; --warning-color: #eab308; --info-color: #2dd4bf; --glass-bg: rgba(255,255,255,0.74); --glass-blur: 16px; --bg-primary: #f0fdfa; --bg-secondary: #ccfbf1; --text-primary: #134e4a; --text-secondary: #475569; --border-color: #99f6e4; --shadow-sm: 0 2px 8px rgba(13,148,136,0.08); --shadow-md: 0 8px 24px rgba(13,148,136,0.12); --shadow-lg: 0 16px 48px rgba(13,148,136,0.16); --navbar-bg: #0f766e; --navbar-text: #fff; --body-bg: linear-gradient(135deg, #f0fdfa 0%, #e2e8f0 100%); --accent-gradient: linear-gradient(120deg, #0d9488 0%, #64748b 100%); --scrollbar-thumb: #0d9488; } /* =========================================================== LIFESTYLE — Velour Nights (data-theme="velour_nights") Chic, elegant evening concept =========================================================== */ [data-theme="velour_nights"] { --primary-color: #be185d; --primary-dark: #9d174d; --primary-light: #fce7f3; --secondary-color: #a855f7; --success-color: #4ade80; --danger-color: #fb7185; --warning-color: #fbbf24; --info-color: #f0abfc; --glass-bg: rgba(255,255,255,0.70); --glass-blur: 18px; --bg-primary: #fdf2f8; --bg-secondary: #fce7f3; --text-primary: #500724; --text-secondary: #831843; --border-color: #fbcfe8; --shadow-sm: 0 2px 8px rgba(190,24,93,0.08); --shadow-md: 0 8px 24px rgba(190,24,93,0.12); --shadow-lg: 0 16px 48px rgba(190,24,93,0.16); --navbar-bg: #9d174d; --navbar-text: #fff; --body-bg: linear-gradient(135deg, #fdf2f8 0%, #fae8ff 100%); --accent-gradient: linear-gradient(120deg, #be185d 0%, #a855f7 100%); --scrollbar-thumb: #be185d; } /* =========================================================== CREATIVE — NeoWave (data-theme="neowave") Art, design, or tech projects =========================================================== */ [data-theme="neowave"] { --primary-color: #06b6d4; --primary-dark: #0891b2; --primary-light: #cffafe; --secondary-color: #ec4899; --success-color: #22c55e; --danger-color: #f43f5e; --warning-color: #f59e0b; --info-color: #67e8f9; --glass-bg: rgba(255,255,255,0.72); --glass-blur: 16px; --bg-primary: #ecfeff; --bg-secondary: #cffafe; --text-primary: #164e63; --text-secondary: #155e75; --border-color: #a5f3fc; --shadow-sm: 0 2px 8px rgba(6,182,212,0.08); --shadow-md: 0 8px 24px rgba(6,182,212,0.12); --shadow-lg: 0 16px 48px rgba(6,182,212,0.16); --navbar-bg: #0891b2; --navbar-text: #fff; --body-bg: linear-gradient(135deg, #ecfeff 0%, #fce7f3 100%); --accent-gradient: linear-gradient(120deg, #06b6d4 0%, #ec4899 100%); --scrollbar-thumb: #06b6d4; } /* =========================================================== CREATIVE — Minimaluxe (data-theme="minimaluxe") Blending minimalism with luxury =========================================================== */ [data-theme="minimaluxe"] { --primary-color: #1e293b; --primary-dark: #0f172a; --primary-light: #e2e8f0; --secondary-color: #ca8a04; --success-color: #16a34a; --danger-color: #dc2626; --warning-color: #eab308; --info-color: #94a3b8; --glass-bg: rgba(255,255,255,0.85); --glass-blur: 12px; --bg-primary: #f8fafc; --bg-secondary: #f1f5f9; --text-primary: #0f172a; --text-secondary: #475569; --border-color: #e2e8f0; --shadow-sm: 0 1px 4px rgba(0,0,0,0.05); --shadow-md: 0 4px 16px rgba(0,0,0,0.08); --shadow-lg: 0 12px 40px rgba(0,0,0,0.12); --navbar-bg: #0f172a; --navbar-text: #f1f5f9; --body-bg: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); --accent-gradient: linear-gradient(120deg, #1e293b 0%, #ca8a04 100%); --scrollbar-thumb: #1e293b; } /* =========================================================== CREATIVE — Prism Shift (data-theme="prism_shift") Colorful, geometric inspiration =========================================================== */ [data-theme="prism_shift"] { --primary-color: #e11d48; --primary-dark: #be123c; --primary-light: #ffe4e6; --secondary-color: #7c3aed; --success-color: #10b981; --danger-color: #ef4444; --warning-color: #f59e0b; --info-color: #06b6d4; --glass-bg: rgba(255,255,255,0.72); --glass-blur: 16px; --bg-primary: #fff1f2; --bg-secondary: #ffe4e6; --text-primary: #4c0519; --text-secondary: #881337; --border-color: #fecdd3; --shadow-sm: 0 2px 8px rgba(225,29,72,0.08); --shadow-md: 0 8px 24px rgba(225,29,72,0.12); --shadow-lg: 0 16px 48px rgba(225,29,72,0.16); --navbar-bg: #be123c; --navbar-text: #fff; --body-bg: linear-gradient(135deg, #fff1f2 0%, #ede9fe 50%, #ecfeff 100%); --accent-gradient: linear-gradient(120deg, #e11d48 0%, #7c3aed 50%, #06b6d4 100%); --scrollbar-thumb: #e11d48; } /* =========================================================== WRITING — EchoVerse (data-theme="echoverse") Modern sci-fi or fantasy theme =========================================================== */ [data-theme="echoverse"] { --primary-color: #6366f1; --primary-dark: #4f46e5; --primary-light: #e0e7ff; --secondary-color: #06b6d4; --success-color: #22c55e; --danger-color: #ef4444; --warning-color: #eab308; --info-color: #818cf8; --glass-bg: rgba(255,255,255,0.68); --glass-blur: 18px; --bg-primary: #eef2ff; --bg-secondary: #e0e7ff; --text-primary: #1e1b4b; --text-secondary: #3730a3; --border-color: #c7d2fe; --shadow-sm: 0 2px 8px rgba(99,102,241,0.10); --shadow-md: 0 8px 24px rgba(99,102,241,0.14); --shadow-lg: 0 16px 48px rgba(99,102,241,0.18); --navbar-bg: #4338ca; --navbar-text: #fff; --body-bg: linear-gradient(135deg, #eef2ff 0%, #e0f2fe 100%); --accent-gradient: linear-gradient(120deg, #6366f1 0%, #06b6d4 100%); --scrollbar-thumb: #6366f1; } /* =========================================================== WRITING — Glass Horizon (data-theme="glass_horizon") Contemporary dystopian or futuristic setting =========================================================== */ [data-theme="glass_horizon"] { --primary-color: #64748b; --primary-dark: #475569; --primary-light: #e2e8f0; --secondary-color: #38bdf8; --success-color: #22c55e; --danger-color: #ef4444; --warning-color: #fbbf24; --info-color: #7dd3fc; --glass-bg: rgba(255,255,255,0.65); --glass-blur: 20px; --bg-primary: #f8fafc; --bg-secondary: #f1f5f9; --text-primary: #1e293b; --text-secondary: #64748b; --border-color: #cbd5e1; --shadow-sm: 0 1px 6px rgba(100,116,139,0.08); --shadow-md: 0 6px 20px rgba(100,116,139,0.12); --shadow-lg: 0 14px 44px rgba(100,116,139,0.16); --navbar-bg: #334155; --navbar-text: #f1f5f9; --body-bg: linear-gradient(135deg, #f8fafc 0%, #e0f2fe 100%); --accent-gradient: linear-gradient(120deg, #64748b 0%, #38bdf8 100%); --scrollbar-thumb: #64748b; } /* =========================================================== WRITING — Pulse Noir (data-theme="pulse_noir") Edgy detective or thriller vibe =========================================================== */ [data-theme="pulse_noir"] { --primary-color: #dc2626; --primary-dark: #b91c1c; --primary-light: #fecaca; --secondary-color: #1e293b; --success-color: #16a34a; --danger-color: #ef4444; --warning-color: #f59e0b; --info-color: #fca5a5; --glass-bg: rgba(255,255,255,0.78); --glass-blur: 14px; --bg-primary: #fef2f2; --bg-secondary: #fee2e2; --text-primary: #1c1917; --text-secondary: #44403c; --border-color: #fecaca; --shadow-sm: 0 2px 6px rgba(220,38,38,0.08); --shadow-md: 0 6px 20px rgba(220,38,38,0.12); --shadow-lg: 0 14px 44px rgba(220,38,38,0.16); --navbar-bg: #1c1917; --navbar-text: #fef2f2; --body-bg: linear-gradient(135deg, #fef2f2 0%, #f5f5f4 100%); --accent-gradient: linear-gradient(120deg, #dc2626 0%, #1e293b 100%); --scrollbar-thumb: #dc2626; } /* =========================================================== TECH — Circuit Dreams (data-theme="circuit_dreams") Modern tech-inspired theme =========================================================== */ [data-theme="circuit_dreams"] { --primary-color: #2563eb; --primary-dark: #1d4ed8; --primary-light: #dbeafe; --secondary-color: #0ea5e9; --success-color: #22c55e; --danger-color: #ef4444; --warning-color: #f59e0b; --info-color: #60a5fa; --glass-bg: rgba(255,255,255,0.75); --glass-blur: 16px; --bg-primary: #eff6ff; --bg-secondary: #dbeafe; --text-primary: #1e3a5f; --text-secondary: #1e40af; --border-color: #bfdbfe; --shadow-sm: 0 2px 8px rgba(37,99,235,0.08); --shadow-md: 0 8px 24px rgba(37,99,235,0.12); --shadow-lg: 0 16px 48px rgba(37,99,235,0.16); --navbar-bg: #1e3a8a; --navbar-text: #fff; --body-bg: linear-gradient(135deg, #eff6ff 0%, #e0f2fe 100%); --accent-gradient: linear-gradient(120deg, #2563eb 0%, #0ea5e9 100%); --scrollbar-thumb: #2563eb; } /* =========================================================== TECH — Cloudline (data-theme="cloudline") Sleek SaaS or app branding =========================================================== */ [data-theme="cloudline"] { --primary-color: #0284c7; --primary-dark: #0369a1; --primary-light: #e0f2fe; --secondary-color: #8b5cf6; --success-color: #22c55e; --danger-color: #ef4444; --warning-color: #f59e0b; --info-color: #38bdf8; --glass-bg: rgba(255,255,255,0.80); --glass-blur: 14px; --bg-primary: #f0f9ff; --bg-secondary: #e0f2fe; --text-primary: #0c4a6e; --text-secondary: #075985; --border-color: #bae6fd; --shadow-sm: 0 2px 8px rgba(2,132,199,0.08); --shadow-md: 0 8px 24px rgba(2,132,199,0.12); --shadow-lg: 0 16px 48px rgba(2,132,199,0.14); --navbar-bg: #0369a1; --navbar-text: #fff; --body-bg: linear-gradient(135deg, #f0f9ff 0%, #faf5ff 100%); --accent-gradient: linear-gradient(120deg, #0284c7 0%, #8b5cf6 100%); --scrollbar-thumb: #0284c7; } /* =========================================================== TECH — Quantum Flow (data-theme="quantum_flow") Futuristic AI or data-driven projects =========================================================== */ [data-theme="quantum_flow"] { --primary-color: #4f46e5; --primary-dark: #4338ca; --primary-light: #e0e7ff; --secondary-color: #10b981; --success-color: #34d399; --danger-color: #f43f5e; --warning-color: #fbbf24; --info-color: #818cf8; --glass-bg: rgba(255,255,255,0.70); --glass-blur: 18px; --bg-primary: #eef2ff; --bg-secondary: #e0e7ff; --text-primary: #1e1b4b; --text-secondary: #312e81; --border-color: #c7d2fe; --shadow-sm: 0 2px 8px rgba(79,70,229,0.10); --shadow-md: 0 8px 24px rgba(79,70,229,0.14); --shadow-lg: 0 16px 48px rgba(79,70,229,0.18); --navbar-bg: #3730a3; --navbar-text: #fff; --body-bg: linear-gradient(135deg, #eef2ff 0%, #d1fae5 100%); --accent-gradient: linear-gradient(120deg, #4f46e5 0%, #10b981 100%); --scrollbar-thumb: #4f46e5; } /* =========================================================== PER-THEME OVERRIDES — Generated for each non-default theme navbar, buttons, badges, hero, links, form-focus, tabs, stat =========================================================== */ /* --- Macro: theme-specific overrides --- */ /* Emerald */ [data-theme="emerald"] .navbar.bg-primary, [data-theme="emerald"] .navbar-dark.bg-primary { background: linear-gradient(90deg, #059669 0%, #10b981 100%) !important; } [data-theme="emerald"] .btn-primary { background: linear-gradient(90deg, #10b981 60%, #a7f3d0 100%); border: none; } [data-theme="emerald"] .btn-primary:hover { background: linear-gradient(90deg, #059669 60%, #10b981 100%); } [data-theme="emerald"] .btn-outline-primary { color: #10b981; border-color: #10b981; } [data-theme="emerald"] .btn-outline-primary:hover { background: #10b981; border-color: #10b981; color: #fff; } [data-theme="emerald"] .bg-primary { background-color: #10b981 !important; } [data-theme="emerald"] .text-primary { color: #10b981 !important; } [data-theme="emerald"] .border-primary { border-color: #10b981 !important; } [data-theme="emerald"] .hero-section { background: linear-gradient(120deg, #10b981 60%, #059669 100%); } [data-theme="emerald"] .progress-bar.bg-primary { background-color: #10b981 !important; } [data-theme="emerald"] .nav-tabs .nav-link.active { color: #10b981; border-bottom-color: #10b981; } [data-theme="emerald"] .nav-tabs .nav-link:hover { color: #059669; } [data-theme="emerald"] a { color: #10b981; } [data-theme="emerald"] a:hover { color: #059669; } [data-theme="emerald"] .form-control:focus { border-color: #10b981; box-shadow: 0 0 0 .2rem rgba(16,185,129,.18); } [data-theme="emerald"] .stat-card .stat-value { color: #10b981; } /* Sunset */ [data-theme="sunset"] .navbar.bg-primary, [data-theme="sunset"] .navbar-dark.bg-primary { background: linear-gradient(90deg, #7c3aed 0%, #a855f7 50%, #f97316 100%) !important; } [data-theme="sunset"] .btn-primary { background: linear-gradient(90deg, #8b5cf6 40%, #f97316 100%); border: none; } [data-theme="sunset"] .btn-primary:hover { background: linear-gradient(90deg, #6d28d9 40%, #ea580c 100%); } [data-theme="sunset"] .btn-outline-primary { color: #8b5cf6; border-color: #8b5cf6; } [data-theme="sunset"] .btn-outline-primary:hover { background: #8b5cf6; border-color: #8b5cf6; color: #fff; } [data-theme="sunset"] .bg-primary { background-color: #8b5cf6 !important; } [data-theme="sunset"] .text-primary { color: #8b5cf6 !important; } [data-theme="sunset"] .border-primary { border-color: #8b5cf6 !important; } [data-theme="sunset"] .hero-section { background: linear-gradient(120deg, #8b5cf6 30%, #f97316 100%); } [data-theme="sunset"] .progress-bar.bg-primary { background-color: #8b5cf6 !important; } [data-theme="sunset"] .nav-tabs .nav-link.active { color: #8b5cf6; border-bottom-color: #8b5cf6; } [data-theme="sunset"] .nav-tabs .nav-link:hover { color: #6d28d9; } [data-theme="sunset"] a { color: #8b5cf6; } [data-theme="sunset"] a:hover { color: #6d28d9; } [data-theme="sunset"] .form-control:focus { border-color: #8b5cf6; box-shadow: 0 0 0 .2rem rgba(139,92,246,.18); } [data-theme="sunset"] .stat-card .stat-value { color: #8b5cf6; } /* Lumen Glow */ [data-theme="lumen_glow"] .navbar.bg-primary, [data-theme="lumen_glow"] .navbar-dark.bg-primary { background: linear-gradient(90deg, #d97706 0%, #f59e0b 100%) !important; } [data-theme="lumen_glow"] .btn-primary { background: linear-gradient(90deg, #f59e0b 60%, #fef3c7 100%); border: none; color: #451a03; } [data-theme="lumen_glow"] .btn-primary:hover { background: linear-gradient(90deg, #d97706 60%, #f59e0b 100%); color: #fff; } [data-theme="lumen_glow"] .btn-outline-primary { color: #d97706; border-color: #d97706; } [data-theme="lumen_glow"] .btn-outline-primary:hover { background: #d97706; border-color: #d97706; color: #fff; } [data-theme="lumen_glow"] .bg-primary { background-color: #f59e0b !important; } [data-theme="lumen_glow"] .text-primary { color: #d97706 !important; } [data-theme="lumen_glow"] .border-primary { border-color: #f59e0b !important; } [data-theme="lumen_glow"] .hero-section { background: linear-gradient(120deg, #f59e0b 60%, #d97706 100%); } [data-theme="lumen_glow"] .progress-bar.bg-primary { background-color: #f59e0b !important; } [data-theme="lumen_glow"] .nav-tabs .nav-link.active { color: #d97706; border-bottom-color: #d97706; } [data-theme="lumen_glow"] .nav-tabs .nav-link:hover { color: #92400e; } [data-theme="lumen_glow"] a { color: #d97706; } [data-theme="lumen_glow"] a:hover { color: #92400e; } [data-theme="lumen_glow"] .form-control:focus { border-color: #f59e0b; box-shadow: 0 0 0 .2rem rgba(245,158,11,.18); } [data-theme="lumen_glow"] .stat-card .stat-value { color: #d97706; } /* Urban Oasis */ [data-theme="urban_oasis"] .navbar.bg-primary, [data-theme="urban_oasis"] .navbar-dark.bg-primary { background: linear-gradient(90deg, #0f766e 0%, #0d9488 100%) !important; } [data-theme="urban_oasis"] .btn-primary { background: linear-gradient(90deg, #0d9488 60%, #99f6e4 100%); border: none; } [data-theme="urban_oasis"] .btn-primary:hover { background: linear-gradient(90deg, #0f766e 60%, #0d9488 100%); } [data-theme="urban_oasis"] .btn-outline-primary { color: #0d9488; border-color: #0d9488; } [data-theme="urban_oasis"] .btn-outline-primary:hover { background: #0d9488; border-color: #0d9488; color: #fff; } [data-theme="urban_oasis"] .bg-primary { background-color: #0d9488 !important; } [data-theme="urban_oasis"] .text-primary { color: #0d9488 !important; } [data-theme="urban_oasis"] .border-primary { border-color: #0d9488 !important; } [data-theme="urban_oasis"] .hero-section { background: linear-gradient(120deg, #0d9488 60%, #64748b 100%); } [data-theme="urban_oasis"] .progress-bar.bg-primary { background-color: #0d9488 !important; } [data-theme="urban_oasis"] .nav-tabs .nav-link.active { color: #0d9488; border-bottom-color: #0d9488; } [data-theme="urban_oasis"] .nav-tabs .nav-link:hover { color: #0f766e; } [data-theme="urban_oasis"] a { color: #0d9488; } [data-theme="urban_oasis"] a:hover { color: #0f766e; } [data-theme="urban_oasis"] .form-control:focus { border-color: #0d9488; box-shadow: 0 0 0 .2rem rgba(13,148,136,.18); } [data-theme="urban_oasis"] .stat-card .stat-value { color: #0d9488; } /* Velour Nights */ [data-theme="velour_nights"] .navbar.bg-primary, [data-theme="velour_nights"] .navbar-dark.bg-primary { background: linear-gradient(90deg, #9d174d 0%, #be185d 50%, #a855f7 100%) !important; } [data-theme="velour_nights"] .btn-primary { background: linear-gradient(90deg, #be185d 50%, #a855f7 100%); border: none; } [data-theme="velour_nights"] .btn-primary:hover { background: linear-gradient(90deg, #9d174d 50%, #7c3aed 100%); } [data-theme="velour_nights"] .btn-outline-primary { color: #be185d; border-color: #be185d; } [data-theme="velour_nights"] .btn-outline-primary:hover { background: #be185d; border-color: #be185d; color: #fff; } [data-theme="velour_nights"] .bg-primary { background-color: #be185d !important; } [data-theme="velour_nights"] .text-primary { color: #be185d !important; } [data-theme="velour_nights"] .border-primary { border-color: #be185d !important; } [data-theme="velour_nights"] .hero-section { background: linear-gradient(120deg, #be185d 40%, #a855f7 100%); } [data-theme="velour_nights"] .progress-bar.bg-primary { background-color: #be185d !important; } [data-theme="velour_nights"] .nav-tabs .nav-link.active { color: #be185d; border-bottom-color: #be185d; } [data-theme="velour_nights"] .nav-tabs .nav-link:hover { color: #9d174d; } [data-theme="velour_nights"] a { color: #be185d; } [data-theme="velour_nights"] a:hover { color: #9d174d; } [data-theme="velour_nights"] .form-control:focus { border-color: #be185d; box-shadow: 0 0 0 .2rem rgba(190,24,93,.18); } [data-theme="velour_nights"] .stat-card .stat-value { color: #be185d; } /* NeoWave */ [data-theme="neowave"] .navbar.bg-primary, [data-theme="neowave"] .navbar-dark.bg-primary { background: linear-gradient(90deg, #0891b2 0%, #06b6d4 50%, #ec4899 100%) !important; } [data-theme="neowave"] .btn-primary { background: linear-gradient(90deg, #06b6d4 50%, #ec4899 100%); border: none; } [data-theme="neowave"] .btn-primary:hover { background: linear-gradient(90deg, #0891b2 50%, #db2777 100%); } [data-theme="neowave"] .btn-outline-primary { color: #06b6d4; border-color: #06b6d4; } [data-theme="neowave"] .btn-outline-primary:hover { background: #06b6d4; border-color: #06b6d4; color: #fff; } [data-theme="neowave"] .bg-primary { background-color: #06b6d4 !important; } [data-theme="neowave"] .text-primary { color: #06b6d4 !important; } [data-theme="neowave"] .border-primary { border-color: #06b6d4 !important; } [data-theme="neowave"] .hero-section { background: linear-gradient(120deg, #06b6d4 40%, #ec4899 100%); } [data-theme="neowave"] .progress-bar.bg-primary { background-color: #06b6d4 !important; } [data-theme="neowave"] .nav-tabs .nav-link.active { color: #06b6d4; border-bottom-color: #06b6d4; } [data-theme="neowave"] .nav-tabs .nav-link:hover { color: #0891b2; } [data-theme="neowave"] a { color: #06b6d4; } [data-theme="neowave"] a:hover { color: #0891b2; } [data-theme="neowave"] .form-control:focus { border-color: #06b6d4; box-shadow: 0 0 0 .2rem rgba(6,182,212,.18); } [data-theme="neowave"] .stat-card .stat-value { color: #06b6d4; } /* Minimaluxe */ [data-theme="minimaluxe"] .navbar.bg-primary, [data-theme="minimaluxe"] .navbar-dark.bg-primary { background: linear-gradient(90deg, #0f172a 0%, #1e293b 100%) !important; } [data-theme="minimaluxe"] .btn-primary { background: linear-gradient(90deg, #1e293b 60%, #ca8a04 100%); border: none; } [data-theme="minimaluxe"] .btn-primary:hover { background: linear-gradient(90deg, #0f172a 60%, #a16207 100%); } [data-theme="minimaluxe"] .btn-outline-primary { color: #1e293b; border-color: #1e293b; } [data-theme="minimaluxe"] .btn-outline-primary:hover { background: #1e293b; border-color: #1e293b; color: #fff; } [data-theme="minimaluxe"] .bg-primary { background-color: #1e293b !important; } [data-theme="minimaluxe"] .text-primary { color: #1e293b !important; } [data-theme="minimaluxe"] .border-primary { border-color: #1e293b !important; } [data-theme="minimaluxe"] .hero-section { background: linear-gradient(120deg, #1e293b 60%, #ca8a04 100%); } [data-theme="minimaluxe"] .progress-bar.bg-primary { background-color: #1e293b !important; } [data-theme="minimaluxe"] .nav-tabs .nav-link.active { color: #1e293b; border-bottom-color: #ca8a04; } [data-theme="minimaluxe"] .nav-tabs .nav-link:hover { color: #0f172a; } [data-theme="minimaluxe"] a { color: #1e293b; } [data-theme="minimaluxe"] a:hover { color: #0f172a; } [data-theme="minimaluxe"] .form-control:focus { border-color: #1e293b; box-shadow: 0 0 0 .2rem rgba(30,41,59,.18); } [data-theme="minimaluxe"] .stat-card .stat-value { color: #ca8a04; } /* Prism Shift */ [data-theme="prism_shift"] .navbar.bg-primary, [data-theme="prism_shift"] .navbar-dark.bg-primary { background: linear-gradient(90deg, #be123c 0%, #7c3aed 50%, #06b6d4 100%) !important; } [data-theme="prism_shift"] .btn-primary { background: linear-gradient(90deg, #e11d48 30%, #7c3aed 65%, #06b6d4 100%); border: none; } [data-theme="prism_shift"] .btn-primary:hover { background: linear-gradient(90deg, #be123c 30%, #6d28d9 65%, #0891b2 100%); } [data-theme="prism_shift"] .btn-outline-primary { color: #e11d48; border-color: #e11d48; } [data-theme="prism_shift"] .btn-outline-primary:hover { background: #e11d48; border-color: #e11d48; color: #fff; } [data-theme="prism_shift"] .bg-primary { background-color: #e11d48 !important; } [data-theme="prism_shift"] .text-primary { color: #e11d48 !important; } [data-theme="prism_shift"] .border-primary { border-color: #e11d48 !important; } [data-theme="prism_shift"] .hero-section { background: linear-gradient(120deg, #e11d48 20%, #7c3aed 60%, #06b6d4 100%); } [data-theme="prism_shift"] .progress-bar.bg-primary { background-color: #e11d48 !important; } [data-theme="prism_shift"] .nav-tabs .nav-link.active { color: #e11d48; border-bottom-color: #e11d48; } [data-theme="prism_shift"] .nav-tabs .nav-link:hover { color: #be123c; } [data-theme="prism_shift"] a { color: #e11d48; } [data-theme="prism_shift"] a:hover { color: #be123c; } [data-theme="prism_shift"] .form-control:focus { border-color: #e11d48; box-shadow: 0 0 0 .2rem rgba(225,29,72,.18); } [data-theme="prism_shift"] .stat-card .stat-value { color: #e11d48; } /* EchoVerse */ [data-theme="echoverse"] .navbar.bg-primary, [data-theme="echoverse"] .navbar-dark.bg-primary { background: linear-gradient(90deg, #4338ca 0%, #6366f1 50%, #06b6d4 100%) !important; } [data-theme="echoverse"] .btn-primary { background: linear-gradient(90deg, #6366f1 50%, #06b6d4 100%); border: none; } [data-theme="echoverse"] .btn-primary:hover { background: linear-gradient(90deg, #4f46e5 50%, #0891b2 100%); } [data-theme="echoverse"] .btn-outline-primary { color: #6366f1; border-color: #6366f1; } [data-theme="echoverse"] .btn-outline-primary:hover { background: #6366f1; border-color: #6366f1; color: #fff; } [data-theme="echoverse"] .bg-primary { background-color: #6366f1 !important; } [data-theme="echoverse"] .text-primary { color: #6366f1 !important; } [data-theme="echoverse"] .border-primary { border-color: #6366f1 !important; } [data-theme="echoverse"] .hero-section { background: linear-gradient(120deg, #6366f1 50%, #06b6d4 100%); } [data-theme="echoverse"] .progress-bar.bg-primary { background-color: #6366f1 !important; } [data-theme="echoverse"] .nav-tabs .nav-link.active { color: #6366f1; border-bottom-color: #6366f1; } [data-theme="echoverse"] .nav-tabs .nav-link:hover { color: #4f46e5; } [data-theme="echoverse"] a { color: #6366f1; } [data-theme="echoverse"] a:hover { color: #4f46e5; } [data-theme="echoverse"] .form-control:focus { border-color: #6366f1; box-shadow: 0 0 0 .2rem rgba(99,102,241,.18); } [data-theme="echoverse"] .stat-card .stat-value { color: #6366f1; } /* Glass Horizon */ [data-theme="glass_horizon"] .navbar.bg-primary, [data-theme="glass_horizon"] .navbar-dark.bg-primary { background: linear-gradient(90deg, #334155 0%, #64748b 100%) !important; } [data-theme="glass_horizon"] .btn-primary { background: linear-gradient(90deg, #64748b 60%, #38bdf8 100%); border: none; } [data-theme="glass_horizon"] .btn-primary:hover { background: linear-gradient(90deg, #475569 60%, #0ea5e9 100%); } [data-theme="glass_horizon"] .btn-outline-primary { color: #64748b; border-color: #64748b; } [data-theme="glass_horizon"] .btn-outline-primary:hover { background: #64748b; border-color: #64748b; color: #fff; } [data-theme="glass_horizon"] .bg-primary { background-color: #64748b !important; } [data-theme="glass_horizon"] .text-primary { color: #64748b !important; } [data-theme="glass_horizon"] .border-primary { border-color: #64748b !important; } [data-theme="glass_horizon"] .hero-section { background: linear-gradient(120deg, #64748b 60%, #38bdf8 100%); } [data-theme="glass_horizon"] .progress-bar.bg-primary { background-color: #64748b !important; } [data-theme="glass_horizon"] .nav-tabs .nav-link.active { color: #64748b; border-bottom-color: #38bdf8; } [data-theme="glass_horizon"] .nav-tabs .nav-link:hover { color: #475569; } [data-theme="glass_horizon"] a { color: #64748b; } [data-theme="glass_horizon"] a:hover { color: #475569; } [data-theme="glass_horizon"] .form-control:focus { border-color: #64748b; box-shadow: 0 0 0 .2rem rgba(100,116,139,.18); } [data-theme="glass_horizon"] .stat-card .stat-value { color: #38bdf8; } /* Pulse Noir */ [data-theme="pulse_noir"] .navbar.bg-primary, [data-theme="pulse_noir"] .navbar-dark.bg-primary { background: linear-gradient(90deg, #1c1917 0%, #292524 50%, #dc2626 100%) !important; } [data-theme="pulse_noir"] .btn-primary { background: linear-gradient(90deg, #dc2626 60%, #1e293b 100%); border: none; } [data-theme="pulse_noir"] .btn-primary:hover { background: linear-gradient(90deg, #b91c1c 60%, #0f172a 100%); } [data-theme="pulse_noir"] .btn-outline-primary { color: #dc2626; border-color: #dc2626; } [data-theme="pulse_noir"] .btn-outline-primary:hover { background: #dc2626; border-color: #dc2626; color: #fff; } [data-theme="pulse_noir"] .bg-primary { background-color: #dc2626 !important; } [data-theme="pulse_noir"] .text-primary { color: #dc2626 !important; } [data-theme="pulse_noir"] .border-primary { border-color: #dc2626 !important; } [data-theme="pulse_noir"] .hero-section { background: linear-gradient(120deg, #1c1917 40%, #dc2626 100%); } [data-theme="pulse_noir"] .progress-bar.bg-primary { background-color: #dc2626 !important; } [data-theme="pulse_noir"] .nav-tabs .nav-link.active { color: #dc2626; border-bottom-color: #dc2626; } [data-theme="pulse_noir"] .nav-tabs .nav-link:hover { color: #b91c1c; } [data-theme="pulse_noir"] a { color: #dc2626; } [data-theme="pulse_noir"] a:hover { color: #b91c1c; } [data-theme="pulse_noir"] .form-control:focus { border-color: #dc2626; box-shadow: 0 0 0 .2rem rgba(220,38,38,.18); } [data-theme="pulse_noir"] .stat-card .stat-value { color: #dc2626; } /* Circuit Dreams */ [data-theme="circuit_dreams"] .navbar.bg-primary, [data-theme="circuit_dreams"] .navbar-dark.bg-primary { background: linear-gradient(90deg, #1e3a8a 0%, #2563eb 100%) !important; } [data-theme="circuit_dreams"] .btn-primary { background: linear-gradient(90deg, #2563eb 60%, #0ea5e9 100%); border: none; } [data-theme="circuit_dreams"] .btn-primary:hover { background: linear-gradient(90deg, #1d4ed8 60%, #0284c7 100%); } [data-theme="circuit_dreams"] .btn-outline-primary { color: #2563eb; border-color: #2563eb; } [data-theme="circuit_dreams"] .btn-outline-primary:hover { background: #2563eb; border-color: #2563eb; color: #fff; } [data-theme="circuit_dreams"] .bg-primary { background-color: #2563eb !important; } [data-theme="circuit_dreams"] .text-primary { color: #2563eb !important; } [data-theme="circuit_dreams"] .border-primary { border-color: #2563eb !important; } [data-theme="circuit_dreams"] .hero-section { background: linear-gradient(120deg, #2563eb 60%, #0ea5e9 100%); } [data-theme="circuit_dreams"] .progress-bar.bg-primary { background-color: #2563eb !important; } [data-theme="circuit_dreams"] .nav-tabs .nav-link.active { color: #2563eb; border-bottom-color: #2563eb; } [data-theme="circuit_dreams"] .nav-tabs .nav-link:hover { color: #1d4ed8; } [data-theme="circuit_dreams"] a { color: #2563eb; } [data-theme="circuit_dreams"] a:hover { color: #1d4ed8; } [data-theme="circuit_dreams"] .form-control:focus { border-color: #2563eb; box-shadow: 0 0 0 .2rem rgba(37,99,235,.18); } [data-theme="circuit_dreams"] .stat-card .stat-value { color: #2563eb; } /* Cloudline */ [data-theme="cloudline"] .navbar.bg-primary, [data-theme="cloudline"] .navbar-dark.bg-primary { background: linear-gradient(90deg, #0369a1 0%, #0284c7 50%, #8b5cf6 100%) !important; } [data-theme="cloudline"] .btn-primary { background: linear-gradient(90deg, #0284c7 60%, #8b5cf6 100%); border: none; } [data-theme="cloudline"] .btn-primary:hover { background: linear-gradient(90deg, #0369a1 60%, #7c3aed 100%); } [data-theme="cloudline"] .btn-outline-primary { color: #0284c7; border-color: #0284c7; } [data-theme="cloudline"] .btn-outline-primary:hover { background: #0284c7; border-color: #0284c7; color: #fff; } [data-theme="cloudline"] .bg-primary { background-color: #0284c7 !important; } [data-theme="cloudline"] .text-primary { color: #0284c7 !important; } [data-theme="cloudline"] .border-primary { border-color: #0284c7 !important; } [data-theme="cloudline"] .hero-section { background: linear-gradient(120deg, #0284c7 60%, #8b5cf6 100%); } [data-theme="cloudline"] .progress-bar.bg-primary { background-color: #0284c7 !important; } [data-theme="cloudline"] .nav-tabs .nav-link.active { color: #0284c7; border-bottom-color: #0284c7; } [data-theme="cloudline"] .nav-tabs .nav-link:hover { color: #0369a1; } [data-theme="cloudline"] a { color: #0284c7; } [data-theme="cloudline"] a:hover { color: #0369a1; } [data-theme="cloudline"] .form-control:focus { border-color: #0284c7; box-shadow: 0 0 0 .2rem rgba(2,132,199,.18); } [data-theme="cloudline"] .stat-card .stat-value { color: #0284c7; } /* Quantum Flow */ [data-theme="quantum_flow"] .navbar.bg-primary, [data-theme="quantum_flow"] .navbar-dark.bg-primary { background: linear-gradient(90deg, #3730a3 0%, #4f46e5 50%, #10b981 100%) !important; } [data-theme="quantum_flow"] .btn-primary { background: linear-gradient(90deg, #4f46e5 50%, #10b981 100%); border: none; } [data-theme="quantum_flow"] .btn-primary:hover { background: linear-gradient(90deg, #4338ca 50%, #059669 100%); } [data-theme="quantum_flow"] .btn-outline-primary { color: #4f46e5; border-color: #4f46e5; } [data-theme="quantum_flow"] .btn-outline-primary:hover { background: #4f46e5; border-color: #4f46e5; color: #fff; } [data-theme="quantum_flow"] .bg-primary { background-color: #4f46e5 !important; } [data-theme="quantum_flow"] .text-primary { color: #4f46e5 !important; } [data-theme="quantum_flow"] .border-primary { border-color: #4f46e5 !important; } [data-theme="quantum_flow"] .hero-section { background: linear-gradient(120deg, #4f46e5 50%, #10b981 100%); } [data-theme="quantum_flow"] .progress-bar.bg-primary { background-color: #4f46e5 !important; } [data-theme="quantum_flow"] .nav-tabs .nav-link.active { color: #4f46e5; border-bottom-color: #4f46e5; } [data-theme="quantum_flow"] .nav-tabs .nav-link:hover { color: #4338ca; } [data-theme="quantum_flow"] a { color: #4f46e5; } [data-theme="quantum_flow"] a:hover { color: #4338ca; } [data-theme="quantum_flow"] .form-control:focus { border-color: #4f46e5; box-shadow: 0 0 0 .2rem rgba(79,70,229,.18); } [data-theme="quantum_flow"] .stat-card .stat-value { color: #4f46e5; } /* =========================================================== COMMON — Body background driven by theme variable =========================================================== */ body[data-theme] { background: var(--body-bg); } body[data-theme] ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); } body[data-theme] ::-webkit-scrollbar-thumb:hover { background: var(--primary-color); } body[data-theme] .navbar-dark .nav-link, body[data-theme] .navbar-dark .navbar-brand { color: var(--navbar-text) !important; } body[data-theme] .card:hover { box-shadow: var(--shadow-lg); } body[data-theme] .footer { background: var(--glass-bg); border-top-color: var(--border-color); } /* =========================================================== UNIVERSAL — Bootstrap class overrides using CSS variables These apply to ALL themes automatically =========================================================== */ /* --- Backgrounds --- */ body[data-theme] .bg-primary { background-color: var(--primary-color) !important; } body[data-theme] .bg-secondary { background-color: var(--bg-secondary) !important; } /* --- Text --- */ body[data-theme] .text-primary { color: var(--primary-color) !important; } /* --- Borders --- */ body[data-theme] .border-primary { border-color: var(--primary-color) !important; } /* --- Buttons --- */ body[data-theme] .btn-primary { background: var(--accent-gradient); border: none; color: #fff; } body[data-theme] .btn-primary:hover, body[data-theme] .btn-primary:focus { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-color) 35%, transparent); } body[data-theme] .btn-outline-primary { color: var(--primary-color); border-color: var(--primary-color); background: transparent; } body[data-theme] .btn-outline-primary:hover, body[data-theme] .btn-outline-primary:focus { background: var(--primary-color); border-color: var(--primary-color); color: #fff; } /* --- Links --- */ body[data-theme] a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item) { color: var(--primary-color); } body[data-theme] a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):hover { color: var(--primary-dark); } /* --- Badges --- */ body[data-theme] .badge.bg-primary { background-color: var(--primary-color) !important; } body[data-theme] .badge.bg-info { background-color: var(--info-color) !important; } body[data-theme] .badge.bg-success { background-color: var(--success-color) !important; } body[data-theme] .badge.bg-danger { background-color: var(--danger-color) !important; } body[data-theme] .badge.bg-warning { background-color: var(--warning-color) !important; } /* --- Progress bars --- */ body[data-theme] .progress-bar.bg-primary { background-color: var(--primary-color) !important; } body[data-theme] .progress-bar:not([class*="bg-"]) { background-color: var(--primary-color); } /* --- Alerts --- */ body[data-theme] .alert-primary { background: color-mix(in srgb, var(--primary-color) 12%, white); border-color: color-mix(in srgb, var(--primary-color) 25%, white); color: var(--primary-dark); } body[data-theme] .alert-info { background: color-mix(in srgb, var(--info-color) 12%, white); border-color: color-mix(in srgb, var(--info-color) 25%, white); color: color-mix(in srgb, var(--info-color) 50%, black); } /* --- Form controls --- */ body[data-theme] .form-control:focus { border-color: var(--primary-color); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--primary-color) 18%, transparent); } body[data-theme] .form-select:focus { border-color: var(--primary-color); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--primary-color) 18%, transparent); } body[data-theme] .form-check-input:checked { background-color: var(--primary-color); border-color: var(--primary-color); } /* --- Navs & Tabs --- */ body[data-theme] .nav-pills .nav-link.active { background-color: var(--primary-color); } body[data-theme] .nav-tabs .nav-link.active { color: var(--primary-color); border-bottom-color: var(--primary-color); } /* --- Cards & panels --- */ body[data-theme] .card { background: var(--glass-bg); border-color: var(--border-color); box-shadow: var(--shadow-sm); } /* --- Tables --- */ body[data-theme] .table thead th { border-bottom-color: var(--border-color); } body[data-theme] .table td, body[data-theme] .table th { border-color: var(--border-color); } body[data-theme] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: color-mix(in srgb, var(--primary-color) 3%, var(--bg-primary)); } body[data-theme] .table-hover > tbody > tr:hover > * { background-color: color-mix(in srgb, var(--primary-color) 6%, var(--bg-primary)); } /* --- Pagination --- */ body[data-theme] .page-item.active .page-link { background-color: var(--primary-color); border-color: var(--primary-color); } body[data-theme] .page-link { color: var(--primary-color); } body[data-theme] .page-link:hover { color: var(--primary-dark); } /* --- List groups --- */ body[data-theme] .list-group-item.active { background-color: var(--primary-color); border-color: var(--primary-color); } /* --- Dropdowns --- */ body[data-theme] .dropdown-item.active, body[data-theme] .dropdown-item:active { background-color: var(--primary-color); } /* --- Modals --- */ body[data-theme] .modal-header { background: var(--accent-gradient); color: #fff; border-bottom-color: var(--border-color); } body[data-theme] .modal-header .btn-close { filter: invert(1); } body[data-theme] .modal-content { background: var(--bg-primary); border-color: var(--border-color); } /* --- Spinner --- */ body[data-theme] .spinner-border.text-primary { color: var(--primary-color) !important; } /* --- Breadcrumb --- */ body[data-theme] .breadcrumb-item a { color: var(--primary-color); } body[data-theme] .breadcrumb-item.active { color: var(--text-secondary); } /* --- Hero section --- */ body[data-theme] .hero-section { background: var(--accent-gradient); } /* --- Page backgrounds --- */ body[data-theme] .content-wrapper, body[data-theme] main { background: transparent; } /* --- Stat cards --- */ body[data-theme] .stat-card { background: var(--glass-bg); box-shadow: var(--shadow-sm); } body[data-theme] .stat-card:hover { box-shadow: var(--shadow-md); } body[data-theme] .stat-card .stat-icon { background: color-mix(in srgb, var(--primary-color) 12%, transparent); color: var(--primary-color); } body[data-theme] .stat-card .stat-value { color: var(--primary-color); } /* --- Custom accent classes --- */ body[data-theme] .bg-purple { background-color: var(--secondary-color, #6f42c1) !important; } body[data-theme] .text-purple { color: var(--secondary-color, #6f42c1) !important; } /* --- Scrollbar track --- */ body[data-theme] ::-webkit-scrollbar-track { background: var(--bg-secondary); } /* ===================================================================== UNIFIED SIDEBAR THEME VARIABLES All sidebars (.admin-sidebar, .prop-sidebar) adapt to the selected theme automatically. Each theme declares --sidebar-bg and --sidebar-accent; shared overlay tokens are set on body/[data-theme]. ===================================================================== */ /* Default (dark navy) */ [data-theme="default"], body:not([data-theme]) { --sidebar-bg: #1a2035; --sidebar-accent: #7c9ef8; } /* Emerald */ [data-theme="emerald"] { --sidebar-bg: #065f46; --sidebar-accent: #6ee7b7; } /* Sunset */ [data-theme="sunset"] { --sidebar-bg: #5b21b6; --sidebar-accent: #c4b5fd; } /* Lumen Glow */ [data-theme="lumen_glow"] { --sidebar-bg: #92400e; --sidebar-accent: #fde68a; } /* Urban Oasis */ [data-theme="urban_oasis"] { --sidebar-bg: #134e4a; --sidebar-accent: #5eead4; } /* Velour Nights */ [data-theme="velour_nights"] { --sidebar-bg: #831843; --sidebar-accent: #f9a8d4; } /* NeoWave */ [data-theme="neowave"] { --sidebar-bg: #0c4a6e; --sidebar-accent: #7dd3fc; } /* Minimaluxe */ [data-theme="minimaluxe"] { --sidebar-bg: #0f172a; --sidebar-accent: #fbbf24; } /* Prism Shift */ [data-theme="prism_shift"] { --sidebar-bg: #881337; --sidebar-accent: #fda4af; } /* EchoVerse */ [data-theme="echoverse"] { --sidebar-bg: #312e81; --sidebar-accent: #a5b4fc; } /* Glass Horizon */ [data-theme="glass_horizon"] { --sidebar-bg: #1e293b; --sidebar-accent: #7dd3fc; } /* Pulse Noir */ [data-theme="pulse_noir"] { --sidebar-bg: #1c1917; --sidebar-accent: #fca5a5; } /* Circuit Dreams */ [data-theme="circuit_dreams"] { --sidebar-bg: #1e3a8a; --sidebar-accent: #93c5fd; } /* Cloudline */ [data-theme="cloudline"] { --sidebar-bg: #075985; --sidebar-accent: #7dd3fc; } /* Quantum Flow */ [data-theme="quantum_flow"] { --sidebar-bg: #1e1b4b; --sidebar-accent: #a5b4fc; } /* Shared overlay tokens — all sidebar-bg values are dark so white-based overlays work universally. Declared on body so they cascade everywhere. */ body, [data-theme], body:not([data-theme]) { --sidebar-text: rgba(255,255,255,0.72); --sidebar-text-bright: #fff; --sidebar-hover-bg: rgba(255,255,255,0.07); --sidebar-active-bg: rgba(255,255,255,0.14); --sidebar-border: rgba(255,255,255,0.10); --sidebar-tooltip-bg: #111827; }