使用设计主题

主题就是把项目里反复用到的颜色、字体、圆角、间距、阴影统一管起来，每一项叫一个主题变量。组件在设计面板里不直接填数值，而是引用变量；以后想改，在主题页改一次，所有用到它的地方一起变。

这篇指南带你从零搭一套主题：先用品牌色生成整套色阶，再补上自己的颜色、字体和尺寸变量，最后在组件上用起来。

主题按客户端独立配置，Web 应用、微信小程序和移动应用各有一套，互不影响。切换客户端的方式见搭建多客户端应用。

认识主题页

进入顶部的 设置 → 主题。页面分两个页签：

每个变量占一行，名字和值都在表格里直接改。新建的项目和客户端自带一套系统预设变量，拿来就能用；预设变量可以改值、改名，但不能删。预设的具体数值见系统预设速查。

配置主题

用品牌色生成色阶

色阶是从一个基础色算出来的 12 档深浅，第 1 档最浅、第 12 档最深。颜色变量和组件颜色都可以绑到其中任意一档，基础色一改，整组色阶和所有用到它的地方一起变。系统预设了 Primary、Secondary、Tertiary、Neutral、Success、Alert、Error 七组色阶。

搭建新项目时，先把品牌色填进去：

1. 在 变量 → 颜色 页签，点击色阶区右上角的色阶生成器。
2. 在品牌色里填入你的主色。
3. 在风格里选一种配色风格：经典、鲜明、强烈、中性、单色。换一种风格，七组色阶会按新风格重新算一遍。
4. 哪一组不满意，直接在下方改它的基础色。
5. 看一眼底部的预览，按钮、文字和状态色都合适了，点击确认。

之后想单独调某一组，点色阶卡片上的编辑图标换基础色就行；点卡片上的名字可以改名。

补充自己的颜色

新建色阶

品牌色之外还有一个常用色的话，给它也建一组色阶，别到处填固定色值：

1. 在色阶区的自定义分组点击新建。
2. 填个名字、选基础色，弹层里会实时显示算出来的 12 档。
3. 点击保存。

新建颜色变量

颜色变量是组件真正引用的那个颜色。它的值可以是一个固定颜色，也可以绑到某组色阶的某一档。系统预设了 11 个（Primary、Text_primary、Background、Border 等），都绑在系统色阶上。

某个用途需要一个专门的颜色时，就新建一个：

1. 点击颜色变量表格右上角的新建颜色变量，新变量会加在表格末尾，默认是灰色。
2. 点名字，改成一眼能看懂用途的，比如「卡片背景」。
3. 点色块设置它的值：在自定义页签选固定颜色，或在色阶页签选某组色阶的某一档。

配置字体和设计 token

字体

在 变量 → 字体 页签：

• 字体家族：没有系统预设。点击新建字体，在下拉列表里选一款。有些字体只有部分客户端能用，选到当前客户端加载不了的，错误列表会提示「主题字体不会生效」，换一款就好。
• 字号：单位 px。Web 应用按桌面端、平板端、移动端各存一个值，组件在哪个断点就自动用哪个值，不用再按断点复写；微信小程序和移动应用只有一个值。
• 字重：1 到 1000 之间，常用的是 100 的整数倍。

圆角、间距、阴影

在 变量 → 设计 token 页签：

• 圆角、间距：单位 px，Web 应用同样可以按断点分别设。间距用在外边距、内边距和布局间距上。
• 阴影：点阴影的值打开编辑弹窗，设 X、Y、模糊、扩散和颜色，弹窗顶部实时预览。颜色可以是固定颜色，也可以绑颜色变量。

每一类右上角都有新建按钮，可以继续加。

设置滚动条（仅 Web 应用）

切到系统件样式页签：

1. 用显示开关决定整个应用要不要显示滚动条。关掉后页面照样能滚，只是看不见滚动条。
2. 在几何里设滑块的宽度和圆角。
3. 在颜色里设轨道颜色、滑块颜色和滑块悬停色，可以选固定颜色或颜色变量。
4. 看右侧的样式预览确认效果。

微信小程序和移动应用不支持自定义滚动条，它们的主题页上会直接写明。

系统预设速查

色阶（基础色）：Primary 是一个默认主色，建议用生成器换成品牌色；Secondary #535F70，Tertiary #6C5778，Neutral #5C5E64，Success #1D6D00，Alert #A63B00，Error #AA352D。每组 12 档的深浅是固定的，基础色只决定它偏什么颜色、有多鲜艳；第 6 档够深，上面放白字看得清，适合做按钮底色。

颜色变量：

字号（Web 应用，桌面 / 平板 / 移动端；微信小程序和移动应用取移动端一列）：

字重：Thin 100、Extra light 200、Light 300、Regular 400、Medium 500、Semi bold 600、Bold 700、Ultra bold 800、Heavy 900。

圆角：SM 4、MD 8、LG 16、XL 24、2XL 32、Full 9999。

间距：XS 4、SM 8、MD 16、LG 24、XL 32、2XL 48、3XL 64。

阴影（X 和扩散均为 0）：

滚动条（Web 应用）：显示，宽度 6，圆角 3，轨道透明，滑块 #C1C1C1，悬停 #A8A8A8。

应用主题

在设计面板中引用变量

回到设计，选中一个组件，在右侧设计面板里把样式绑到主题变量上：

以按钮为例：

1. 点背景色的色块打开颜色选择器，切到颜色变量页签选 Primary；也可以切到色阶页签直接选某一档。
2. 在文本分区，点字体、字号、字重这几个字段旁的变量按钮，各选一个变量。
3. 点圆角和内边距输入框右侧的变量按钮，选圆角和间距变量。

绑定后，字段上显示的是变量名而不是数值。鼠标移上去会出现解绑按钮，解绑后又能手动填数。

查看引用与删除变量

每个变量和色阶右侧都能看到它被多少处使用。展开后列出每个用到它的位置，同一个位置用了多次会标出次数，点一下直接跳到那个组件。

删除自己新建的变量或色阶时：

• 没有地方在用：确认一下就删了。
• 还有地方在用：弹窗会让你选一种处理方式。

系统预设变量只能改值，不能删。

相关阅读

• 设计面板
• 断点规格
• 搭建多客户端应用