CSS 变量驱动的设计令牌实践

设计令牌是什么

把颜色、圆角、阴影这些可复用的视觉决策，收敛成一组有名字的变量：

:root {
  --color-primary: #39c5bb;
  --color-bg: #f4fafa;
}
[data-theme='dark'] {
  --color-bg: #0d1517;
}

暗色模式的”倒金字塔”原则

色彩权重从大到小依次是：背景 → 容器 → 强调色。

1. 背景用低饱和的深色，避免纯黑；
2. 容器（卡片）比背景亮一档，制造层次；
3. 强调色（初音葱绿）只出现在链接、按钮、高亮上，面积最小。

防闪烁的小技巧

在 <head> 里内联一小段脚本，渲染前就把 data-theme 设好：

document.documentElement.dataset.theme =
  localStorage.getItem('theme') ??
  (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');