/* * Family Hub 主题变量 * * 使用:页面 引入 , * 然后 CSS 用 var(--bg) / var(--text-primary) 等,不要硬编码颜色。 * * 主题切换由 auth.js 控制(设置 ), * 用户点右上角徽章的图标即可切换,状态存 localStorage。 * * 默认 dark(不设置 data-theme 也是 dark,保证旧页面不受影响)。 */ :root, [data-theme="dark"] { /* 背景 */ --bg: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); --bg-solid: #1a1a2e; /* 表面(卡片/容器) */ --surface: rgba(255, 255, 255, 0.08); --surface-strong: rgba(255, 255, 255, 0.12); --surface-muted: rgba(255, 255, 255, 0.04); --surface-border: rgba(255, 255, 255, 0.15); /* 文字 */ --text-primary: #e8eaf6; --text-secondary: rgba(255, 255, 255, 0.7); --text-muted: rgba(255, 255, 255, 0.4); /* 强调色(主题切换不变) */ --accent-purple: #7c3aed; --accent-blue: #3b82f6; --accent-pink: #ec4899; --accent-orange: #f97316; --accent-green: #22c55e; /* 状态色 */ --warning-bg: rgba(244, 67, 54, 0.15); --warning-border: rgba(244, 67, 54, 0.5); } [data-theme="light"] { --bg: linear-gradient(135deg, #f5f7ff 0%, #eef2ff 50%, #fce7f3 100%); --bg-solid: #f5f7ff; --surface: rgba(255, 255, 255, 0.7); --surface-strong: rgba(255, 255, 255, 0.9); --surface-muted: rgba(0, 0, 0, 0.04); --surface-border: rgba(0, 0, 0, 0.08); --text-primary: #1a1a2e; --text-secondary: rgba(26, 26, 46, 0.7); --text-muted: rgba(26, 26, 46, 0.45); /* 强调色保持,但状态色背景在亮色下需要更深 */ --warning-bg: rgba(244, 67, 54, 0.1); --warning-border: rgba(244, 67, 54, 0.4); } /* 主题切换时的平滑过渡 */ body { transition: background 0.3s ease, color 0.3s ease; font-family: "LXGW WenKai Screen", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.7; letter-spacing: 0.3px; } h1, h2, h3 { letter-spacing: 1.5px; font-weight: 700; }