应用主题设置

应用主题入口

在应用设置侧边栏，可打开应用主题配置面板。

主题配置

在应用主题配置面板，您可一键配置品牌色、文字色、圆角、动画等主题相关能力，修改主题配置后，魔笔将自动输出相关的梯度变量。如下图所示，在修改品牌色为紫色后，相关的组件展现与交互色值也对应发生了改变。如对于按钮组件，在鼠标划过（hover）和按下（active）时也将使用品牌色相关的正确色值：品牌色悬浮态（浅紫）、品牌色激活态（深紫）。

使用梯度变量

魔笔以CSS 变量形式，注入了基于主题衍生的梯度变量供用户使用。点击梯度变量，可以复制变量值以供使用。

例如分别使用品牌色浅色背景色“var(--mb-colorPrimaryBg)”、品牌色描边色“var(--mb-colorPrimaryBorder)”作为容器的背景色与边框颜色。容器的视觉展现将品牌色保持一致。

默认品牌色的容器展现：

使用紫色品牌色的容器展现

对于按钮，也可以使用由成功色衍生梯度变量设置背景色相关的 CSS 样式。