UCS Design

Appearance

Background Color ​

CSS属性中的 background-color 会设置元素的背景色。

主色 ​

主题
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

* 函数方法 ​

getOsBackground(options) ​

获取背景颜色

options ​

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

温馨提示

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

vue
<template>
	<view class="box" :style="[getOsBackground('primary')]">

	</view>
</template>

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

<style>
	.box {
		width: 100%;
		height: 123px;
	}
</style>
vue
<template>
	<view class="box" :style="[getOsBackground('#604CFC')]">

	</view>
</template>

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

<style>
	.box {
		width: 100%;
		height: 123px;
	}
</style>

参见 ​