Figma Variables的Mode机制支持一键切换深浅色主题。需创建ThemeTokens变量集并添加Light/Dark模式，为变量设不同取值；绑定图层时指定Mode；通过顶部切换器实时预览；导出含mode前缀的CSS变量；用Appearance面板批量应用主题配置。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
如果您在Figma中已建立多套主题配置，但每次切换深色与浅色模式仍需手动修改布尔变量或逐项调整颜色取值，则可能尚未启用Variables的Mode机制。Figma Variables支持通过Variable Modes对同一变量集定义多个预设配置档（如Light、Dark、High Contrast），实现一键式主题环境切换。以下是利用Variable Modes管理并快速切换深浅模式的具体操作路径：
一、创建支持Modes的颜色变量集
Variable Modes允许为单个变量集定义多个上下文配置，每个Mode代表一种主题状态（如Light/Dark），所有变量在不同Mode下可拥有独立取值，避免创建冗余变量集。
1、点击左侧面板底部的Variables图标，进入变量管理界面。
2、点击+ New variable set，命名为ThemeTokens。
3、在ThemeTokens变量集中，点击右上角⋯菜单，选择Add mode。
4、新增两个Mode：命名为Light和Dark，并确保两者均处于启用状态。
5、为变量bg-surface添加Color类型值，在Light Mode下设为#FFFFFF，在Dark Mode下设为#121212。
二、将图层属性绑定至Mode-aware变量
绑定时需明确指定所依赖的变量及当前生效的Mode，Figma会根据画布顶部的Mode切换器自动匹配对应取值，无需额外逻辑判断。
1、选中一个背景矩形图层，在右侧检查器的Fills区域点击+号旁的Variable图标。
2、展开ThemeTokens变量集，选择bg-surface变量。
3、在变量绑定弹窗中，确认Mode下拉菜单当前显示为Light；若需默认以Dark渲染，点击该下拉框并切换为Dark。
4、重复上述步骤，为text-on-surface、border-default等变量绑定对应图层，并统一设置其Mode上下文。
三、使用顶部Mode切换器实时预览主题变化
Figma画布顶部工具栏提供全局Mode切换控件，更改后所有绑定该变量集且指定了Mode的图层将即时刷新渲染结果，无需运行插件或触发变量更新动作。
1、在画布顶部工具栏右侧，找到Variables Mode切换器（图标为两个重叠圆圈）。
2、点击下拉箭头，从列表中选择Dark Mode。
3、观察所有已绑定ThemeTokens变量的图层——背景色、文字色、边框色将同步变为Dark Mode下设定的值。
4、再次点击切换器，选择Light Mode，全部图层立即还原为浅色配置。
四、导出Mode-specific CSS Custom Properties
当设计交付至开发环节时，可借助Dev Mode生成含Mode前缀的CSS变量，使前端能基于:root[data-theme="dark"]等选择器精准应用样式，保障主题切换逻辑与设计完全一致。
1、点击右上角Profile头像 → Settings → Dev Mode，开启开发者模式。
2、返回画布，点击顶部Variables Mode切换器旁的Export按钮（箭头朝下图标）。
3、在导出面板中勾选Include mode context，选择CSS Custom Properties格式。
4、点击Export，生成的CSS文件中将包含类似--bg-surface-light: #FFFFFF; --bg-surface-dark: #121212;的声明。
五、通过Appearance面板批量应用Mode配置档
Appearance面板将整个变量集及其Mode配置封装为可切换的“外观方案”，适用于跨页面、跨Frame的主题一致性控制，尤其适合多视图原型场景。
1、在右侧检查器中，点击Appearance标签页（若未显示，需先选中任意Frame或页面级节点）。
2、点击+ Add appearance，从下拉列表中选择ThemeTokens变量集。
3、在Appearance设置区域，为当前Frame指定Default Mode为Light。
4、复制该Frame，选中副本，在Appearance中将Mode更改为Dark，整个Frame内所有绑定ThemeTokens的图层即刻响应切换。
