外观
自定义主题 v4.1.0
约 1203 字大约 4 分钟
2025-10-31
4.1.0之后,对主题变量进行了优化,删除了一些冗余变量,同时新增了一些变量
方法一:编译时变量覆盖
这是最常用的主题定制方式,适用于项目初始化时确定主题风格的场景。在项目根目录下的uni.scss文件中,定义SCSS变量来覆盖默认值:
示例
uni.scss
// 行高相关
$un-line-xs: 16px;
$un-line-sm: 18px;
$un-line-base: 21px;
$un-line-lg: 24px;
$un-line-xl: 27px;
$un-line-2xl: 30px;
$un-line-3xl: 36px;
$un-line-4xl: 39px;
$un-line-5xl: 48px;
$un-line-6xl: 54px;
// 圆角相关
$un-radius-xs: 2px;
$un-radius-sm: 3px;
$un-radius-base: 4px;
$un-radius-lg: 6px;
$un-radius-xl: 8px;
$un-radius-2xl: 12px;
$un-radius-circle: 100px;
// 字号相关
$un-text-xs: 10px;
$un-text-sm: 12px;
$un-text-base: 14px;
$un-text-lg: 16px;
$un-text-xl: 18px;
$un-text-2xl: 20px;
$un-text-3xl: 24px;
$un-text-4xl: 26px;
$un-text-5xl: 32px;
$un-text-6xl: 36px;
// 文本色相关
$un-text-color: #262626;
$un-text-color-secondary: #595959;
$un-text-color-muted: #8c8c8c;
$un-text-color-placeholder: #999999;
$un-text-color-disabled: #a0a0a0;
$un-text-color-white: #ffffff;
// 填充色相关
$un-fill-color: #f0f0f0;
$un-fill-color-light: #f5f5f5;
$un-fill-color-lighter: #f8f8f8;
$un-fill-color-extra-light: #fafafa;
$un-fill-color-dark: #e5e5e5;
$un-fill-color-darker: #e0e0e0;
$un-fill-color-blank: #ffffff;
// 边框色相关
$un-border-color: #d9d9d9;
$un-border-color-light: #e5e5e5;
$un-border-color-lighter: #eeeeee;
$un-border-color-extra-light: #f5f5f5;
$un-border-color-dark: #cccccc;
$un-border-color-darker: #bfbfbf;
// 背景色相关
$un-bg-color: #ffffff;
$un-bg-color-hover: #e8e8e8;
$un-bg-color-active: #e5e5e5;
$un-bg-color-disabled: #f0f0f0;
$un-bg-color-page: #f8f8f8;
// 主色相关
$un-color-primary: #1677ff;
$un-color-primary-light: #d4e7ff;
$un-color-primary-lighter: #e6f0ff;
$un-color-primary-dark: #0e5cd6;
// 成功色相关
$un-color-success: #00b96b;
$un-color-success-light: #c6f0dc;
$un-color-success-lighter: #e0f8ec;
$un-color-success-dark: #009a5a;
// 警告色相关
$un-color-warning: #ff9c2a;
$un-color-warning-light: #ffe8cc;
$un-color-warning-lighter: #fff2e6;
$un-color-warning-dark: #e68517;
// 错误色相关
$un-color-error: #ff4d4f;
$un-color-error-light: #ffd9d9;
$un-color-error-lighter: #ffebeb;
$un-color-error-dark: #d9363e;
// 信息色相关
$un-color-info: #8c8c8c;
$un-color-info-light: #e8e8e8;
$un-color-info-lighter: #f0f0f0;
$un-color-info-dark: #595959;方法二:运行时动态修改
这种方式适用于需要在应用运行过程中切换主题的场景,如实现深色模式/浅色模式切换。您可以直接在根节点样式中覆盖这些 CSS 变量,组件的样式会随之自动更新
.theme-light {
/* 行高相关 */
--un-line-xs: 16px;
--un-line-sm: 18px;
--un-line-base: 21px;
--un-line-lg: 24px;
--un-line-xl: 27px;
--un-line-2xl: 30px;
--un-line-3xl: 36px;
--un-line-4xl: 39px;
--un-line-5xl: 48px;
--un-line-6xl: 54px;
/* 圆角相关 */
--un-radius-xs: 2px;
--un-radius-sm: 3px;
--un-radius-base: 4px;
--un-radius-lg: 6px;
--un-radius-xl: 8px;
--un-radius-2xl: 12px;
--un-radius-circle: 100px;
/* 字号相关 */
--un-text-xs: 10px;
--un-text-sm: 12px;
--un-text-base: 14px;
--un-text-lg: 16px;
--un-text-xl: 18px;
--un-text-2xl: 20px;
--un-text-3xl: 24px;
--un-text-4xl: 26px;
--un-text-5xl: 32px;
--un-text-6xl: 36px;
/* 文本色 */
--un-text-color: #262626;
--un-text-color-secondary: #595959;
--un-text-color-muted: #8c8c8c;
--un-text-color-placeholder: #999999;
--un-text-color-disabled: #a0a0a0;
--un-text-color-white: #ffffff;
/* 填充色 */
--un-fill-color: #f0f0f0;
--un-fill-color-light: #f5f5f5;
--un-fill-color-lighter: #f8f8f8;
--un-fill-color-extra-light: #fafafa;
--un-fill-color-dark: #e5e5e5;
--un-fill-color-darker: #e0e0e0;
--un-fill-color-blank: #ffffff;
/* 边框色 */
--un-border-color: #d9d9d9;
--un-border-color-light: #e5e5e5;
--un-border-color-lighter: #eeeeee;
--un-border-color-extra-light: #f5f5f5;
--un-border-color-dark: #cccccc;
--un-border-color-darker: #bfbfbf;
/* 背景色 */
--un-bg-color: #ffffff;
--un-bg-color-hover: #e8e8e8;
--un-bg-color-active: #e5e5e5;
--un-bg-color-disabled: #f0f0f0;
--un-bg-color-page: #f8f8f8;
/* 主色 */
--un-color-primary: #1677ff;
--un-color-primary-light: #d4e7ff;
--un-color-primary-lighter: #e6f0ff;
--un-color-primary-dark: #0e5cd6;
/* 成功色 */
--un-color-success: #00b96b;
--un-color-success-light: #c6f0dc;
--un-color-success-lighter: #e0f8ec;
--un-color-success-dark: #009a5a;
/* 警告色 */
--un-color-warning: #ff9c2a;
--un-color-warning-light: #ffe8cc;
--un-color-warning-lighter: #fff2e6;
--un-color-warning-dark: #e68517;
/* 错误色 */
--un-color-error: #ff4d4f;
--un-color-error-light: #ffd9d9;
--un-color-error-lighter: #ffebeb;
--un-color-error-dark: #d9363e;
/* 信息色 */
--un-color-info: #8c8c8c;
--un-color-info-light: #e8e8e8;
--un-color-info-lighter: #f0f0f0;
--un-color-info-dark: #595959;
}方法三:通过 un-page 组件覆盖
您可以在 un-page 组件中直接覆盖主题变量,可用配合后端接口动态切换主题。
示例
<template>
<un-page :themeVars="themeVars">
<view>
<un-button type="primary">Primary Button</un-button>
<text>Hello uView-unix</text>
</view>
</un-page>
</template>
<script setup lang="uts">
import { ref } from 'vue'
// themeVars的值会自动转换成对应的CSS变量
// 比如 colorPrimary 会转换成 `--un-color-primary`
// 比如 colorPrimaryLight 会转换成 `--un-color-primary-light`
const themeVars = ref({
colorPrimary: '#fd2e0e',
colorPrimaryLight: '#8db4e9',
colorPrimaryDark: '#d84315',
})
</script>如何定义自定义组件样式
自v4.1.0开始,组件内部删除了样式隔离,您可以直接在页面中使用class选择器任意修改组件内部的样式。值得注意的是,App可能需要添加 !important 才能覆盖默认样式。 例如:
<template>
<un-page>
<view>
<un-button type="primary" text="Primary Button"></un-button>
<text>Hello uView-unix</text>
</view>
</un-page>
</template>
<style>
.un-button {
background-color: #f00;
padding: 10px 20px;
}
</style>