# 技术实现方案：10-UI 适配 DSH 主题

> 迭代编号：10 ｜ 依据：PLAN-011、R-012

## 1. 主题机制（已查明）

- 宿主深色主题挂 `body[data-ds-dark-theme]`；
- 宿主注入 `--dsw-*` CSS 变量（定义在宿主 runtime，随 light/dark/system 切换）；
- 插件内联 style 直接引用 `var(--dsw-alias-xxx)` 即可自动适配。

## 2. 语义映射（实施基准，来自 R-012）

```
背景:      #fff(表面) → var(--dsw-alias-bg-layer-1)
遮罩:      rgba(0,0,0,.4) → var(--dsw-alias-bg-mask-1)
hover面:   #f5f5f5 → var(--dsw-alias-interactive-bg-hover)
激活绿底:  #e8f5e9/#f1f8f2 → color-mix(in srgb, var(--dsw-alias-state-success-primary) 10%, transparent)
错误红底:  #fdecea → color-mix(in srgb, var(--dsw-alias-state-error-primary) 10%, transparent)
信息蓝底:  #e3f2fd → color-mix(in srgb, var(--dsw-alias-state-business-primary) 10%, transparent)
主文字:    #333/#222 → var(--dsw-alias-label-primary)
次文字:    #555/#666 → var(--dsw-alias-label-secondary)
弱文字:    #888/#999/#aaa → var(--dsw-alias-label-tertiary)
蓝字:      #1565c0 → var(--dsw-alias-state-business-primary)
细线:      #eee → var(--dsw-alias-border-l1)
描边:      #ddd/#ccc → var(--dsw-alias-border-l2)
红(涨/错/删): #d32f2f/#c62828 → var(--dsw-alias-state-error-primary)
绿(跌/成/主): #2e7d32 → var(--dsw-alias-state-success-primary)
实心按钮字: #fff → var(--dsw-alias-button-contrast-fill)
```

## 3. 替换细则

- 替换范围：inline style 对象、模板字符串中的颜色字面量；
- `color-mix(in srgb, var(--xxx) 10%, transparent)` 用于需要「淡底 + 文字同色」的提示/激活态；
- 带透明度的原色（如 rgba(255,215,0,.5) 价格闪动高亮）保留动画语义，改 `color-mix(in srgb, var(--dsw-alias-state-warn-primary) 50%, transparent)`；
- 注释中色值仅作说明可保留（不影响运行，验收时以无运行色为准）；
- 每文件替换后 `node --check` 校验 JSX 语法。

## 4. 风险

- **语义偏差**：个别颜色无法精确定位语义 → 保留原色并在验收清单标注，交老师确认；
- **color-mix 兼容性**：现代浏览器（Chrome 111+/Safari 16.2+）支持，DSH 目标为 Chromium 系，可接受；
- **fallback**：`var(--xxx, <原色>)` 提供兜底，宿主 token 缺失时视觉不变（更安全）。