/* ============================================================ 主题切换系统 · 叠加于 design.css 的深色默认值之上 通过 切换 dark = 默认（沿用 design.css :root） ============================================================ */ /* ---------- 浅色模式 ---------- */ html[data-theme="light"] { --bg: #f4f5fa; --bg-2: #ffffff; --surface: rgba(20,22,40,0.03); --surface-h: rgba(20,22,40,0.06); --border: rgba(20,22,40,0.10); --border-h: rgba(20,22,40,0.18); --text: #23263a; --muted: #6b6f8a; --heading: #14162a; --card: rgba(255,255,255,0.72); --card-h: rgba(255,255,255,0.92); --primary: #5b4bff; --accent: #ff3d7f; --primary-rgb: 91,75,255; --accent-rgb: 255,61,127; --ok: #1f9d5b; --warn: #c5852a; --err: #e53935; --glow-sm: 0 4px 16px rgba(20,22,40,0.10); --glow-md: 0 8px 32px rgba(20,22,40,0.12); --glow-lg: 0 16px 48px rgba(20,22,40,0.16); } /* 浅色模式下玻璃卡片更透白、阴影更轻 */ html[data-theme="light"] .card, html[data-theme="light"] .result-card, html[data-theme="light"] .hero-card { background: rgba(255,255,255,0.78); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } html[data-theme="light"] .app-wrap::before { opacity: 0.5; } html[data-theme="light"] .app-wrap::after { opacity: 0.5; } html[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(20,22,40,0.18); } /* ---------- 粉丝模式（柔粉） ---------- */ html[data-theme="pink"] { --bg: #fff0f6; --bg-2: #ffe3ef; --surface: rgba(255,255,255,0.55); --surface-h: rgba(255,255,255,0.78); --border: rgba(255,120,170,0.28); --border-h: rgba(255,120,170,0.5); --text: #5a2a3a; --muted: #b0788f; --heading: #c2185b; --card: rgba(255,255,255,0.62); --card-h: rgba(255,255,255,0.85); --primary: #ff5fa2; --accent: #ff8ac4; --primary-rgb: 255,95,162; --accent-rgb: 255,138,196; --ok: #e0548f; --warn: #e0913a; --err: #ff5277; --glow-sm: 0 4px 16px rgba(255,120,170,0.22); --glow-md: 0 8px 32px rgba(255,120,170,0.25); --glow-lg: 0 16px 48px rgba(255,120,170,0.3); } html[data-theme="pink"] .card, html[data-theme="pink"] .result-card, html[data-theme="pink"] .hero-card { background: rgba(255,255,255,0.66); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } html[data-theme="pink"] .app-wrap { background: var(--bg); } html[data-theme="pink"] .app-wrap::before { background: radial-gradient(circle, rgba(255,95,162,0.22), transparent 70%); } html[data-theme="pink"] .app-wrap::after { background: radial-gradient(circle, rgba(255,138,196,0.18), transparent 70%); } html[data-theme="pink"] ::-webkit-scrollbar-thumb { background: rgba(255,120,170,0.3); } /* ---------- 主题切换已移除：全站统一温暖浅色，不再提供深色/切换控件 ---------- */ /* ============================================================ 首页导航栏（根 index.html 的内联硬编码深色）主题适配 ============================================================ */ /* ---------- 浅色模式：首页导航 ---------- */ html[data-theme="light"] .sidebar { background: rgba(255,255,255,0.82); border-right-color: var(--border); } html[data-theme="light"] .topbar { background: rgba(255,255,255,0.70); } html[data-theme="light"] .nav-item .tag { background: rgba(20,22,40,0.06); color: var(--muted); } html[data-theme="light"] .nav-item.active .tag { background: rgba(20,22,40,0.10); color: var(--text); } html[data-theme="light"] .scrim { background: rgba(20,22,40,0.40); } html[data-theme="light"] .test-card { background: rgba(20,22,40,0.02); } html[data-theme="light"] .card-icon { background: rgba(20,22,40,0.05); } html[data-theme="light"] .card-tag, html[data-theme="light"] .section-count { background: rgba(20,22,40,0.06); color: var(--muted); } html[data-theme="light"] .hero { background: rgba(20,22,40,0.02); } html[data-theme="light"] .note .credit { color: rgba(20,22,40,0.40); } html[data-theme="light"] .grid-overlay { background-image: linear-gradient(rgba(20,22,40,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(20,22,40,0.04) 1px, transparent 1px); } html[data-theme="light"] .section-icon { background: rgba(20,22,40,0.04) !important; border-color: rgba(20,22,40,0.08) !important; } /* ---------- 粉丝模式：首页导航 ---------- */ html[data-theme="pink"] .sidebar { background: rgba(255,255,255,0.62); border-right-color: var(--border); } html[data-theme="pink"] .topbar { background: rgba(255,255,255,0.50); } html[data-theme="pink"] .nav-item .tag { background: rgba(var(--primary-rgb),0.12); color: var(--muted); } html[data-theme="pink"] .nav-item.active .tag { background: rgba(var(--primary-rgb),0.18); color: var(--heading); } html[data-theme="pink"] .scrim { background: rgba(90,42,58,0.40); } html[data-theme="pink"] .test-card { background: rgba(255,255,255,0.42); } html[data-theme="pink"] .card-icon { background: rgba(var(--primary-rgb),0.12); } html[data-theme="pink"] .card-tag, html[data-theme="pink"] .section-count { background: rgba(var(--primary-rgb),0.12); color: var(--muted); } html[data-theme="pink"] .hero { background: rgba(255,255,255,0.40); } html[data-theme="pink"] .note .credit { color: rgba(90,42,58,0.40); } html[data-theme="pink"] .grid-overlay { background-image: linear-gradient(rgba(var(--primary-rgb),0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--primary-rgb),0.05) 1px, transparent 1px); } html[data-theme="pink"] .section-icon { background: rgba(var(--primary-rgb),0.10) !important; border-color: rgba(var(--primary-rgb),0.18) !important; }