鸿蒙UI开发——自定义主题色

1、概述

ArkTs提供了应用内主题切换功能，支持全局主题切换，也支持局部主题切换，效果如下。本文针对主题切换做简单介绍。

2、主题色

ArkTs提供了一套内置主题配色，有Colors对象持有，它包含了默认情况下，关于主题的基本资源枚举，枚举的key与说明如下：

brand  品牌色。warning  一级警示色。alert  二级提示色。confirm  确认色。fontPrimary  一级文本字体颜色。fontSecondary  二级文本字体颜色。fontTertiary  三级文本字体颜色。fontFourth  四级文本字体颜色。fontEmphasize  高亮字体颜色。fontOnPrimary  一级文本反转颜色，用于彩色背景。fontOnSecondary  二级文本反转颜色，用于彩色背景。fontOnTertiary  三级文本反转颜色，用于彩色背景。fontOnFourth  四级文本反转颜色，用于彩色背景。iconPrimary  一级图标颜色。iconSecondary  二级图标颜色。iconTertiary  三级图标颜色。iconFourth  四级图标颜色。iconEmphasize  高亮图标颜色。iconSubEmphasize  高亮辅助图标颜色。iconOnPrimary  一级图标反转颜色，用于彩色背景。iconOnSecondary  二级图标反转颜色，用于彩色背景。iconOnTertiary  三级图标反转颜色，用于彩色背景。iconOnFourth  四级图标反转颜色，用于彩色背景。backgroundPrimary  一级背景颜色（实色，不透明）。backgroundSecondary  二级背景颜色（实色，不透明）。backgroundTertiary  三级背景颜色（实色，不透明）。backgroundFourth  四级背景颜色（实色，不透明）。backgroundEmphasize  高亮背景颜色（实色，不透明）。compForegroundPrimary  前背景。compBackgroundPrimary  白色背景。compBackgroundPrimaryTran  白色透明背景。compBackgroundPrimaryContrary  常亮背景。compBackgroundGray  灰色背景。compBackgroundSecondary  二级背景。compBackgroundTertiary  三级背景。compBackgroundEmphasize  高亮背景。compBackgroundNeutral  黑色中性高亮背景颜色。compEmphasizeSecondary  20%高亮背景颜色。compEmphasizeTertiary  10%高亮背景颜色。compDivider  通用分割线颜色。compCommonContrary  通用反转颜色。compBackgroundFocus  获焦态背景颜色。compFocusedPrimary  获焦态一级反转颜色。compFocusedSecondary  获焦态二级反转颜色。compFocusedTertiary  获焦态三级反转颜色。interactiveHover  通用悬停交互式颜色。interactivePressed  通用按压交互式颜色。interactiveFocus  通用获焦交互式颜色。interactiveActive  通用激活交互式颜色。interactiveSelect  通用选择交互式颜色。interactiveClick  通用点击交互式颜色。

对应的颜色罗列如下：

Token	场景类别	Light		Dark
theme.colors.brand	品牌色	#ff0a59f7		#ff317af7
theme.colors.warning	一级警示色	#ffe84026		#ffd94838
theme.colors.alert	二级警示色	#ffed6f21		#ffdb6b42
theme.colors.confirm	确认色	#ff64bb5c		#ff5ba854
theme.colors.fontPrimary	一级文本	#e5000000		#e5ffffff
theme.colors.fontSecondary	二级文本	#99000000		#99ffffff
theme.colors.fontTertiary	三级文本	#66000000		#66ffffff
theme.colors.fontFourth	四级文本	#33000000		#33ffffff
theme.colors.fontEmphasize	高亮文本	#ff0a59f7		#ff317af7
theme.colors.fontOnPrimary	一级文本反色	#ffffffff		#ff000000
theme.colors.fontOnSecondary	二级文本反色	#99ffffff<