/* ========================================================================= * HGFAST Cloud — Theme Tokens v1 (Light + Dark) * 用户 2026-04-22 方案 + 向 hgfast 老变量名的 alias forward * * 加载顺序: tokens.css → primitives.css → sidebar.css → theme.css → proton-theme-light.css * theme.css 的 :root 必须在 tokens.css 之后加载才能覆盖 * * 切换机制: * hg-theme-toggle.js 读 localStorage.hgfast_theme 设置 * 默认 data-theme="dark" (历史默认),:root 也默认 dark * * 原则: * 1. 新变量: 语义化命名 (bg-canvas / text-primary / brand-500 / badge-*) * 2. 老变量: 保留并以 var(--新变量) alias forward,零代码迁移 * 3. 组件 CSS 可继续引用任一套名 * ========================================================================= */ /* ========================================================================= * Dark mode (默认 :root + 显式 [data-theme="dark"]) * ========================================================================= */ :root, [data-theme="dark"] { /* ================================================ * 核心新 token (来自用户 2026-04-22 方案) * ================================================ */ --bg-canvas: #0E0B17; --bg-surface-1: #1A1625; --bg-surface-2: #241E34; --bg-surface-3: #2E2742; --bg-sidebar: #15111F; --bg-topbar: #0A0711; --bg-overlay: rgba(0, 0, 0, 0.64); --text-primary: #F4F2FA; --text-secondary: #B8B2CC; --text-tertiary: #7D7695; --text-disabled: #4A4560; --text-on-brand: #FFFFFF; --text-on-topbar: #FFFFFF; --text-inverse: #1A1625; --border-subtle: #2A2440; --border-default: #3A3355; --border-strong: #524A70; --brand-50: #2A1F4D; --brand-100: #3A2C6B; --brand-300: #8B6FFF; --brand-500: #9B7DFF; --brand-600: #8563FF; --brand-700: #6E4AF5; --brand-grad: linear-gradient(135deg, #9B7DFF 0%, #6E4AF5 100%); --success-bg: rgba(34, 197, 94, 0.14); --success-fg: #4ADE80; --success-solid: #22C55E; --warning-bg: rgba(245, 166, 35, 0.14); --warning-fg: #FBBF24; --warning-solid: #F5A623; --danger-bg: rgba(240, 66, 92, 0.16); --danger-fg: #FF6B85; --danger-solid: #F0425C; --info-bg: rgba(37, 99, 235, 0.16); --info-fg: #60A5FA; --badge-hot-bg: linear-gradient(135deg, #FFB067 0%, #FF7A45 100%); --badge-hot-fg: #FFFFFF; --badge-new-bg: linear-gradient(135deg, #FF7EC7 0%, #C94BE8 100%); --badge-new-fg: #FFFFFF; --badge-pro-bg: linear-gradient(135deg, #5AE3A1 0%, #2BB97A 100%); --badge-pro-fg: #0E0B17; --badge-free-bg: rgba(245, 166, 35, 0.18); --badge-free-fg: #FBBF24; --badge-vip-bg: linear-gradient(135deg, #3D2F1A 0%, #2A1F0F 100%); --badge-vip-fg: #F5C87A; --badge-vip-border: #F5C87A; --card-residential-bg: linear-gradient(135deg, #0A1F14 0%, #14331F 100%); --card-residential-fg: #6EE7A0; --card-enterprise-bg: linear-gradient(135deg, #1F1A0A 0%, #332B14 100%); --card-enterprise-fg: #F5C87A; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55); --shadow-brand: 0 8px 24px rgba(155, 125, 255, 0.35); --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-pill: 999px; --ring: 0 0 0 3px rgba(155, 125, 255, 0.45); /* ================================================ * 向后兼容 alias: 把老变量 forward 到新变量 * 老代码引用 var(--card-bg) 等, 自动吃新配色 * ================================================ */ /* tokens.css (Proton 原配色) */ --proton-purple-100: var(--brand-50); --proton-purple-300: var(--brand-300); --proton-purple-500: var(--brand-500); --proton-purple-600: var(--brand-600); --proton-purple-700: var(--brand-700); --proton-purple-900: #1C0F54; --gradient-hero: var(--brand-grad); --bg-page: var(--bg-canvas); --bg-surface: var(--bg-surface-1); --bg-elevated: var(--bg-surface-2); --bg-hover: var(--bg-surface-3); --bg-input: var(--bg-surface-2); --border-focus: var(--brand-500); /* global-r73 老 --bg / --card-bg / --sub / --text */ --bg: var(--bg-canvas); --card-bg: var(--bg-surface-1); --card-strong: var(--bg-surface-2); --card-border: var(--border-subtle); --text: var(--text-primary); --sub: var(--text-secondary); --sub-text: var(--text-secondary); --text-dim: var(--text-tertiary); --border: var(--border-default); --blue: var(--brand-500); --green: var(--success-solid); --purple: var(--brand-500); --orange: var(--warning-solid); --red: var(--danger-solid); --gold: #d4af37; /* global-r73 pt-* Proton 变量组 */ --pt-purple: var(--brand-500); --pt-purple-dark: var(--brand-700); --pt-purple-light: var(--brand-300); --pt-purple-soft: rgba(155,125,255,0.14); --pt-purple-glow: var(--shadow-brand); --pt-purple-line: rgba(155,125,255,0.35); --pt-bg: var(--bg-canvas); --pt-bg-2: var(--bg-surface-1); --pt-bg-3: var(--bg-surface-2); --pt-card: var(--bg-surface-1); --pt-card-strong: var(--bg-surface-2); --pt-modal-bg: linear-gradient(180deg, var(--bg-surface-1) 0%, var(--bg-canvas) 100%); --pt-text: var(--text-primary); --pt-text-sub: var(--text-secondary); --pt-text-mut: var(--text-tertiary); --pt-text-disabled: var(--text-disabled); --pt-border: var(--border-subtle); --pt-border-hover: var(--border-strong); --pt-border-focus: var(--brand-500); --pt-input: var(--bg-surface-2); --pt-input-focus: var(--brand-50); --pt-success: var(--success-solid); --pt-danger: var(--danger-solid); --pt-warning: var(--warning-solid); /* 各 view 独立变量组 forward (emby/game/relay/sub/rule/speedtest/radar/coupon/reseller/check/devices/carpool) */ --em-bg: var(--bg-canvas); --em-card: var(--bg-surface-1); --em-card-hover: var(--bg-surface-2); --em-border: var(--border-subtle); --em-blue: #0A84FF; --em-purple: var(--brand-500); --em-green: var(--success-solid); --em-red: var(--danger-solid); --em-orange: var(--warning-solid); --em-tg: #2AABEE; --gm-bg: var(--bg-canvas); --gm-card: var(--bg-surface-1); --gm-card-hover: var(--bg-surface-2); --gm-border: var(--border-subtle); --gm-green: #39FF14; --gm-green-glow: rgba(57,255,20,0.3); --rl-bg: var(--bg-canvas); --rl-card: var(--bg-surface-1); --rl-card-hover: var(--bg-surface-2); --rl-border: var(--border-subtle); --rl-border-light: var(--border-default); --rl-sub: var(--text-secondary); --sub-bg: var(--bg-canvas); --sub-card: var(--bg-surface-1); --sub-card-hover: var(--bg-surface-2); --sub-border: var(--border-subtle); --sub-blue: #0A84FF; --sub-muted: var(--text-secondary); --sub-purple: var(--brand-500); --ru-bg: var(--bg-canvas); --ru-card: var(--bg-surface-1); --ru-card-hover: var(--bg-surface-2); --ru-border: var(--border-subtle); --ru-blue: #0A84FF; --sp-bg: var(--bg-canvas); --sp-card: var(--bg-surface-1); --sp-card-hover: var(--bg-surface-2); --sp-border: var(--border-subtle); --sp-cyan: #00F0FF; --rd-bg: var(--bg-canvas); --rd-card: var(--bg-surface-1); --rd-card-hover: var(--bg-surface-2); --rd-border: var(--border-subtle); --rd-blue: #0A84FF; --rd-sub: var(--text-secondary); --cp-bg: var(--bg-canvas); --cp-card: var(--bg-surface-1); --cp-card-hover: var(--bg-surface-2); --cp-border: var(--border-subtle); --cp-text: var(--text-primary); --cp-text2: var(--text-secondary); --cp-blue: #0A84FF; --re-bg: var(--bg-canvas); --re-card: var(--bg-surface-1); --re-card-hover: var(--bg-surface-2); --re-border: var(--border-subtle); --re-gold: #F5C87A; --ch-bg: var(--bg-canvas); --ch-card: var(--bg-surface-1); --ch-card-hover: var(--bg-surface-2); --ch-border: var(--border-subtle); --ch-cyan: #0A84FF; --dv-bg: var(--bg-canvas); --dv-card: var(--bg-surface-1); --dv-card-hover: var(--bg-surface-2); --dv-border: var(--border-subtle); --dv-cyan: #0A84FF; --tk-cyan: #00f2fe; --tk-pink: #fe0979; --tk-glow: rgba(0, 242, 254, 0.4); } /* ========================================================================= * Light mode v2 (舒适度优化 2026-04-22 用户方案) * - 页面底改冷灰 #F4F5F9 (不再浅紫) * - 3 层背景清晰拉开 (canvas / surface-1 / surface-3) * - 文字 3 级灰度: #15121E / #5A5469 / #8E8899 * - 细描边替代阴影 (更清爽) * - 紫色收敛到 CTA / VIP / 选中项 * - 新增 --neutral-btn-* 中性按钮组,给紫色让路 * ========================================================================= */ [data-theme="light"] { /* ================================================ * 核心新 token (v2 舒适度优化) * ================================================ */ --bg-canvas: #F4F5F9; /* 冷灰,不浅紫 */ --bg-surface-1: #FFFFFF; /* 卡片纯白 */ --bg-surface-2: #F7F8FC; /* 卡片内次级块 */ --bg-surface-3: #EEF0F8; /* hover/选中底色 */ --bg-sidebar: #FFFFFF; --bg-topbar: #1A1625; /* 顶栏深紫,品牌锚点 */ --bg-overlay: rgba(26, 22, 37, 0.48); --text-primary: #15121E; /* 主标题 够黑 */ --text-secondary: #5A5469; /* 正文 */ --text-tertiary: #8E8899; /* 辅助 */ --text-disabled: #C4BFD0; --text-on-brand: #FFFFFF; --text-on-topbar: #FFFFFF; --text-inverse: #FFFFFF; --border-subtle: #ECEDF3; /* 卡片默认细描边 */ --border-default: #DFE1EB; --border-strong: #C4C7D6; --brand-50: #F3EFFF; --brand-100: #E5DCFF; --brand-300: #B8A3FF; --brand-500: #7C5CFF; --brand-600: #6A48F0; --brand-700: #5838D6; --brand-grad: linear-gradient(135deg, #7C5CFF 0%, #5838D6 100%); /* 中性按钮组 (非核心 CTA 用此组, 给紫让路) */ --neutral-btn-bg: #F0F1F6; --neutral-btn-fg: #3A3445; --neutral-btn-hover: #E5E7EF; --success-bg: #E8F8EE; --success-fg: #1E9E54; --success-solid: #22C55E; --warning-bg: #FFF4E0; --warning-fg: #B8740A; --warning-solid: #F5A623; --danger-bg: #FFE8EC; --danger-fg: #D93954; --danger-solid: #F0425C; --info-bg: #E6F0FF; --info-fg: #2563EB; --badge-hot-bg: linear-gradient(135deg, #FFB067 0%, #FF7A45 100%); --badge-hot-fg: #FFFFFF; --badge-new-bg: linear-gradient(135deg, #FF7EC7 0%, #C94BE8 100%); --badge-new-fg: #FFFFFF; --badge-pro-bg: linear-gradient(135deg, #5AE3A1 0%, #2BB97A 100%); --badge-pro-fg: #FFFFFF; --badge-free-bg: #FFF2D6; --badge-free-fg: #B8740A; --badge-vip-bg: linear-gradient(135deg, #2A1F3D 0%, #1A1625 100%); --badge-vip-fg: #F5C87A; --badge-vip-border: #F5C87A; --card-residential-bg: linear-gradient(135deg, #0F2E1F 0%, #1A3D2A 100%); --card-residential-fg: #6EE7A0; --card-enterprise-bg: linear-gradient(135deg, #2A2410 0%, #3D3418 100%); --card-enterprise-fg: #F5C87A; /* 阴影克制 - 主要靠描边 */ --shadow-xs: 0 1px 2px rgba(21, 18, 30, 0.04); --shadow-sm: 0 1px 3px rgba(21, 18, 30, 0.06); --shadow-md: 0 4px 16px rgba(21, 18, 30, 0.06); --shadow-lg: 0 12px 32px rgba(21, 18, 30, 0.08); --shadow-brand: 0 6px 18px rgba(124, 92, 255, 0.24); --ring: 0 0 0 3px rgba(124, 92, 255, 0.35); /* ================================================ * 向后兼容 alias (浅色) * ================================================ */ --proton-purple-100: var(--brand-50); --proton-purple-300: var(--brand-300); --proton-purple-500: var(--brand-500); --proton-purple-600: var(--brand-600); --proton-purple-700: var(--brand-700); --gradient-hero: var(--brand-grad); --bg-page: var(--bg-canvas); --bg-surface: var(--bg-surface-1); --bg-elevated: var(--bg-surface-2); --bg-hover: var(--bg-surface-3); --bg-input: var(--bg-surface-2); --border-focus: var(--brand-500); --bg: var(--bg-canvas); --card-bg: var(--bg-surface-1); --card-strong: var(--bg-surface-2); --card-border: var(--border-subtle); --text: var(--text-primary); --sub: var(--text-secondary); --sub-text: var(--text-secondary); --text-dim: var(--text-tertiary); --border: var(--border-default); --blue: var(--brand-500); --green: var(--success-solid); --purple: var(--brand-500); --orange: var(--warning-solid); --red: var(--danger-solid); --gold: #B8941E; --pt-purple: var(--brand-500); --pt-purple-dark: var(--brand-700); --pt-purple-light: var(--brand-300); --pt-purple-soft: rgba(124,92,255,0.14); --pt-purple-glow: var(--shadow-brand); --pt-purple-line: rgba(124,92,255,0.35); --pt-bg: var(--bg-canvas); --pt-bg-2: var(--bg-surface-1); --pt-bg-3: var(--bg-surface-2); --pt-card: var(--bg-surface-1); --pt-card-strong: var(--bg-surface-2); --pt-modal-bg: linear-gradient(180deg, var(--bg-surface-1) 0%, var(--bg-canvas) 100%); --pt-text: var(--text-primary); --pt-text-sub: var(--text-secondary); --pt-text-mut: var(--text-tertiary); --pt-text-disabled: var(--text-disabled); --pt-border: var(--border-subtle); --pt-border-hover: var(--border-strong); --pt-border-focus: var(--brand-500); --pt-input: var(--bg-surface-2); --pt-input-focus: var(--brand-50); --pt-success: var(--success-solid); --pt-danger: var(--danger-solid); --pt-warning: var(--warning-solid); --em-bg: var(--bg-canvas); --em-card: var(--bg-surface-1); --em-card-hover: var(--bg-surface-2); --em-border: var(--border-subtle); --em-purple: var(--brand-500); --em-green: var(--success-fg); --em-red: var(--danger-fg); --em-orange: var(--warning-fg); --em-tg: #1E90D0; --gm-bg: var(--bg-canvas); --gm-card: var(--bg-surface-1); --gm-card-hover: var(--bg-surface-2); --gm-border: var(--border-subtle); --gm-green: var(--success-fg); --gm-green-glow: rgba(30,167,74,0.22); --rl-bg: var(--bg-canvas); --rl-card: var(--bg-surface-1); --rl-card-hover: var(--bg-surface-2); --rl-border: var(--border-subtle); --rl-border-light: var(--border-default); --rl-sub: var(--text-secondary); --sub-bg: var(--bg-canvas); --sub-card: var(--bg-surface-1); --sub-card-hover: var(--bg-surface-2); --sub-border: var(--border-subtle); --sub-muted: var(--text-secondary); --sub-purple: var(--brand-500); --ru-bg: var(--bg-canvas); --ru-card: var(--bg-surface-1); --ru-card-hover: var(--bg-surface-2); --ru-border: var(--border-subtle); --sp-bg: var(--bg-canvas); --sp-card: var(--bg-surface-1); --sp-card-hover: var(--bg-surface-2); --sp-border: var(--border-subtle); --rd-bg: var(--bg-canvas); --rd-card: var(--bg-surface-1); --rd-card-hover: var(--bg-surface-2); --rd-border: var(--border-subtle); --rd-sub: var(--text-secondary); --cp-bg: var(--bg-canvas); --cp-card: var(--bg-surface-1); --cp-card-hover: var(--bg-surface-2); --cp-border: var(--border-subtle); --cp-text: var(--text-primary); --cp-text2: var(--text-secondary); --re-bg: var(--bg-canvas); --re-card: var(--bg-surface-1); --re-card-hover: var(--bg-surface-2); --re-border: var(--border-subtle); --re-gold: #B8941E; --ch-bg: var(--bg-canvas); --ch-card: var(--bg-surface-1); --ch-card-hover: var(--bg-surface-2); --ch-border: var(--border-subtle); --dv-bg: var(--bg-canvas); --dv-card: var(--bg-surface-1); --dv-card-hover: var(--bg-surface-2); --dv-border: var(--border-subtle); } /* ========================================================================= * Global body 应用新 token (让 tokens.css 之后的所有 body/html 规则也切) * 使用高特异性 + !important 压过其他规则 * ========================================================================= */ html, body { background: var(--bg-canvas); color: var(--text-primary); transition: background-color 0.2s ease, color 0.2s ease; } [data-theme="light"] html, [data-theme="light"] body { background: var(--bg-canvas) !important; color: var(--text-primary) !important; } /* 深色模式也显式触发,确保从 light 切回时生效 */ [data-theme="dark"] html, [data-theme="dark"] body { background: var(--bg-canvas) !important; color: var(--text-primary) !important; } /* ========================================================================= * Topbar 专用 (用户强调顶部深紫保留, 品牌锚点) * 如果全站有 .topbar / .hg-notice / .hg-alert-bar 之类 * ========================================================================= */ .hg-topbar, .hg-notice-bar, [class*="topbar"] { background: var(--bg-topbar) !important; color: var(--text-on-topbar) !important; }