Skip to content

主题定制 ​

unix-ui 的主题由 SCSS 变量驱动,默认主题开箱即用(组件内部已引入变量文件),零配置可用。

覆盖主题变量 ​

在项目根 uni.scss 中直接定义同名变量即可全局覆盖:

scss
// 自定义主题色(对全部组件生效)
$m-color-primary: #10b981;
$m-color-danger: #dc2626;

// 定制组件规格
$m-button-normal-height: 48px;
$m-radius-md: 12px;

变量文件全部使用 !default 定义,用户定义值始终优先于组件默认值,与定义书写位置无关。

工作原理 ​

  1. 组件 style 顶层引入 theme/vars.scss(全部 !default),编译时展开为默认值
  2. uni-app x 编译器将项目根 uni.scss 注入每个组件的样式参与同一次编译
  3. 用户在 uni.scss 中定义的变量使 !default 声明跳过,从而覆盖默认值

禁止在 uni.scss 中引入 vars.scss

不要在 uni.scss 中 @import 组件库的 vars.scss——编译器会把 uni.scss 注入每个组件样式,与组件内部的引入形成循环导入,导致编译报错:

[sass] This file is already being loaded.

覆盖主题只需直接定义变量,不需要引入任何文件。

变量总表 ​

主题色 ​

变量说明默认值
$m-color-primary主要色#1989fa
$m-color-success成功色#07c160
$m-color-warning警告色#ff976a
$m-color-danger危险色#ee0a24
$m-white基础白色#ffffff
$m-text-color基础文字色#323233
$m-disabled-opacity禁用透明度0.5
$m-color-default-bgdefault 类型背景色#ffffff
$m-color-default-borderdefault 类型边框色#ebedf0

基础规格 ​

变量说明默认值
$m-border-width基础边框宽度1px
$m-radius-md基础圆角8px
$m-radius-max全圆角999px

Button 按钮 ​

完整变量见 Button 主题定制,包括各尺寸的高度、内边距、字号与圆角。

下一步 ​

Released under the MIT License.