在 /home/enzo/projects/hive-manage-v3/frontend/src/styles/ 下创建 CSS 变量双模体系文件 tokens.css。 内容必须精确如下(这是 UI 设计规范的核心,不可改动): ```css /* ===== 暗色模式(默认) ===== */ :root { --bg-root: #0f1117; --bg-nav: #161822; --bg-card: #1a1d2e; --bg-hover: #1e2134; --bg-elevated: #222639; --border: #2a2d3e; --border-light: rgba(42, 45, 62, 0.5); --honey: #f0b90b; --honey-dim: #b8970e; --honey-glow: rgba(240, 185, 11, 0.12); --green: #00c853; --red: #ff3d3d; --yellow: #ffab00; --blue: #448aff; --orange: #ff6d00; --text: #e0e0e0; --text-dim: #8b8d9a; --text-muted: #5a5d6a; --bg-success: #0d2818; --bg-error: #2d0f0f; --bg-warn: #2d2000; --bg-info: #0d1b2d; --radius: 8px; --radius-sm: 4px; --radius-lg: 12px; --radius-full: 9999px; --shadow: 0 2px 8px rgba(0, 0, 0, 0.35); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55); --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.65); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "SF Mono", "Fira Code", Consolas, monospace; --header-h: 48px; --sidebar-w: 220px; } /* ===== 浅色模式 ===== */ [data-theme="light"] { --bg-root: #f5f6fa; --bg-nav: #ffffff; --bg-card: #ffffff; --bg-hover: #edf0f5; --bg-elevated: #ffffff; --border: #e2e5ee; --border-light: rgba(0, 0, 0, 0.06); --honey: #e5a800; --honey-dim: #c48f00; --honey-glow: rgba(229, 168, 0, 0.08); --green: #008c3a; --red: #d32f2f; --yellow: #e65100; --blue: #1565c0; --orange: #d84315; --text: #1a1d2e; --text-dim: #555a6e; --text-muted: #8b8f9e; --bg-success: #e8f5e9; --bg-error: #fdecea; --bg-warn: #fff3e0; --bg-info: #e3f2fd; --shadow: 0 1px 4px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1); --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.14); } /* ===== 全局基础 ===== */ * { box-sizing: border-box; } body { margin: 0; font-family: var(--font); font-size: 13px; background: var(--bg-root); color: var(--text); } /* 主题切换过渡 */ * { transition: background-color 0.15s, border-color 0.15s, color 0.15s; } ``` 创建后,在 frontend/src/main.tsx 中添加 `import './styles/tokens.css'`。 完成后提交: ```bash cd /home/enzo/projects/hive-manage-v3 && git add frontend/src/styles/ && git commit -m "feat: CSS variable dual-theme system (dark default + light)" ```