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>