深浅主题切换的关键，是让同一个颜色角色拥有不同模式值，再把图层绑定到这些角色。例如背景在浅色模式用浅色，在深色模式用深色；文字、边框和按钮各自设置，不能简单把整页反色。
可以在墨刀设计中先用登录页练习颜色变量：创建背景、正文、边框和主按钮四组角色，再切换模式看哪些元素跟着变化。下面保留登录页的操作截图与动图，便于对照；入口名称可能随版本调整。
深色模式不是把浅色界面反色
按内容和环境提供选择
深浅主题给用户提供不同环境下的显示选择，但深色不等于护眼，也不必然更易读。文字对比、背景亮度、字体大小与环境光应一起考虑，不能用“夜间模式”替代可读性设计。
同一品牌在两套主题中保持识别
支持深浅主题一键切换设计的产品，可以让品牌在不同光线环境下依然保持统一的视觉调性。不管是App、官网还是后台系统，设计师都能用同一套规范快速生成不同主题版本，让品牌识别更完整。
用变量维护颜色角色
变量让两种主题共用颜色角色，减少逐个图层改色的重复操作；前提是图层已正确绑定。插图、品牌Logo、阴影以及特殊状态通常仍需单独检查，不会因为添加了两个模式就自动处理完毕。
深浅主题切换的应用场景
深浅主题一键切换设计，它可不是只为了看着酷。从移动端App到企业后台，再到品牌官网和团队协作系统，几乎所有产品都能从中受益。下面这些场景，就是深浅主题真正发挥价值的地方。
移动端App：阅读、音乐和社交界面可以提供主题选择，实际是否更适合用户应看内容与使用环境，不能直接推断用户黏性提升。
企业后台：优先检查长时间使用的表格、图表与提示信息，深色模式下的状态颜色仍要能区分。是否采用暗色界面，应结合用户偏好与工作场景决定。
品牌官网与展示页面：可以用两套配色表达不同风格，但Logo、照片和插图应分别放到对应背景上确认，不能仅切换背景色。
团队规范：设计师和开发者共用明确的颜色角色与模式命名，便于讨论哪一处需要调整，以及调整会影响哪些页面。
墨刀设计中的变量与主题协作
墨刀设计提供变量、组件和协作能力，适合把主题规则放在同一设计文件里。对于这篇登录页练习，重点是颜色变量与模式绑定，AI配色和代码导出只作为后续选项。
为颜色角色设置模式值
在墨刀设计里，你可以先用它自带的变量系统，定义一整套颜色变量（例如主背景色、文字色、边框色等），然后为这些变量分别设置浅色版与深色版。
当图层已经绑定对应变量时，切换模式会使用该模式下的颜色值。某个元素没有变化时，优先检查它是否仍使用固定颜色，不要重复新建整套页面。
把组件样式绑定到颜色变量
设计里最麻烦的事情之一就是按钮、输入框、导航栏等每一个组件在深浅模式下都得有对应的样式。墨刀设计里，你只要把组件样式绑定到颜色变量上，组件就会随着主题切换自动适配。这就真正实现了 “一次设计，两种风格” 的效果。
AI配色不等于变量绑定
AI可以帮助探索另一种配色方向，但生成深色外观不等于建立了可维护的变量关系。若用AI辅助配色，仍要把采纳的颜色归入背景、文字、边框和状态角色，并逐项确认对比度；这篇教程的核心操作不依赖AI生成结果。
共同维护主题规则
团队可在同一设计文件中讨论两套主题，明确哪个颜色角色负责什么。主题出现分歧时，应改角色定义或模式值，而不是每人复制一套颜色自行维护。
设计主题与代码实现的边界
设计稿中的主题切换与应用运行时的主题切换是两件事。即使使用设计稿转代码能力，前端仍要确认主题偏好、系统模式跟随、持久化设置和组件状态；不能假定导出后就自动完成这些逻辑。
登录页先定义哪些颜色角色
| 角色示例 | 绑定位置 | 切换时容易遗漏的部分 |
|---|---|---|
| surface/page | 页面背景与容器背景 | 内层面板仍然使用固定白色 |
| text/primary | 标题和输入内容 | 占位符、辅助说明需要独立角色 |
| border/default | 输入框边框、分隔线 | 聚焦与错误状态不能被默认边框覆盖 |
| action/primary | 登录按钮背景 | 按钮文字还要单独确认可读性 |
这些是练习命名，不是墨刀强制字段。检查普通正文与背景的对比时，可参考WCAG对比度说明：普通文字通常要求至少4.5:1，大文字有不同条件。不能只测主标题就认定整个页面合格。错误信息还应有文字或图标提示，不只依靠红色。
图片不一定跟随颜色变量变化。透明Logo、深色插画与图表色板应分别在两套背景上查看；如果需要两套图片，明确它们的使用条件。字体和提示信息的层级也可以结合UI字体排版一起检查。
用登录页完成深浅主题切换
准备一张包含标题、账号输入框、密码输入框和登录按钮的页面。保留同一组图层，通过变量显示浅色与深色两种外观。练习结束后，应能指出每个需要换色的图层绑定了哪个角色。
创建背景、文字与按钮变量
首先，打开墨刀设计文件，在未选中任何图层的情况下，右侧面板点击 「本地变量」，打开变量管理面板。
点击「创建变量」按钮，选择「颜色变量」。建议给变量命名更语义化，比如：bg表示背景颜色，text-title表示标题文字颜色等。👉
添加浅色与深色模式
接着，我们要让变量支持“亮色 / 暗色”双主题切换。只需在变量管理面板中，点击右上角的 「创建变量模式」，墨刀设计会自动生成一个新模式列。将默认的 “模式 1 / 模式 2” 改名为浅色模式和深色模式，然后在深色模式下调整颜色值，比如背景调为暗黑色、文字调为浅色，打造适合夜间的视觉效果。
每个角色现在应有浅色与深色两个值。建议先检查列名和缺失值，再绑定图层；不要把“主按钮色”和“正文色”合并成一个变量，即使它们在某一种主题下恰好相同。
把变量绑定到登录页图层
完成颜色变量设置后，回到设计界面。选中背景、文字、按钮等元素，在右侧的颜色选择器中切换到 「变量」 标签，选择对应的颜色变量（如bg、text-title等）。
只要元素绑定了变量，页面的颜色就变成动态值，你修改变量的颜色时，整个页面会自动联动更新。这是实现深浅主题一键切换设计的关键步骤！
切换模式并排查漏绑
选择对应页面或容器，在模式设置中切到深色，再切回浅色。背景、文字和边框应按角色同步变化；若只有部分变化，就检查局部覆盖与固定颜色。截图中的动图演示了模式切换，具体操作位置以当前编辑器为准。
如果输入框正常变化、按钮文字却没有变化，检查文字是否单独绑定变量。再看禁用、错误、聚焦等状态，不要只停留在默认外观。
最后保留一张深浅并排的页面，写明模式名称、颜色角色和例外资产。接下来扩展到注册、找回密码等页面时，复用角色而不是重新抄颜色。若还不熟悉变量绑定，可以先看颜色变量教程，再回到这个登录页完成两套主题。
