/* ════════════════════════════════════════════════════════════════════════ FD-Go · Theme System · fdgo-theme.css ──────────────────────────────────────────────────────────────────────── 0 字节框架依赖 · 纯 CSS 变量 + data-theme 属性驱动 借鉴 Radix Colors / GitHub Primer / Tailwind / Vercel 的命名规范 ──────────────────────────────────────────────────────────────────────── 使用方式: 1. 默认浅色(FD-Go 主站 / STEX) 2. 深色(Agent 页面默认) 3. JS: fdgoTheme.set('dark') / .toggle() / .reset() 4. 事件:document.addEventListener('fdgo:theme-change', e => ...) ──────────────────────────────────────────────────────────────────────── 命名规范: --fdgo-{角色}-{层级?} 通用品牌色 --stex-{角色} STEX 调研案例专属 --agent-{角色} Agent 页面专属 --surface-{n} 1~4 层透明叠加(Primer 风格) --text-{base|muted|sub|faint} 文本阶 ════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════ 1. LIGHT 主题(默认 · FD-Go 主站 / STEX 案例演示) ════════════════════════════════════════════════════════════════ */ :root, :root[data-theme="light"] { /* ── Surface 表面色阶(Primer 风格:透明叠加) ── */ --fdgo-bg: #f5f4f0; /* 主背景(米色) */ --fdgo-bg-elevated: #ffffff; /* 卡片/提升表面 */ --fdgo-surface-1: rgba(0,0,0,0.012); /* 极浅叠加 */ --fdgo-surface-2: rgba(0,0,0,0.04); /* 卡片表面 */ --fdgo-surface-3: rgba(0,0,0,0.08); /* 弹窗/浮层 */ --fdgo-surface-4: rgba(0,0,0,0.14); /* 强遮罩 */ --fdgo-glass: rgba(255,255,255,.55); /* 磨砂玻璃(浅) */ --fdgo-glass-strong: rgba(255,255,255,.85); /* 强玻璃(浅) */ /* ── Text 文本阶 ── */ --fdgo-text: #222; /* 主文本 */ --fdgo-text-strong: #000; /* 强调(标题) */ --fdgo-text-muted: #555; /* 次文本 */ --fdgo-text-sub: #999; /* 辅助文本 */ --fdgo-text-faint: rgba(0,0,0,0.45); /* 极弱文本 */ --fdgo-text-on-accent: #ffffff; /* 强调色上的文字 */ /* ── Border 边框 ── */ --fdgo-border: rgba(0,0,0,0.07); --fdgo-border-strong: rgba(0,0,0,0.12); --fdgo-border-faint: rgba(0,0,0,0.04); /* ── Accent 强调色(FD-Go 主品牌) ── */ --fdgo-accent: #e8842b; /* FD-Go 主橙色 */ --fdgo-accent-hover: #d47520; --fdgo-accent-soft: rgba(232,132,43,0.12); --fdgo-accent-faint: rgba(232,132,43,0.04); /* ── STEX 调研案例色(Part 01~06) ── */ --stex-part-1: #9b7cb8; /* 紫 · 普遍困境 */ --stex-part-2: #4289f3; /* 蓝 · 架构 */ --stex-part-3: #4caf50; /* 绿 · 案例 */ --stex-part-4: #e8842b; /* 橙 · STEX 蓝图 */ --stex-part-5: #5ba6b8; /* 青 · AI Native */ --stex-part-6: #a2642c; /* 深棕 · 落地案例 */ --stex-agenda: #e8a4b8; /* 粉 · AGENDA */ /* ── Agent 强调色(由 ThemeManager 自动响应) ── */ --agent-accent: #4bbe9f; --agent-accent-hover: #3da888; --agent-accent-soft: rgba(75,190,159,0.14); /* ── Shadow 阴影 ── */ --fdgo-shadow-sm: 0 1px 2px rgba(0,0,0,0.04); --fdgo-shadow: 0 4px 20px rgba(0,0,0,0.06); --fdgo-shadow-lg: 0 8px 40px rgba(0,0,0,0.08); --fdgo-shadow-glow: 0 0 18px 0 rgba(0,0,0,0.10); } /* ════════════════════════════════════════════════════════════════ 2. DARK 主题(Agent 页面默认 · 数据密集场景) ════════════════════════════════════════════════════════════════ */ :root[data-theme="dark"] { /* ── Surface ── */ --fdgo-bg: #14161a; /* 主背景(深) */ --fdgo-bg-elevated: #1e2127; --fdgo-surface-1: rgba(255,255,255,0.015); --fdgo-surface-2: rgba(255,255,255,0.05); --fdgo-surface-3: rgba(255,255,255,0.10); --fdgo-surface-4: rgba(255,255,255,0.16); --fdgo-glass: rgba(40,41,46,0.55); --fdgo-glass-strong: rgba(40,41,46,0.85); /* ── Text ── */ --fdgo-text: #e8e8e8; --fdgo-text-strong: #ffffff; --fdgo-text-muted: #a0a0a0; --fdgo-text-sub: #6e6e6e; --fdgo-text-faint: rgba(255,255,255,0.4); --fdgo-text-on-accent: #ffffff; /* ── Border ── */ --fdgo-border: rgba(255,255,255,0.08); --fdgo-border-strong: rgba(255,255,255,0.18); --fdgo-border-faint: rgba(255,255,255,0.04); /* ── Accent(dark 模式降饱和 +提亮) ── */ --fdgo-accent: #ffa566; --fdgo-accent-hover: #ffb574; --fdgo-accent-soft: rgba(255,165,102,0.16); --fdgo-accent-faint: rgba(255,165,102,0.06); /* ── STEX 调研案例色(dark 适配版) ── */ --stex-part-1: #b89ad4; --stex-part-2: #6ba3f5; --stex-part-3: #6fc774; --stex-part-4: #ffa566; --stex-part-5: #7bc2d4; --stex-part-6: #c48852; --stex-agenda: #f0bccc; /* ── Agent 强调色(dark 下保持原色或提亮) ── */ --agent-accent: #5fd4b3; --agent-accent-hover: #7ce0c2; --agent-accent-soft: rgba(95,212,179,0.18); /* ── Shadow(dark 阴影更深) ── */ --fdgo-shadow-sm: 0 1px 2px rgba(0,0,0,0.3); --fdgo-shadow: 0 4px 20px rgba(0,0,0,0.4); --fdgo-shadow-lg: 0 8px 40px rgba(0,0,0,0.5); --fdgo-shadow-glow: 0 0 18px 0 rgba(0,0,0,0.5); } /* ════════════════════════════════════════════════════════════════ 3. 主题切换过渡(平滑切换避免闪屏) ════════════════════════════════════════════════════════════════ */ :root { --fdgo-transition: background-color .25s ease, color .25s ease, border-color .25s ease; } html { transition: var(--fdgo-transition); } body, [class*="surface"], [class*="card"], [class*="btn"], input, textarea, button { transition: background-color .25s ease, color .25s ease, border-color .25s ease; } /* ════════════════════════════════════════════════════════════════ 4. 主题切换按钮(右下角悬浮 · 月亮/太阳图标) ════════════════════════════════════════════════════════════════ */ .fdgo-theme-toggle { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; width: 2.4rem; height: 2.4rem; display: inline-flex; align-items: center; justify-content: center; background: var(--fdgo-glass-strong); backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4); border: 1px solid var(--fdgo-border-strong); border-radius: 999px; color: var(--fdgo-text-muted); cursor: pointer; box-shadow: var(--fdgo-shadow); transition: transform .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease; /* 不被打印 */ print-color-adjust: exact; } .fdgo-theme-toggle:hover { transform: rotate(15deg) scale(1.05); color: var(--fdgo-accent); border-color: var(--fdgo-accent); } .fdgo-theme-toggle:focus-visible { outline: 2px solid var(--fdgo-accent); outline-offset: 2px; } .fdgo-theme-toggle svg { width: 1.05rem; height: 1.05rem; stroke-width: 1.8; stroke: currentColor; fill: none; transition: transform .35s cubic-bezier(.16,1,.3,1); } .fdgo-theme-toggle .icon-sun, .fdgo-theme-toggle .icon-moon { display: none; } /* light 模式:显示月亮(切到暗) */ :root[data-theme="light"] .fdgo-theme-toggle .icon-moon { display: block; } :root[data-theme="light"] .fdgo-theme-toggle .icon-sun { display: none; } /* dark 模式:显示太阳(切到亮) */ :root[data-theme="dark"] .fdgo-theme-toggle .icon-sun { display: block; } :root[data-theme="dark"] .fdgo-theme-toggle .icon-moon { display: none; } /* ════════════════════════════════════════════════════════════════ 5. SR-Only 工具类(无障碍) ════════════════════════════════════════════════════════════════ */ .fdgo-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ════════════════════════════════════════════════════════════════ 6. 暗色模式下的滚动条适配(可选) ════════════════════════════════════════════════════════════════ */ :root[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; } :root[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--fdgo-bg); } :root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--fdgo-surface-3); border-radius: 6px; } :root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--fdgo-surface-4); }