UCS Design

Appearance

Color ​

color CSS 属性设置文本及文本装饰（text-decoration）的前景色颜色值。

主色 ​

主题
primary
#604CFC

辅助色 ​

成功
success
#07C160
警告
warning
#EDA20C
危险
danger
#D9514C

中性色 ​

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

内置色彩 ​

Red / 浪漫红
red
#F53F3F
Orange Red / 晚秋红
orangered
#F77234
Orange / 活力橙
orange
#FF7D00
Gold / 黄昏
gold
#F7BA1E
Yellow / 柠檬黄
yellow
#FADC19
Lime / 新生绿
lime
#9FDB1D
Green / 仙野绿
green
#00B42A
Cyan / 碧涛青
cyan
#14C9C9
Blue / 海蔚蓝
blue
#3491FA
Arco Blue / 极致蓝
arcoblue
#165DFF
Purple / 暗夜紫
purple
#722ED1
Pink Purple / 青春紫
pinkpurple
#D91AD9
Magenta / 品红
magenta
#F5319D

* 函数方法 ​

getOsTextColor(options) ​

获取文本颜色

options ​

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

温馨提示

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

vue
<template>
	<text :style="[getOsTextColor('primary')]">
		欢迎使用 ucs-css 原子化样式
	</text>
</template>

<script setup>
	import { getOsTextColor } from "@/uni_modules/ucs-css"; 
</script>

<style>
	
</style>
vue
<template>
	<text :style="[getOsTextColor('#604CFC')]">
		欢迎使用 ucs-css 原子化样式
	</text>
</template>

<script setup>
	import { getOsTextColor } from "@/uni_modules/ucs-css"; 
</script>

<style>
	
</style>

参见 ​