Pixso变量怎么切换深浅主题？8步教程

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

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

在Pixso中整理主题变量

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 的文字对比度说明给出了具体适用范围。