# Logo × 5 主题联动矩阵

切主题时 Logo 一并切换。规则分三类：暗 teal 主题用 CSS `filter` 把品牌蓝 PNG 着色为 teal；暗蓝主题用原蓝 PNG；亮色主题用深描边 PNG。文字色与 “X” 强调色全部走主题 token，杜绝白底白字。

// 每格独立渲染对应主题底色 + Logo 变体 + wordmark 配色

LumenX Studio
Full Atelier
atelier-dark · ★默认
暖石墨底。蓝 PNG 经 hue-rotate(−64°)+saturate 着色为 teal，与主色一致。
CSS FILTER → TEAL
LumenX Studio
Warm Bridge
bridge-dark · 暗
暖中性底。原品牌蓝 Logo，无 filter，“X” 取蓝主色。
原蓝 · NATIVE
LumenX Studio
Brand-True
brand-dark · 暗
冷黑底（现有基线）。原品牌蓝 Logo，hot pink 仅做强调，不染 Logo。
原蓝 · NATIVE
LumenX Studio
暖亮 Atelier
atelier-light · 亮
暖陶白底。同形 Logo 重着色：深墨描边 + teal 棱形核心（透明底，与背景协调）。
深描边 teal PNG
LumenX Studio
品牌亮色
brand-light · 亮
复用现有 html.light 配色。同形 Logo 重着色：深墨描边 + 品牌蓝棱形核心（透明底）。
深描边 蓝 PNG

## 落地规则（接 LumenXBranding.tsx）

- 现有组件写死 `src="/LumenX-cybr.png"` 且 “LUMEN” 用 `text-white` —— 亮色下白底白字不可读，必须改造。
- 按 presetId 切 `src`：暗主题 → `/LumenX-cybr.png`（白描边）；亮主题 → 各自亮色 PNG（均由暗色 Logo 同形重着色，透明底）。
- teal 着色：仅 `atelier-dark` 加内联 `style={{filter:'hue-rotate(-64deg) saturate(1.35) brightness(1.08)'}}`，其余 `none`。
- wordmark 文字色：全部从 `text-white` 改为 `var(--color-text-primary)`；“X” 从 `#646cff` 改为 `var(--color-primary)`。
- `atelier-light` 用 `logo-light-teal.png`（深墨描边 + teal 核心）；`brand-light` 用 `logo-light.png`（深墨描边 + 品牌蓝核心）。二者与暗色 Logo 同形，仅换色，已替换旧莲花图 `LumenX_亮色.png`。