Files
hive-manage-v3/docs/superpowers/plans/task-0.6-spec.md
T

2.4 KiB

在 /home/enzo/projects/hive-manage-v3/frontend/src/styles/ 下创建 CSS 变量双模体系文件 tokens.css。

内容必须精确如下(这是 UI 设计规范的核心,不可改动):

/* ===== 暗色模式(默认) ===== */
: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'。

完成后提交:

cd /home/enzo/projects/hive-manage-v3 && git add frontend/src/styles/ && git commit -m "feat: CSS variable dual-theme system (dark default + light)"