是不是每次设计稿要适配深色模式，都得一层一层改颜色？品牌换了主色，几十个按钮一个个改？别急，这其实是因为你还没用上颜色变量。今天这篇文章，就带你通过一个颜色变量实战案例，做一个可一键切换亮色 / 暗色主题的APP登录页，手把手带你了解颜色变量到底有多香。如果你也想高效管理配色，打造多主题设计体系，这份颜色变量设计教程一定要收藏。
一、准备工作：规划颜色变量体系
首先，我们要确定一下要使用的设计工具，市面上的UI设计工具非常多，但需要选择一款支持变量系统的设计工具，这样有助于我们快速进行颜色变量设计，这里推荐大家使用墨刀设计工具，它是专业的矢量设计工具，支持完善的变量系统功能，UI设计中常见的颜色变量、文本变量、数字变量和布尔变量都可以快速实现。
确定好工具后，还需要确定一下目标：要用墨刀设计的变量系统，制作一个支持一键切换深浅模式的 APP 登录页设计。同时，还要想清楚3个问题：
- 你的设计作品需要几种主题颜色，比如深色和浅色？
- 常见的颜色类型有哪些？
- 每种颜色在UI界面中的应用是什么？
墨刀设计的变量系统支持把颜色变量分组，比如 “背景 / 文本 / 按钮” 三类，方便管理。接下来我们以墨刀设计的变量系统为例，制作一个可以一键切换主题深浅模式的APP登录页设计。点击立即免费注册墨刀设计，开启颜色变量高效设计体验！
二、创建颜色变量
打开墨刀设计文件，在未选中任何图层的情况下，右侧面板点击【本地变量】，打开变量管理面板，然后点击「创建变量」，选择「颜色变量」。
接下来，为了让变量更好用，建议命名要语义化一点，比如：bg，表示背景颜色；text-title，表示标题文案颜色；color-button，表示按钮颜色。这样在设计稿中引用时，你一看名字就知道它控制的是哪部分，后期改色也一目了然。这是颜色变量设计教程中最核心的一步，建立清晰、可读的变量体系。
墨刀设计还支持变量嵌套引用，你可以先定义一组基础变量，比如：白色（#FFFFFF）、黑色（#000000）品牌主色（#3370FF）。然后再让其他颜色变量去引用它们。
这样做的好处是当你改动基础变量的颜色，所有引用它的地方都会自动同步更新，彻底告别改一个按钮颜色，全局乱套的噩梦。👉 点击立即免费注册墨刀设计，体验高效的变量系统，感受一次修改全局生效的爽感。
三、添加变量模式
为了让变量支持“亮色/暗色”主题切换，我们需要为颜色变量新增一组深色值。在墨刀设计中点击变量右上角的【创建变量模式】，系统会自动生成一个新列。你可以把默认的「模式 1 / 模式 2」改名为Light（亮色）和Dark（暗色）。
接下来，调整每个变量在Dark 模式下的颜色值，比如：背景颜色从白色改成深灰、文本颜色从深灰改成浅白、按钮主色稍微调亮一点以提升对比度
这样，每个颜色变量就会拥有两个模式版本，而且在设计稿中切换模式时，所有绑定的元素都会自动响应。这一步是颜色变量设计教程里最能体现变量威力的地方。以往切换主题要改几十个颜色，现在在墨刀里只要切换一个模式，整个界面风格瞬间完成。点击免费注册墨刀设计，体验变量带来的设计效率！
四、绑定变量到设计元素
创建好变量后，我们再把它们应用到设计稿上。回到你的APP登录页设计稿中，分别选中不同图层或组件：背景层，绑定bg变量；标题文字，绑定text-color变量；登录按钮，绑定color-button变量。
从绑定变量这一刻开始，这些颜色就不再是死值，而是动态的可控值。这也是颜色变量设计教程中最常见的实操步骤之一，把视觉层面的颜色，转化为系统化、可复用的变量值。点击免费注册墨刀设计，开启变量设计，一键切换主题颜色！
五、一键切换主题颜色模式
都绑定了变量后，选中画布，点击右侧的【切换变量模式】按钮。把模式从浅色模式切换成深色模式，你会发现登录页瞬间从浅色变成深色主题，连文字、背景、按钮颜色都同步变化。不需要任何额外的调整，真正做到一键切换主题颜色模式。
这就是墨刀设计中变量系统的威力所在，不论你要适配暗黑模式，还是品牌主题，只要前期规划好变量逻辑，切换就变得无比轻松。
如果你还在用复制+改色的老办法做主题切换，那是时候升级工作流了。这份颜色变量设计教程只是开始，掌握好变量体系之后，你还能用相同的思路去管理字体、间距、阴影……让设计稿不仅漂亮，更高效、更智能。立即免费注册墨刀设计，免费体验多主题、多模式切换的完整流程，用更聪明的方式管理你的设计！
