设置全局的主题颜色
在Ability中设置ThemeControl，需要在onWindowStageCreate()方法中setDefaultTheme。
//自定义
class AppColors implements CustomColors {
brand = "#ff0b3885"
iconPrimary = "#ff272867"
iconFourth = "#FFD53032"
fontPrimary = "#000"
}
// 创建
const abilityThemeColors = new AppColors();
// 应用
onWindowStageCreate(windowStage: window.WindowStage) {
windowStage.loadContent('pages/Index', (err, data) => {
ThemeControl.setDefaultTheme({
colors: abilityThemeColors
})
});
}
}
单个Entry设置
在Entry中的onWillApplyTheme回调函数用于自定义组件获取当前生效的Theme对象。
系统缺省token色值
| 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 | #99000000 | ||
| theme.colors.fontOnTertiary | 三级文本反色 | #66ffffff | #66000000 | ||
| theme.colors.fontOnFourth | 四级文本反色 | #33ffffff | #33000000 | ||
| theme.colors.iconPrimary | 一级图标 | #e5000000 | #e5ffffff | ||
| theme.colors.iconSecondary | 二级图标 | #99000000 | #99ffffff | ||
| theme.colors.iconTertiary | 三级图标 | #66000000 | #66ffffff | ||
| theme.colors.iconFourth | 四级图标 | #33000000 | #33ffffff | ||
| theme.colors.iconEmphasize | 高亮图标 | #ff0a59f7 | #ff317af7 | ||
| theme.colors.iconSubEmphasize | 高亮辅助图标 | #660a59f7 | #66317af7 | ||
| theme.colors.iconOnPrimary | 一级图标反色 | #ffffffff | #ff000000 | ||
| theme.colors.iconOnSecondary | 二级图标反色 | #99ffffff | #99000000 | ||
| theme.colors.iconOnTertiary | 三级图标反色 | #66ffffff | #66000000 | ||
| theme.colors.iconOnFourth | 四级图标反色 | #33ffffff | #33000000 | ||
| theme.colors.backgroundPrimary | 一级背景（实色/不透明色） | #ffffffff | #ffe5e5e5 | ||
| theme.colors.backgroundSecondary | 二级背景（实色/不透明色） | #fff1f3f5 | #ff191a1c | ||
| theme.colors.backgroundTertiary | 三级背景（实色/不透明色） | #ffe5e5ea | #ff202224 | ||
| theme.colors.backgroundFourth | 四级背景（实色/不透明色） | #ffd1d1d6 | #ff2e3033 | ||
| theme.colors.backgroundEmphasize | 高亮背景（实色/不透明色） | #ff0a59f7 | #ff317af7 | ||
| theme.colors.compForegroundPrimary | 前背景 | #ff000000 | #ffe5e5e5 | ||
| theme.colors.compBackgroundPrimary | 白色背景 | #ffffffff | #ffffffff | ||
| theme.colors.compBackgroundPrimaryTran | 白色透明背景 | #ffffffff | #33ffffff | ||
| theme.colors.compBackgroundPrimaryContrary | 常亮背景 | #ffffffff | #ffe5e5e5 | ||
| theme.colors.compBackgroundGray | 灰色背景 | #fff1f3f5 | #ffe5e5ea | ||
| theme.colors.compBackgroundSecondary | 二级背景 | #19000000 | #19ffffff | ||
| theme.colors.compBackgroundTertiary | 三级背景 | #0c000000 | #0cffffff | ||
| theme.colors.compBackgroundEmphasize | 高亮背景 | #ff0a59f7 | #ff317af7 | ||
| theme.colors.compBackgroundNeutral | 黑色中性高亮背景 | #ff000000 | #ffffffff | ||
| theme.colors.compEmphasizeSecondary | 20%高亮背景 | #330a59f7 | #33317af7 | ||
| theme.colors.compEmphasizeTertiary | 10%高亮背景 | #190a59f7 | #19317af7 | ||
| theme.colors.compDivider | 分割线颜色 | #33000000 | #33ffffff | ||
| theme.colors.compCommonContrary | 通用反色 | #ffffffff | #ff000000 | ||
| theme.colors.compBackgroundFocus | 获焦态背景色 | #fff1f3f5 | #ff000000 | ||
| theme.colors.compFocusedPrimary | 获焦态一级反色 | #e5000000 | #e5ffffff | ||
| theme.colors.compFocusedSecondary | 获焦态二级反色 | #99000000 | #99ffffff | ||
| theme.colors.compFocusedTertiary | 获焦态三级反色 | #66000000 | #66ffffff | ||
| theme.colors.interactiveHover | 通用悬停交互式颜色 | #0c000000 | #0cffffff | ||
| theme.colors.interactivePressed | 通用按压交互式颜色 | #19000000 | #19ffffff | ||
| theme.colors.interactiveFocus | 通用获焦交互式颜色 | #ff0a59f7 | #ff317af7 | ||
| theme.colors.interactiveActive | 通用激活交互式颜色 | #ff0a59f7 | #ff317af7 | ||
| theme.colors.interactiveSelect | 通用选择交互式颜色 | #33000000 | #33ffffff | ||
| theme.colors.interactiveClick | 通用点击交互式颜色 | #19000000 | #19ffffff |
