/* =================================================== Theme System Switch via data-theme="xxx" on Default (no attr) = Neon Cyber =================================================== */ /* ===== Theme 1: Neon Cyber ===== */ :root, [data-theme="neon-cyber"] { --primary: #6C5CE7; --secondary: #00CEC9; --accent: #FD79A8; --bg: #0F172A; --bg-alt: #0a0f1e; --card: #111827; --text: #FFFFFF; --text-secondary: #9CA3AF; --text-muted: rgba(255,255,255,0.4); --text-faint: rgba(255,255,255,0.2); --border-line: rgba(255,255,255,0.04); --font-heading: 'Orbitron', sans-serif; --font-body: 'Roboto', sans-serif; --font-button: 'Rubik', sans-serif; --radius: 12px; --radius-lg: 16px; --radius-xl: 20px; --gradient: linear-gradient(135deg, #6C5CE7, #00CEC9); --glow-primary: rgba(108, 92, 231, 0.3); --glow-secondary: rgba(0, 206, 201, 0.15); --glow-accent: rgba(253, 121, 168, 0.06); --border-subtle: rgba(108, 92, 231, 0.15); --nav-bg: rgba(15, 23, 42, 0.85); --footer-bg: #0a0f1e; --hover-bg: rgba(108, 92, 231, 0.15); --badge-bg: rgba(108, 92, 231, 0.1); } /* ===== Theme 2: Ocean Breeze ===== */ [data-theme="ocean-breeze"] { --primary: #0EA5E9; --secondary: #06B6D4; --accent: #F59E0B; --bg: #0C1222; --bg-alt: #080e1a; --card: #0F1A2E; --text: #F0F9FF; --text-secondary: #7DD3FC; --text-muted: rgba(240,249,255,0.4); --text-faint: rgba(240,249,255,0.2); --border-line: rgba(255,255,255,0.04); --font-heading: 'Exo 2', sans-serif; --font-body: 'Inter', sans-serif; --font-button: 'Inter', sans-serif; --gradient: linear-gradient(135deg, #0EA5E9, #06B6D4); --glow-primary: rgba(14, 165, 233, 0.3); --glow-secondary: rgba(6, 182, 212, 0.15); --glow-accent: rgba(245, 158, 11, 0.06); --border-subtle: rgba(14, 165, 233, 0.12); --nav-bg: rgba(12, 18, 34, 0.88); --footer-bg: #080e1a; --hover-bg: rgba(14, 165, 233, 0.12); --badge-bg: rgba(14, 165, 233, 0.1); } /* ===== Theme 3: Sunset Flame ===== */ [data-theme="sunset-flame"] { --primary: #F97316; --secondary: #EF4444; --accent: #FBBF24; --bg: #1A0A00; --bg-alt: #120700; --card: #1F1108; --text: #FFF7ED; --text-secondary: #FDBA74; --text-muted: rgba(255,247,237,0.4); --text-faint: rgba(255,247,237,0.2); --border-line: rgba(255,255,255,0.04); --font-heading: 'Rajdhani', sans-serif; --font-body: 'Open Sans', sans-serif; --font-button: 'Open Sans', sans-serif; --gradient: linear-gradient(135deg, #F97316, #EF4444); --glow-primary: rgba(249, 115, 22, 0.3); --glow-secondary: rgba(239, 68, 68, 0.15); --glow-accent: rgba(251, 191, 36, 0.06); --border-subtle: rgba(249, 115, 22, 0.15); --nav-bg: rgba(26, 10, 0, 0.88); --footer-bg: #120700; --hover-bg: rgba(249, 115, 22, 0.12); --badge-bg: rgba(249, 115, 22, 0.1); } /* ===== Theme 4: Emerald Night ===== */ [data-theme="emerald-night"] { --primary: #10B981; --secondary: #34D399; --accent: #A78BFA; --bg: #021A0F; --bg-alt: #01120a; --card: #042F1C; --text: #ECFDF5; --text-secondary: #6EE7B7; --text-muted: rgba(236,253,245,0.4); --text-faint: rgba(236,253,245,0.2); --border-line: rgba(255,255,255,0.04); --font-heading: 'Chakra Petch', sans-serif; --font-body: 'Nunito Sans', sans-serif; --font-button: 'Nunito Sans', sans-serif; --gradient: linear-gradient(135deg, #10B981, #34D399); --glow-primary: rgba(16, 185, 129, 0.3); --glow-secondary: rgba(52, 211, 153, 0.15); --glow-accent: rgba(167, 139, 250, 0.06); --border-subtle: rgba(16, 185, 129, 0.12); --nav-bg: rgba(2, 26, 15, 0.88); --footer-bg: #01120a; --hover-bg: rgba(16, 185, 129, 0.12); --badge-bg: rgba(16, 185, 129, 0.1); } /* ===== Theme 5: Minimal Light ===== */ [data-theme="minimal-light"] { --primary: #4F46E5; --secondary: #7C3AED; --accent: #EC4899; --bg: #FFFFFF; --bg-alt: #F1F5F9; --card: #F8FAFC; --text: #0F172A; --text-secondary: #64748B; --text-muted: rgba(15,23,42,0.45); --text-faint: rgba(15,23,42,0.3); --border-line: rgba(15,23,42,0.08); --font-heading: 'Poppins', sans-serif; --font-body: 'Inter', sans-serif; --font-button: 'Inter', sans-serif; --gradient: linear-gradient(135deg, #4F46E5, #7C3AED); --glow-primary: rgba(79, 70, 229, 0.15); --glow-secondary: rgba(124, 58, 237, 0.08); --glow-accent: rgba(236, 72, 153, 0.06); --border-subtle: rgba(79, 70, 229, 0.12); --nav-bg: rgba(255, 255, 255, 0.92); --footer-bg: #F1F5F9; --hover-bg: rgba(79, 70, 229, 0.06); --badge-bg: rgba(79, 70, 229, 0.08); } /* ===== Theme 6: Sakura ===== */ [data-theme="sakura"] { --primary: #EC4899; --secondary: #F472B6; --accent: #8B5CF6; --bg: #1A0A14; --bg-alt: #12070e; --card: #24101C; --text: #FDF2F8; --text-secondary: #F9A8D4; --text-muted: rgba(253,242,248,0.4); --text-faint: rgba(253,242,248,0.2); --border-line: rgba(255,255,255,0.04); --font-heading: 'Quicksand', sans-serif; --font-body: 'DM Sans', sans-serif; --font-button: 'DM Sans', sans-serif; --gradient: linear-gradient(135deg, #EC4899, #8B5CF6); --glow-primary: rgba(236, 72, 153, 0.3); --glow-secondary: rgba(139, 92, 246, 0.15); --glow-accent: rgba(139, 92, 246, 0.06); --border-subtle: rgba(236, 72, 153, 0.15); --nav-bg: rgba(26, 10, 20, 0.88); --footer-bg: #12070e; --hover-bg: rgba(236, 72, 153, 0.12); --badge-bg: rgba(236, 72, 153, 0.1); } /* ===== Theme 7: Warm Sand (Light) ===== */ [data-theme="warm-sand"] { --primary: #D97706; --secondary: #B45309; --accent: #DC2626; --bg: #FFFBEB; --bg-alt: #FEF3C7; --card: #FFF7ED; --text: #1C1917; --text-secondary: #78716C; --text-muted: rgba(28,25,23,0.45); --text-faint: rgba(28,25,23,0.3); --border-line: rgba(28,25,23,0.08); --font-heading: 'Rajdhani', sans-serif; --font-body: 'Open Sans', sans-serif; --font-button: 'Open Sans', sans-serif; --gradient: linear-gradient(135deg, #D97706, #B45309); --glow-primary: rgba(217, 119, 6, 0.15); --glow-secondary: rgba(180, 83, 9, 0.08); --glow-accent: rgba(220, 38, 38, 0.05); --border-subtle: rgba(217, 119, 6, 0.12); --nav-bg: rgba(255, 251, 235, 0.92); --footer-bg: #FEF3C7; --hover-bg: rgba(217, 119, 6, 0.06); --badge-bg: rgba(217, 119, 6, 0.08); } /* ===== Theme 8: Fresh Mint (Light) ===== */ [data-theme="fresh-mint"] { --primary: #059669; --secondary: #0D9488; --accent: #7C3AED; --bg: #F0FDF4; --bg-alt: #DCFCE7; --card: #ECFDF5; --text: #022C22; --text-secondary: #4B5563; --text-muted: rgba(2,44,34,0.45); --text-faint: rgba(2,44,34,0.3); --border-line: rgba(2,44,34,0.08); --font-heading: 'Exo 2', sans-serif; --font-body: 'Nunito Sans', sans-serif; --font-button: 'Nunito Sans', sans-serif; --gradient: linear-gradient(135deg, #059669, #0D9488); --glow-primary: rgba(5, 150, 105, 0.15); --glow-secondary: rgba(13, 148, 136, 0.08); --glow-accent: rgba(124, 58, 237, 0.05); --border-subtle: rgba(5, 150, 105, 0.12); --nav-bg: rgba(240, 253, 244, 0.92); --footer-bg: #DCFCE7; --hover-bg: rgba(5, 150, 105, 0.06); --badge-bg: rgba(5, 150, 105, 0.08); } /* ===== Theme 9: Rose Quartz (Light) ===== */ [data-theme="rose-quartz"] { --primary: #DB2777; --secondary: #BE185D; --accent: #6366F1; --bg: #FFF1F2; --bg-alt: #FFE4E6; --card: #FFF5F6; --text: #1C1017; --text-secondary: #6B7280; --text-muted: rgba(28,16,23,0.45); --text-faint: rgba(28,16,23,0.3); --border-line: rgba(28,16,23,0.08); --font-heading: 'Quicksand', sans-serif; --font-body: 'DM Sans', sans-serif; --font-button: 'DM Sans', sans-serif; --gradient: linear-gradient(135deg, #DB2777, #BE185D); --glow-primary: rgba(219, 39, 119, 0.15); --glow-secondary: rgba(190, 24, 93, 0.08); --glow-accent: rgba(99, 102, 241, 0.05); --border-subtle: rgba(219, 39, 119, 0.12); --nav-bg: rgba(255, 241, 242, 0.92); --footer-bg: #FFE4E6; --hover-bg: rgba(219, 39, 119, 0.06); --badge-bg: rgba(219, 39, 119, 0.08); } /* ===== Theme 10: Mahjong Table — 麻将桌绿 ===== */ [data-theme="mahjong-table"] { --primary: #1E5446; --secondary: #2A7A5E; --accent: #D4A843; --bg: #14332A; --bg-alt: #0F2820; --card: #1A4035; --text: #FFFFFF; --text-secondary: #B8E0CC; --text-muted: rgba(255,255,255,0.55); --text-faint: rgba(255,255,255,0.35); --border-line: rgba(255,255,255,0.08); --font-heading: 'Chakra Petch', sans-serif; --font-body: 'Roboto', sans-serif; --font-button: 'Rubik', sans-serif; --gradient: linear-gradient(135deg, #1E5446, #2A7A5E); --glow-primary: rgba(30, 84, 70, 0.4); --glow-secondary: rgba(42, 122, 94, 0.2); --glow-accent: rgba(212, 168, 67, 0.1); --border-subtle: rgba(42, 122, 94, 0.22); --nav-bg: rgba(20, 51, 42, 0.92); --footer-bg: #0F2820; --hover-bg: rgba(42, 122, 94, 0.18); --badge-bg: rgba(42, 122, 94, 0.15); }