直接回答：Design Token 是把设计决策（颜色、间距、圆角、字号）抽成命名变量分层管理：原始层（色板 blue-500）、语义层（color-primary、color-danger，组件只用语义层）、组件层（button-bg）。主题切换就是换一套语义层到原始层的映射，技术载体用 CSS 自定义属性（运行时可切换、继承性好），构建期变量（Sass）只适合编译期定死的场景。
展开解析：暗色模式的正确做法与坑：反直觉的一点是不能简单“反色”——阴影、分割线在暗色下要换成浅色描边，图片与图表需要适配版，语义 token 的价值就在这里（surface、text-primary 每层单独定义暗色值）。实现上 html[data-theme="dark"] 选择器覆盖 token，用户偏好优先级：显式选择 > localStorage > prefers-color-scheme 媒体查询；首屏防闪烁要在 HTML head 内联一段同步脚本先读偏好设属性，否则白闪一下（FOUC 主题版）。Token 的跨端同步用 Style Dictionary 类工具从一份源定义生成 CSS 变量、iOS/Android 常量与设计工具（Figma Variables）同步，避免三端各自维护导致漂移。落地阻力多在存量代码：组件里写死的 #fff 要逐步替换成 token，可以先跑 lint 规则禁新增硬编码，存量随迭代替换。验收标准：切换主题全站零硬编码残留、新增颜色必须先过语义层。
追问方向：为什么语义层比直接用色板重要？多级品牌主题（白标）如何扩展 token 层？
（约 470 字）