四层设计令牌：让换肤不只是一行配置

换肤这件事，大部分项目做得很难受，是因为颜色散落在各处。

四层结构

L1 色板：原始颜色值，只在这里出现十六进制。

L2 语义：\--pri\（主色）、\--bg\、\--card\、\--line\、\--text\、\--muted\、\--faint\。组件只用这一层。

L3 重置：浏览器默认样式的统一处理。

L4 布局：栅格、间距、圆角、阴影。

为什么值得分四层

因为它们的变化频率不同。

• 色板几乎不变
• 语义随皮肤变
• 重置基本不动
• 布局随断点变

把变化频率不同的东西混在一起，改一次就要小心翼翼。分开之后，换肤只是替换 L2 的二十个变量。

html[data-skin="ocean"] {
  --pri: #1f5f8b;
  --pri-soft: #e7f0f7;
}

暗色不是反色

暗色模式最容易被做成“把白变黑”。正确的做法是重新定义 L2：

• 背景不是纯黑，是带一点冷的深灰
• 卡片比背景亮一档，而不是加边框
• 文字不是纯白，是 87% 的灰
• 主色要提亮，否则在深色上会糊

暗色模式的目标不是“看起来像暗的”，是“在夜里读着不累”。