同一个页面、同一套组件代码,只切换 主题覆盖层 就完成「暖金 → 冷蓝」改版。
下方所有颜色都来自 dist/tokens.css 的真实 --color-* 语义令牌——
组件零改动,证明改版 = 只换值、不换系统。
<html data-theme>
var(--color-*) 引用海拔 5630m 的卓玛拉山口,56km 经典朝圣环线。金调渐变占位图也会随主题从暖金变为冷蓝。
themes.json 的 demo-rebrand 预设只改了 4 个 open 语义令牌;
build-tokens.py 把预设发射成 [data-theme="demo-rebrand"] 覆盖块。
这就是「换肤」的全部工程量——不碰组件、不碰 locked 原始值、不 fork 整库。
| 语义令牌 | 默认(暖金) | demo-rebrand(冷蓝) | 用途 | |
|---|---|---|---|---|
| --color-gold | #C9A96E | → | #2E7DD1 | 金印主色 / 金调按钮 |
| --color-accent | #9B2915 | → | #2E7DD1 | 强调色 / 主按钮 |
| --color-accent-deep | #7A2010 | → | #1B5FA8 | 强调深档 / hover |
| --color-bg | #F5F1E8 | → | #F4F7FA | 页面纸底 |
themes.json 增 {"my-brand":{...}},页面挂 data-theme="my-brand" 即生效。[data-theme] 分支,主产物 tokens.wxss 与全部零破坏断言零改动。