手把手教你如何通过变量做主题切换！

用 Pixso 变量切换深浅主题，先把背景、文字、边框等颜色按用途命名，再为同一变量设置 light 和 dark 两组值，最后将颜色绑定到图层并切换模式。下面以“密码修改”和“联系我们”两个 App 页面为例，完成从整理变量到交付研发的 8 个步骤。

这套颜色关系可以纳入团队的设计体系建设：变量名称表达用途，模式决定具体颜色；同一个“正文文字”角色在两种主题中都保留相同名称。

在Pixso中整理主题变量

先命名语义角色，再绑定两个页面的真实状态

深浅主题的难点不在于准备两套色板，而在于同一个角色在不同页面和状态下都能解释。密码修改页需要页面背景、输入容器、正文、提示、错误和焦点角色；联系我们页还要处理信息卡片、图标和链接。先按用途命名，再给 light 与 dark 模式分别填值，避免因为浅色模式恰好同色就把两个用途合并。

切换模式时按图层和状态排查漏绑

切换到 dark 后若只有图标变色、文字没有变化，先逐层检查填充、描边和文本颜色是否引用变量，再检查组件实例是否有有意的局部覆盖。固定色值常藏在分隔线、阴影、插图、禁用按钮和弹窗遮罩里；这些对象在默认画板看不出来，必须把输入默认、聚焦、错误、禁用和提交中状态都展开再核对。

1. 在变量面板记录角色名、light 值、dark 值和绑定对象；发现同色但不同用途时拆成两个角色。
2. 复制一组密码修改和联系页面进行绑定，切换模式后逐一比对相同内容，不要用两套无关联画板掩盖遗漏。
3. 选中异常对象后区分“业务上需要的例外”与“误用固定色值”；保留前者的备注，后者重新绑定。

把长内容和移动状态放进检验

主题切换还要在窄屏和系统放大文字下检查。联系人邮箱、地址和密码规则可能换成两行，文字变长不能把错误提示推到屏幕外；输入框、链接和提交按钮的聚焦轮廓在浅色和深色背景上都要可见。对比度应按实际字号、字重、背景叠加和状态颜色判断，而不是只看变量表中的色值。

交付变量集，不把数据文件当成运行逻辑

交付给研发时，列出变量名、模式值、引用图层、允许的例外和待确认项；若团队用 JSON 管理设计令牌，再约定别名与前端样式的映射。变量数据本身不包含主题切换按钮、用户偏好保存或系统主题监听，这些交互需要在实现层另行验收。

• 研发按页面和状态抽查绑定：输入默认/聚焦/错误、联系卡片、链接悬停和禁用按钮。
• 变量重命名或删除前先查引用，避免已有组件回退到固定色值。
• 浅色与深色均用同一份真实文案检查正文、辅助文字、边框和错误提示；对比度不足时优先调整角色关系而不是单独改一层。

1. 根据设计规范整理变量集

通过对本次案例页面的设计规范进行整理，下面的变量表总结出了进行浅色主题与深色主题需要更换的颜色样式。然后，根据具体的场景应用，为对应的样式进行变量命名。需要注意的是，在进行变量命名后，需要与开发同步，以确保后续在开发中，不会出现问题。

例如，密码修改页的输入框与联系我们页的信息卡片可以共用“容器背景”，但正文和输入提示应分别命名。不要因为浅色模式下两个元素恰好同色，就让它们共用一个变量：进入深色模式后，它们可能需要不同的明度。

2. 在Pixso中打开设计图

本次案例的界面来源于Pixso资源社区，可以在Pixso设计工具打开，如上图所示。

如果你的界面原本使用其他 UI 设计工具制作，例如Sketch、XD 或 Figma，也可以在 Pixso 工作台导入对应文件，再打开并检查图层与字体。👉主流设计文件导入，立即体验

先把两个页面的原始状态保留在旁边，复制一组用于绑定变量。切换时比较同一内容和同一控件，才能区分主题差异与内容差异；不需要为了深色模式另建一套无关联的组件。

3. 创建变量

打开Pixso设计文件后，鼠标点击空白画布处，然后点击右侧属性面板的“管理变量”图标，在弹出的弹窗页面点击“创建变量”，新建一个颜色变量。

4. 创建变量模式

在弹窗的右上角点击“+”，创建一个新的变量模式，并将变量模式分别改名为“light”与“dark”，如上图所示。

5. 根据整理的变量集列表添加颜色变量

把第一步整理的变量集列表，添加到Pixso的变量集中，如上图所示。

6. 将颜色变量应用到设计图中

如上图所示，在Pixso编辑器页面，选中本次案例需要切换颜色的元素，然后在右侧属性面板的所选颜色下修改填充颜色为对应的变量名。

7. 切换主题

如上图所示，把本次案例所需切换颜色的元素都应用为变量后，就可以点击空白画布处，然后在右侧属性面板下的“切换变量模式”图标，在弹出的弹窗中选择深色与浅色主题模式进行主题切换。需要注意的是，Pixso的变量模式默认为列表中的第一个模式。

切换后有一块颜色没变，按层定位

先选中颜色没有变化的对象，检查它的填充或描边究竟引用了变量，还是仍然使用固定色值。接着看当前对象所在画板的模式；如果同一组件中的图标变了、文字没变，分别检查两个图层的绑定，不要直接把整个组件覆盖成一种颜色。

还要检查浮层、错误提示和按下状态。这些内容在默认页面里可能暂时看不见，却同样需要对应的主题颜色。在密码修改页中，分别展开默认输入、错误提示和提交中状态，确认它们引用了正确角色；在联系我们页中，再看信息卡片、图标和链接的对比。

若改过实例的局部颜色，先确认那是业务上需要的例外，还是临时覆盖造成的遗漏。保留有意的差异，把误用固定色值的对象重新绑定；不要为了让颜色一起变，把所有例外都重置。

8. 交付变量集给开发

交付时，把变量名、light/dark 对应值和使用对象一并给到研发。若团队采用 JSON 管理设计令牌，还需约定字段结构、别名和前端样式的映射方式；一份颜色数据文件本身不包含主题切换按钮、用户偏好保存或系统主题监听逻辑。图中的 JSON 用于说明数据交接形式。

这组主题变量可以继续复用于同一产品的其他页面；先保留颜色角色，再为新对象绑定对应变量。

模式切换完成后，用相同页面内容检查文字、控件边界和状态提示。普通正文与背景的对比度应至少达到 4.5:1，大字号文本适用 3:1 门槛；应按实际字号、字重及叠加后的颜色判断，不能只检查变量表中孤立的两个色值。W3C 的文字对比度说明给出了具体适用范围。