Theme 主题

全局主题配置

平台兼容性

Android uni-app-x	iOS uni-app-x	web	小程序
√	√	√	√

主题配置

参数	说明	类型	默认值
primary	主色	String	#3c9cff
primaryDark	主色暗色	String	#398ade
primaryLight	主色浅色	String	#ecf5ff
primaryDisabled	主色禁用色	String	#9acafc
success	成功色	String	#5ac725
successDark	成功色暗色	String	#53c21d
successLight	成功色浅色	String	#f5fff0
successDisabled	成功色禁用色	String	#a9e08f
warning	警告色	String	#f9ae3d
warningDark	警告色暗色	String	#f1a532
warningLight	警告色浅色	String	#fdf6ec
warningDisabled	警告色禁用色	String	#f9d39b
error	错误色	String	#f56c6c
errorDark	错误色暗色	String	#e45656
errorLight	错误色浅色	String	#fef0f0
errorDisabled	错误色禁用色	String	#f7b2b2
info	信息色	String	#909399
infoDark	信息色暗色	String	#767a82
infoDisabled	信息色浅色	String	#f4f4f5
infoLight	信息色禁用色	String	#c4c6c9
main	主色	String	#303133
regular	正常色	String	#606266
summary	备注色	String	#909193
placeholder	占位色	String	#c0c4cc
title	标题色	String	#8F9C9E
background	背景色	String	#f3f4f6
disabled	禁用色	String	#c8c9cc
border	边框色	String	#e7e6e4

示例代码

引入全局配置文件

html

<template>
	<ux-page :colors="['white']">
		<ux-navbar title="Theme" :border="false"></ux-navbar>
		
		<ux-scroll :scroll-y="true">
			<template v-for="(item, index) in colors" :key="index">
				<ux-text :text="item.name" :margin="[10]"></ux-text>
				<ux-row justify="around">
					<view class="item" :style="`background-color: ${c.color};`" v-for="(c, i) in item.colors" :key="i">
						<text class="name" :class="i == item.colors.length - 1 && index < 5?'color-light':''">{{ c.name }}</text>
						<text class="color" :class="i == item.colors.length - 1 && index < 5?'color-light':''">{{ c.color }}</text>
					</view>
				</ux-row>
			</template>
			<ux-placeholder :height="50"></ux-placeholder>
		</ux-scroll>
	</ux-page>
</template>

<script>
	import {$ux} from "@/uni_modules/ux-frame/index.uts"
	
	type Item = {
		name: string,
		colors: Color[]
	}
	
	type Color = {
		name: string,
		color: string
	}

	export default {
		data() {
			return {
				title: '',
				colors: [{
					name: '主色调',
					colors: [{
						name: 'Primary',
						color: $ux.theme.primary!
					},{
						name: 'Dark',
						color: $ux.theme.primaryDark!
					},{
						name: 'Disabled',
						color: $ux.theme.primaryDisabled!
					},{
						name: 'Light',
						color: $ux.theme.primaryLight!
					}] as Color[]
				},{
					name: 'Success',
					colors: [{
						name: 'Success',
						color: $ux.theme.success!
					},{
						name: 'Dark',
						color: $ux.theme.successDark!
					},{
						name: 'Disabled',
						color: $ux.theme.successDisabled!
					},{
						name: 'Light',
						color: $ux.theme.successLight!
					}] as Color[]
				},{
					name: 'Error',
					colors: [{
						name: 'Error',
						color: $ux.theme.error!
					},{
						name: 'Dark',
						color: $ux.theme.errorDark!
					},{
						name: 'Disabled',
						color: $ux.theme.errorDisabled!
					},{
						name: 'Light',
						color: $ux.theme.errorLight!
					}] as Color[]
				},{
					name: 'Warn',
					colors: [{
						name: 'Warn',
						color: $ux.theme.warn!
					},{
						name: 'Dark',
						color: $ux.theme.warnDark!
					},{
						name: 'Disabled',
						color: $ux.theme.warnDisabled!
					},{
						name: 'Light',
						color: $ux.theme.warnLight!
					}] as Color[]
				},{
					name: 'Info',
					colors: [{
						name: 'Info',
						color: $ux.theme.info!
					},{
						name: 'Dark',
						color: $ux.theme.infoDark!
					},{
						name: 'Disabled',
						color: $ux.theme.infoDisabled!
					},{
						name: 'Light',
						color: $ux.theme.infoLight!
					}] as Color[]
				},{
					name: '文字颜色',
					colors: [{
						name: '主要文字',
						color: $ux.theme.main!
					},{
						name: '常规文字',
						color: $ux.theme.regular!
					},{
						name: '次要文字',
						color: $ux.theme.summary!
					},{
						name: '占位文字',
						color: $ux.theme.placeholder!
					}] as Color[]
				},{
					name: '其他',
					colors: [{
						name: '标题颜色',
						color: $ux.theme.title!
					},{
						name: '背景颜色',
						color: $ux.theme.background!
					},{
						name: '禁用颜色',
						color: $ux.theme.disabled!
					},{
						name: '边框',
						color: $ux.theme.border!
					}] as Color[]
				}] as Item[]
			}
		},
	}
</script>

<template>
	<ux-page :colors="['white']">
		<ux-navbar title="Theme" :border="false"></ux-navbar>
		
		<ux-scroll :scroll-y="true">
			<template v-for="(item, index) in colors" :key="index">
				<ux-text :text="item.name" :margin="[10]"></ux-text>
				<ux-row justify="around">
					<view class="item" :style="`background-color: ${c.color};`" v-for="(c, i) in item.colors" :key="i">
						<text class="name" :class="i == item.colors.length - 1 && index < 5?'color-light':''">{{ c.name }}</text>
						<text class="color" :class="i == item.colors.length - 1 && index < 5?'color-light':''">{{ c.color }}</text>
					</view>
				</ux-row>
			</template>
			<ux-placeholder :height="50"></ux-placeholder>
		</ux-scroll>
	</ux-page>
</template>

<script>
	import {$ux} from "@/uni_modules/ux-frame/index.uts"
	
	type Item = {
		name: string,
		colors: Color[]
	}
	
	type Color = {
		name: string,
		color: string
	}

	export default {
		data() {
			return {
				title: '',
				colors: [{
					name: '主色调',
					colors: [{
						name: 'Primary',
						color: $ux.theme.primary!
					},{
						name: 'Dark',
						color: $ux.theme.primaryDark!
					},{
						name: 'Disabled',
						color: $ux.theme.primaryDisabled!
					},{
						name: 'Light',
						color: $ux.theme.primaryLight!
					}] as Color[]
				},{
					name: 'Success',
					colors: [{
						name: 'Success',
						color: $ux.theme.success!
					},{
						name: 'Dark',
						color: $ux.theme.successDark!
					},{
						name: 'Disabled',
						color: $ux.theme.successDisabled!
					},{
						name: 'Light',
						color: $ux.theme.successLight!
					}] as Color[]
				},{
					name: 'Error',
					colors: [{
						name: 'Error',
						color: $ux.theme.error!
					},{
						name: 'Dark',
						color: $ux.theme.errorDark!
					},{
						name: 'Disabled',
						color: $ux.theme.errorDisabled!
					},{
						name: 'Light',
						color: $ux.theme.errorLight!
					}] as Color[]
				},{
					name: 'Warn',
					colors: [{
						name: 'Warn',
						color: $ux.theme.warn!
					},{
						name: 'Dark',
						color: $ux.theme.warnDark!
					},{
						name: 'Disabled',
						color: $ux.theme.warnDisabled!
					},{
						name: 'Light',
						color: $ux.theme.warnLight!
					}] as Color[]
				},{
					name: 'Info',
					colors: [{
						name: 'Info',
						color: $ux.theme.info!
					},{
						name: 'Dark',
						color: $ux.theme.infoDark!
					},{
						name: 'Disabled',
						color: $ux.theme.infoDisabled!
					},{
						name: 'Light',
						color: $ux.theme.infoLight!
					}] as Color[]
				},{
					name: '文字颜色',
					colors: [{
						name: '主要文字',
						color: $ux.theme.main!
					},{
						name: '常规文字',
						color: $ux.theme.regular!
					},{
						name: '次要文字',
						color: $ux.theme.summary!
					},{
						name: '占位文字',
						color: $ux.theme.placeholder!
					}] as Color[]
				},{
					name: '其他',
					colors: [{
						name: '标题颜色',
						color: $ux.theme.title!
					},{
						name: '背景颜色',
						color: $ux.theme.background!
					},{
						name: '禁用颜色',
						color: $ux.theme.disabled!
					},{
						name: '边框',
						color: $ux.theme.border!
					}] as Color[]
				}] as Item[]
			}
		},
	}
</script>

效果预览

Theme

Theme 主题 ​

平台兼容性 ​

主题配置 ​

示例代码 ​

效果预览 ​

Theme 主题

平台兼容性

主题配置

示例代码

效果预览