变量模式

变量模式让你为同一个变量定义多个值，一键切换全局外观。

常见用途

• 亮色/暗色主题切换：颜色变量在两个模式中分别定义为浅色和深色值
• 多品牌：不同客户使用不同品牌色
• 多设备：移动端和桌面端使用不同间距值

创建模式

1. 在变量面板中点击「+ 新模式」
2. 命名模式（如「暗色」「亮色」「品牌A」「移动端」）
3. 为每个模式填入对应的变量值

切换模式

有两种切换方式：

全局切换

在变量面板顶部的模式选择器中切换。所有引用该集合变量的图层即时更新。

图层级别切换

选中图层或实例 → 右侧属性栏 → 「变量模式」下拉菜单 → 选择目标模式。仅影响该图层及其子图层，不影响其他图层。适用于同一组件在不同上下文中使用不同模式（如页面上半部分亮色、下半部分暗色）。

最佳实践

• 使用语义化变量名（bg-primary 而非 white）
• 每个集合的模式数保持一致
• 在组件库中预定义所有模式的值