把组件库改造成“可一键换肤”的结构：同一套组件，切换浅色/深色（也能扩展到多品牌色）。核心思路是：外观用 Token（变量）驱动，交互状态用 Variants 驱动。
打开 Variables（变量），新建 Collection：Theme，Mode 至少两个：Light、Dark。
建议从最常用的颜色 Token 开始（示例命名可直接照抄）：
color/bg, color/surface, color/text, color/text-muted, color/border, color/primary, color/primary-contrast
把 Light/Dark 两套值都填好（Dark 不是反色，按可读性重设对比）。
选中组件里的填充/描边/文字颜色 → 右侧颜色面板 → 选择 Variable 绑定到对应 Token。
常见绑定建议：
页面背景 → color/bg；卡片底 → color/surface；正文文字 → color/text；弱文字 → color/text-muted；分割线 → color/border；主按钮底 → color/primary；主按钮字 → color/primary-contrast。
把按钮/输入框等做成一个 Component Set（组件集），用 Variants 表达状态（示例）：
state=default / hover / pressed / disabled；size=sm / md / lg；tone=primary / neutral / danger
注意：不要给“Light/Dark”单独做 Variant。主题属于“全局外观”，应该由变量 Mode 控制。
在使用页面/组件库的顶层 Frame（或设计系统页面）设置变量 Mode：
右侧 Variables → 选择 Collection Theme → 将 Mode 从 Light 切到 Dark。
如果所有颜色都绑定了 Token，界面会整体换肤；如果有元素没变，说明它仍然是固定色值。
1) 有图层没绑定变量：检查 Fill/Stroke/Text 是否显示 Variable 小图标。
2) 用了 Style 但没用变量：旧项目可能是 Color Styles，逐步替换成 Variables 或把 Style 内部改为变量。
3) 组件内部覆盖：实例上手动改色会覆盖绑定，重置实例属性或回到主组件修正。
当组件变多时，建议加一层语义 Token：比如 color/button-primary-bg、color/input-border 等，然后再映射到基础 Token。这样改品牌色/改对比，只需要改映射，不需要改组件。
切换 Light/Dark 各浏览一遍：标题/正文/按钮/输入框/分割线的对比是否清晰；禁用态是否仍可读；主按钮文字是否足够亮。
