/* ============================================================ 点歌台主题变量（6 套） 页面通过 启用主题；默认 starlight。 --p1/--p2 为主渐变色，其余为背景/卡片/文字/输入框语义色。 ============================================================ */ :root, [data-theme="starlight"] { --p1: #6366f1; --p2: #ec4899; --bg1: #eef2ff; --bg2: #fdf2f8; --bg3: #ecfeff; --blob1: #a5b4fc; --blob2: #f9a8d4; --card: rgba(255, 255, 255, .72); --card-border: rgba(255, 255, 255, .9); --song-bg: rgba(255, 255, 255, .82); --text1: #1e293b; --text2: #475569; --text3: #94a3b8; --text4: #cbd5e1; --input-bg: #ffffff; --input-border: #e2e8f0; --focus-ring: rgba(129, 140, 248, .15); --shadow: rgba(99, 102, 241, .4); --seg-bg: #eef2f7; --seg-on: #ffffff; --skel: rgba(255, 255, 255, .6); --skel-shine: rgba(255, 255, 255, .85); --req-bg: #fef3c7; --req-text: #b45309; /* Element Plus 主色 */ --el-color-primary: #6366f1; --el-color-primary-dark-2: #4f52d8; --el-color-primary-light-3: #8b8ff5; --el-color-primary-light-5: #a5a8f8; --el-color-primary-light-7: #c9cbfa; --el-color-primary-light-8: #dcddfc; --el-color-primary-light-9: #eeeefc; } [data-theme="neon"] { --p1: #22d3ee; --p2: #a78bfa; --bg1: #0b1120; --bg2: #131a30; --bg3: #0b1120; --blob1: rgba(34, 211, 238, .16); --blob2: rgba(167, 139, 250, .16); --card: rgba(23, 32, 54, .66); --card-border: rgba(148, 163, 184, .18); --song-bg: rgba(23, 32, 54, .85); --text1: #e2e8f0; --text2: #a5b4cf; --text3: #7c8aa5; --text4: #525f78; --input-bg: rgba(15, 23, 42, .55); --input-border: #334155; --focus-ring: rgba(34, 211, 238, .18); --shadow: rgba(34, 211, 238, .3); --seg-bg: #1a2438; --seg-on: #2a3a5c; --skel: rgba(30, 41, 59, .6); --skel-shine: rgba(148, 163, 184, .14); --req-bg: rgba(245, 158, 11, .16); --req-text: #fbbf24; --el-color-primary: #22d3ee; --el-color-primary-dark-2: #0ea5b7; --el-color-primary-light-3: #1b9db0; --el-color-primary-light-5: #167685; --el-color-primary-light-7: #124f59; --el-color-primary-light-8: #103d45; --el-color-primary-light-9: #0d2b31; } [data-theme="sakura"] { --p1: #f43f5e; --p2: #fb7185; --bg1: #fff1f2; --bg2: #ffe4e6; --bg3: #fff5f6; --blob1: #fda4af; --blob2: #fecdd3; --shadow: rgba(244, 63, 94, .4); --focus-ring: rgba(244, 63, 94, .15); --el-color-primary: #f43f5e; --el-color-primary-dark-2: #c22744; --el-color-primary-light-3: #f7788c; --el-color-primary-light-5: #f9a4b1; --el-color-primary-light-7: #fbd0d7; --el-color-primary-light-8: #fde2e6; --el-color-primary-light-9: #fef1f3; } [data-theme="matcha"] { --p1: #10b981; --p2: #06b6d4; --bg1: #ecfdf5; --bg2: #f0fdfa; --bg3: #eff6ff; --blob1: #6ee7b7; --blob2: #99f6e4; --shadow: rgba(16, 185, 129, .4); --focus-ring: rgba(16, 185, 129, .15); --el-color-primary: #10b981; --el-color-primary-dark-2: #0b8f65; --el-color-primary-light-3: #4cd0a8; --el-color-primary-light-5: #7cdfc0; --el-color-primary-light-7: #aeefd8; --el-color-primary-light-8: #c8f5e6; --el-color-primary-light-9: #e3faf1; } [data-theme="sunset"] { --p1: #f97316; --p2: #f43f5e; --bg1: #fff7ed; --bg2: #fef2f2; --bg3: #fffbeb; --blob1: #fdba74; --blob2: #fda4af; --shadow: rgba(249, 115, 22, .4); --focus-ring: rgba(249, 115, 22, .15); --el-color-primary: #f97316; --el-color-primary-dark-2: #c2570e; --el-color-primary-light-3: #fb9245; --el-color-primary-light-5: #fcb37a; --el-color-primary-light-7: #fdd4ae; --el-color-primary-light-8: #fee3c6; --el-color-primary-light-9: #fef1de; } [data-theme="ocean"] { --p1: #3b82f6; --p2: #6366f1; --bg1: #eff6ff; --bg2: #f5f3ff; --bg3: #eff6ff; --blob1: #93c5fd; --blob2: #a5b4fc; --shadow: rgba(59, 130, 246, .4); --focus-ring: rgba(59, 130, 246, .15); --el-color-primary: #3b82f6; --el-color-primary-dark-2: #2b66c4; --el-color-primary-light-3: #6ba1f8; --el-color-primary-light-5: #93bcfa; --el-color-primary-light-7: #bdd6fc; --el-color-primary-light-8: #d3e3fd; --el-color-primary-light-9: #e9f0fe; }