Files
web-terminal/docs/THEME.md
Yaojia Wang dc5d073374 chore(v0.6): checkpoint foundation — Amber theme, P1 types, P3 config, design docs
Prior-session prep for the v0.6 Project Manager, checkpointed on the
v0.6-projects branch as a clean base for the parallel builders:

- P1 (src/types.ts): ProjectInfo + ProjectSessionRef contracts; Config
  gains projectRoots/projectScanDepth/projectScanTtlMs/projectDirtyCheck.
- P3 (src/config.ts): parseBool + parseProjectRoots helpers; parse the
  4 PROJECT_* env vars with defaults ([homeDir]/4/10000/true).
- UI: public/style.css indigo -> Amber (#e3a64a) accent theme.
- Docs: FEATURE_PROJECT_MANAGER.md (1:N session design), THEME.md,
  docs/mockups/ (final-amber.png is the locked visual).

Typecheck (backend + web) green. No behavior change to runtime code yet;
P2/P4/P5/P6 implement the feature on top of this.
2026-06-30 10:05:40 +02:00

2.7 KiB
Raw Blame History

Theme — Amber 琥珀金(设计 token 源)

全站视觉的单一事实来源。强调色全部来自 --accent / --accent-2 / --accent-soft 改这几个 token 即可整体换肤。定义在 public/style.css:root。 选型经过 10 套候选对比(见 docs/mockups/palette-compare*.png),最终定为 Amber 琥珀金 暖中性底 + 金色强调,暗色护眼、长时间看不累,且明确避开蓝/紫/绿。

调色板 (Design Tokens)

Token 用途
--bg #100f0d 终端 / 最深表面(暖中性,非冷蓝灰)
--surface-1 #181613 标签栏、键栏
--surface-2 #1f1c17 标签、按钮、卡片
--surface-3 #2a2620 hover / active
--border rgba(255,255,255,.07) 普通描边
--border-strong rgba(255,255,255,.14) 强描边
--text #ece9e3 主文字(暖白)
--text-dim #a8a299 次要文字
--text-faint #6f6a61 弱化文字
--accent #e3a64a 强调色:金色(按钮、链接、选中、聚焦环)
--accent-2 #c9892f 深金(渐变 / hover
--accent-soft rgba(227,166,74,.15) 强调色半透明选中底、chip、聚焦光晕
--on-accent #1a1305 金色底上的文字色(深墨,保证对比度——金底配白字会糊)

状态色(语义独立,勿与强调色混用)

连接状态点沿用既有语义,不随主题强调色变

Token 含义
--green #46d07f 已连接 connected
--amber #f5b14c 连接中 connecting
--red #ff6b6b 断开 / 出错 disconnected / error

Project 面板里的 session 状态语义v0.6working = --accent 金 · waiting = --amber 琥珀(闪) · idle = 中性灰 #8b8a86 · dirty = 暖琥珀

接入约定(改主题只改这里)

  • 任何"强调"视觉 只用 token,不要写死颜色(#7c8cff 这类硬编码已清除)。
  • 金色当背景时,文字必须用 var(--on-accent)(深墨),不要用 #fff。 当前 4 处 accent 背景按钮已统一改为 --on-accent.settings-opt.active / .hist-resume 等。
  • 换肤 = 替换 :root--accent / --accent-2 / --accent-soft / --on-accent(必要时连 --bg/--surface-* 一起)。
  • 历史:原 indigo 靛蓝 #7c8cff 已于本次替换为 Ambergit 可回溯)。

候选存档

10 套对比预览(暖底、无蓝/紫/绿):docs/mockups/palette-compare.pngAmber/Copper/Mono/Rosedocs/mockups/palette-compare-2.pngRuby/Sand/Brass/Apricot/Slate/Clay。 最终全面板预览:docs/mockups/final-amber.png