Kailash · Token Theming Lab

设计令牌 · 在线换肤预览器

同一个页面、同一套组件代码,只切换 主题覆盖层 就完成「暖金 → 冷蓝」改版。 下方所有颜色都来自 dist/tokens.css 的真实 --color-* 语义令牌—— 组件零改动,证明改版 = 只换值、不换系统。

切换即改写 <html data-theme>

实时预览

以下样件在两种主题下共用同一份 HTML / WXSS,颜色全部 var(--color-*) 引用
金调标签 强调标签

冈仁波齐 · 外转山线路

海拔 5630m 的卓玛拉山口,56km 经典朝圣环线。金调渐变占位图也会随主题从暖金变为冷蓝。

难度 · 高最佳季 · 5–10月
56
公里环线
5630
最高海拔 m
3
常规天数

被覆盖的令牌(默认 → 冷蓝)

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 页面纸底
机制说明
① 契约与皮肤分离:系统锁的是命名 / 比例尺 / 校验规则(V0–V14),品牌值(open 令牌)可覆盖。
② 改版 = 加一个 preset:在 themes.json 增 {"my-brand":{...}},页面挂 data-theme="my-brand" 即生效。
③ 与 A 端 theme_override 同源:运营在后台按目的地覆盖令牌值,运行时注入;不改 wxss、不发版。
④ 零破坏:覆盖层只增 [data-theme] 分支,主产物 tokens.wxss 与全部零破坏断言零改动。
← 返回基础库目录