内置颜色

TuniaoUI 内置了 19 种命名色，每种颜色提供 dark、normal、disabled、light 四种变种。

样式展示

red-dark

red

red-disabled

red-light

purplered-dark

purplered

purplered-disabled

purplered-light

purple-dark

purple

purple-disabled

purple-light

bluepurple-dark

bluepurple

bluepurple-disabled

bluepurple-light

aquablue-dark

aquablue

aquablue-disabled

aquablue-light

blue-dark

blue

blue-disabled

blue-light

indigo-dark

indigo

indigo-disabled

indigo-light

cyan-dark

cyan

cyan-disabled

cyan-light

teal-dark

teal

teal-disabled

teal-light

green-dark

green

green-disabled

green-light

yellowgreen-dark

yellowgreen

yellowgreen-disabled

yellowgreen-light

lime-dark

lime

lime-disabled

lime-light

yellow-dark

yellow

yellow-disabled

yellow-light

orangeyellow-dark

orangeyellow

orangeyellow-disabled

orangeyellow-light

orange-dark

orange

orange-disabled

orange-light

orangered-dark

orangered

orangered-disabled

orangered-light

brown-dark

brown

brown-disabled

brown-light

grey-dark

grey

grey-disabled

grey-light

gray-dark

gray

gray-disabled

gray-light

颜色有效值

内置颜色名称

red / purplered / purple / bluepurple / aquablue / blue / indigo / cyan / teal / green / yellowgreen / lime / yellow / orangeyellow / orange / orangered / brown / grey / gray

变种后缀

变种	后缀	用途
normal	无后缀	默认颜色
dark	_dark	深色变种，用于强调
light	_light	浅色变种，用于背景
disabled	_disabled	禁用态颜色

使用方式

// 资源色引用
.backgroundColor($r("app.color.tn_color_red"))
.backgroundColor($r("app.color.tn_color_red_light"))
.backgroundColor($r("app.color.tn_color_red_dark"))
.backgroundColor($r("app.color.tn_color_red_disabled"))

文字颜色

场景	资源引用	色值
主要文字	$r("app.color.tn_text_color_primary")	#080808
次要文字	$r("app.color.tn_text_color_secondary")	#9c9c9c
占位文字	$r("app.color.tn_text_color_placeholder")	#838383
禁用文字	$r("app.color.tn_text_color_disabled")	#e6e6e6

背景颜色

场景	资源引用
组件默认背景	$r("app.color.tn_bg_color")
页面背景	$r("app.color.tn_bg_color_page")
覆盖层背景	$r("app.color.tn_bg_color_overlay")
遮罩背景	$r("app.color.tn_overlay_bg")