UCS Design

Appearance

色彩 ​

Ucs Design 的设计团队采用 Arco 色彩模型进行设计，该模型更便于设计师在调整色彩时对于颜色有明确的心理预期，同时也方便团队间的沟通。

主题色 ​

主题
primary

辅助色 ​

成功
success
警告
warning
危险
danger

中性色 ​

中性灰
grey
#a9aeb8
grey-1
#ffffff
grey-2
#f7f8fa
grey-3
#f2f3f5
grey-4
#e5e6eb
grey-5
#c9cdd4
grey-6
#a9aeb8
grey-7
#86909c
grey-8
#6b7785
grey-9
#4e5969
grey-10
#272e3b
grey-11
#1d2129
grey-12
#141414

获取内置色彩 ​

getOsColor(options) ​

获取 Ucs Design 色彩模型内置色彩

options ​

参数名称类型必填可选值描述
colorstring是-UCS 色彩变量 或 hex颜色值

使用演示 ​

温馨提示

使用UCS 色彩变量，切换暗黑模式时则自动变更为深色颜色值。

ts
<script setup>
	import { getOsColor } from "@/uni_modules/ucs-config"; 
	/**
	 * 使用 UCS 色彩变量
	 * 浅色模式下获取值为：#604CFC
	 * 深色模式下获取值为：#8772FD
	 */
	console.log(getOsColor("primary")) 
	
	/**
	 * 使用 hex 颜色值
	 * 获取值为：#1890ff
	 */
	console.log(getOsColor("#1890ff")) 
</script>
vue
<template>
	<view>
	<!-- 使用内置色彩变量 -->
	<!-- 浅色模式下获取值为：#604CFC -->
	<!-- 深色模式下获取值为：#8772FD -->
	{{getOsColor("primary")}}
</view>
</template>

<script setup>
	import { getOsColor } from "@/uni_modules/ucs-config"; 
</script>

更新时间: