| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302 |
- import { CustomColors, CustomTheme } from '@kit.ArkUI';
- // 默认主题色(浅色)
- export class DefaultColors implements CustomColors {
- brand: ResourceColor = '#ff0a59f7';
- warning: ResourceColor = '#ffe84026';
- alert: ResourceColor = '#ffed6f21';
- confirm: ResourceColor = '#ff64bb5c';
- fontPrimary: ResourceColor = '#e5000000'; // 黑色
- fontSecondary: ResourceColor = '#99000000';
- fontTertiary: ResourceColor = '#66000000';
- fontFourth: ResourceColor = '#33000000';
- fontEmphasize: ResourceColor = '#ff0a59f7';
- fontOnPrimary: ResourceColor = '#ffffffff'; // 白色
- fontOnSecondary: ResourceColor = '#99ffffff';
- fontOnTertiary: ResourceColor = '#66ffffff';
- fontOnFourth: ResourceColor = '#33ffffff';
- iconPrimary: ResourceColor = '#e5000000';
- iconSecondary: ResourceColor = '#99000000';
- iconTertiary: ResourceColor = '#66000000';
- iconFourth: ResourceColor = '#33000000';
- iconEmphasize: ResourceColor = '#ff0a59f7';
- iconSubEmphasize: ResourceColor = '#660a59f7';
- iconOnPrimary: ResourceColor = '#ffffffff';
- iconOnSecondary: ResourceColor = '#99ffffff';
- iconOnTertiary: ResourceColor = '#66ffffff';
- iconOnFourth: ResourceColor = '#33ffffff';
- backgroundPrimary: ResourceColor = '#ffffffff';
- backgroundSecondary: ResourceColor = '#fff1f3f5';
- backgroundTertiary: ResourceColor = '#ffe5e5ea';
- backgroundFourth: ResourceColor = '#ffd1d1d6';
- backgroundEmphasize: ResourceColor = '#ff0a59f7';
- compForegroundPrimary: ResourceColor = '#ff000000';
- compBackgroundPrimary: ResourceColor = '#ffffffff';
- compBackgroundPrimaryTran: ResourceColor = '#ffffffff';
- compBackgroundPrimaryContrary: ResourceColor = '#ffffffff';
- compBackgroundGray: ResourceColor = '#fff1f3f5';
- compBackgroundSecondary: ResourceColor = '#19000000';
- compBackgroundTertiary: ResourceColor = '#0c000000';
- compBackgroundEmphasize: ResourceColor = '#ff0a59f7';
- compBackgroundNeutral: ResourceColor = '#ff000000';
- compEmphasizeSecondary: ResourceColor = '#330a59f7';
- compEmphasizeTertiary: ResourceColor = '#190a59f7';
- compDivider: ResourceColor = '#33000000';
- compCommonContrary: ResourceColor = '#ffffffff';
- compBackgroundFocus: ResourceColor = '#fff1f3f5';
- compFocusedPrimary: ResourceColor = '#e5000000';
- compFocusedSecondary: ResourceColor = '#99000000';
- compFocusedTertiary: ResourceColor = '#66000000';
- interactiveHover: ResourceColor = '#0c000000';
- interactivePressed: ResourceColor = '#19000000';
- interactiveFocus: ResourceColor = '#ff0a59f7';
- interactiveActive: ResourceColor = '#ff0a59f7';
- interactiveSelect: ResourceColor = '#33000000';
- interactiveClick: ResourceColor = '#19000000';
- }
- // 暮色主题(深色)
- export class TwilightColors implements CustomColors {
- brand: ResourceColor = '#ff317af7';
- warning: ResourceColor = '#ffd94838';
- alert: ResourceColor = '#ffdb6b42';
- confirm: ResourceColor = '#ff5ba854';
- fontPrimary: ResourceColor = '#e5ffffff'; // 白色
- fontSecondary: ResourceColor = '#99ffffff';
- fontTertiary: ResourceColor = '#66ffffff';
- fontFourth: ResourceColor = '#33ffffff';
- fontEmphasize: ResourceColor = '#ff317af7';
- fontOnPrimary: ResourceColor = '#ffffffff'; // 白色
- fontOnSecondary: ResourceColor = '#e5000000'; // 深色按钮反色
- fontOnTertiary: ResourceColor = '#e5000000';
- fontOnFourth: ResourceColor = '#e5000000';
- iconPrimary: ResourceColor = '#e5ffffff';
- iconSecondary: ResourceColor = '#99ffffff';
- iconTertiary: ResourceColor = '#66ffffff';
- iconFourth: ResourceColor = '#33ffffff';
- iconEmphasize: ResourceColor = '#ff317af7';
- iconSubEmphasize: ResourceColor = '#66317af7';
- iconOnPrimary: ResourceColor = '#ffffffff';
- iconOnSecondary: ResourceColor = '#e5000000';
- iconOnTertiary: ResourceColor = '#e5000000';
- iconOnFourth: ResourceColor = '#e5000000';
- backgroundPrimary: ResourceColor = '#ffe5e5e5';
- backgroundSecondary: ResourceColor = '#ff191a1c';
- backgroundTertiary: ResourceColor = '#ff202224';
- backgroundFourth: ResourceColor = '#ff2e3033';
- backgroundEmphasize: ResourceColor = '#ff317af7';
- compForegroundPrimary: ResourceColor = '#ffe5e5e5';
- compBackgroundPrimary: ResourceColor = '#23272e'; // 深色卡片
- compBackgroundPrimaryTran: ResourceColor = '#33ffffff';
- compBackgroundPrimaryContrary: ResourceColor = '#ffe5e5e5';
- compBackgroundGray: ResourceColor = '#ffe5e5ea';
- compBackgroundSecondary: ResourceColor = '#19ffffff';
- compBackgroundTertiary: ResourceColor = '#0cffffff';
- compBackgroundEmphasize: ResourceColor = '#ff317af7';
- compBackgroundNeutral: ResourceColor = '#23272e';
- compEmphasizeSecondary: ResourceColor = '#33317af7';
- compEmphasizeTertiary: ResourceColor = '#19317af7';
- compDivider: ResourceColor = '#33ffffff';
- compCommonContrary: ResourceColor = '#ff000000';
- compBackgroundFocus: ResourceColor = '#ff000000';
- compFocusedPrimary: ResourceColor = '#e5ffffff';
- compFocusedSecondary: ResourceColor = '#99ffffff';
- compFocusedTertiary: ResourceColor = '#66ffffff';
- interactiveHover: ResourceColor = '#0cffffff';
- interactivePressed: ResourceColor = '#19ffffff';
- interactiveFocus: ResourceColor = '#ff317af7';
- interactiveActive: ResourceColor = '#ff317af7';
- interactiveSelect: ResourceColor = '#33ffffff';
- interactiveClick: ResourceColor = '#19ffffff';
- }
- // 森林主题(浅色)
- export class ForestColors implements CustomColors {
- brand: ResourceColor = '#ff64bb5c';
- warning: ResourceColor = '#ffd94838';
- alert: ResourceColor = '#ffdb6b42';
- confirm: ResourceColor = '#ff317af7';
- fontPrimary: ResourceColor = '#e5000000'; // 黑色
- fontSecondary: ResourceColor = '#99000000';
- fontTertiary: ResourceColor = '#66000000';
- fontFourth: ResourceColor = '#33000000';
- fontEmphasize: ResourceColor = '#ff64bb5c';
- fontOnPrimary: ResourceColor = '#ffffffff'; // 白色
- fontOnSecondary: ResourceColor = '#99ffffff';
- fontOnTertiary: ResourceColor = '#66ffffff';
- fontOnFourth: ResourceColor = '#33ffffff';
- iconPrimary: ResourceColor = '#e5000000';
- iconSecondary: ResourceColor = '#99000000';
- iconTertiary: ResourceColor = '#66000000';
- iconFourth: ResourceColor = '#33000000';
- iconEmphasize: ResourceColor = '#ff64bb5c';
- iconSubEmphasize: ResourceColor = '#6664bb5c';
- iconOnPrimary: ResourceColor = '#ffffffff';
- iconOnSecondary: ResourceColor = '#99ffffff';
- iconOnTertiary: ResourceColor = '#66ffffff';
- iconOnFourth: ResourceColor = '#33ffffff';
- backgroundPrimary: ResourceColor = '#ffffffff';
- backgroundSecondary: ResourceColor = '#fff1f3f5';
- backgroundTertiary: ResourceColor = '#ffe5e5ea';
- backgroundFourth: ResourceColor = '#ffd1d1d6';
- backgroundEmphasize: ResourceColor = '#ff64bb5c';
- compForegroundPrimary: ResourceColor = '#ff000000';
- compBackgroundPrimary: ResourceColor = '#ffffffff';
- compBackgroundPrimaryTran: ResourceColor = '#ffffffff';
- compBackgroundPrimaryContrary: ResourceColor = '#ffffffff';
- compBackgroundGray: ResourceColor = '#fff1f3f5';
- compBackgroundSecondary: ResourceColor = '#19000000';
- compBackgroundTertiary: ResourceColor = '#0c000000';
- compBackgroundEmphasize: ResourceColor = '#ff64bb5c';
- compBackgroundNeutral: ResourceColor = '#ff000000';
- compEmphasizeSecondary: ResourceColor = '#3364bb5c';
- compEmphasizeTertiary: ResourceColor = '#1964bb5c';
- compDivider: ResourceColor = '#33000000';
- compCommonContrary: ResourceColor = '#ffffffff';
- compBackgroundFocus: ResourceColor = '#fff1f3f5';
- compFocusedPrimary: ResourceColor = '#e5000000';
- compFocusedSecondary: ResourceColor = '#99000000';
- compFocusedTertiary: ResourceColor = '#66000000';
- interactiveHover: ResourceColor = '#0c000000';
- interactivePressed: ResourceColor = '#19000000';
- interactiveFocus: ResourceColor = '#ff64bb5c';
- interactiveActive: ResourceColor = '#ff64bb5c';
- interactiveSelect: ResourceColor = '#33000000';
- interactiveClick: ResourceColor = '#19000000';
- }
- // 珊瑚主题(浅色)
- export class CoralColors implements CustomColors {
- brand: ResourceColor = '#ffed6f21';
- warning: ResourceColor = '#ffe84026';
- alert: ResourceColor = '#ff0a59f7';
- confirm: ResourceColor = '#ff64bb5c';
- fontPrimary: ResourceColor = '#e5000000'; // 黑色
- fontSecondary: ResourceColor = '#99000000';
- fontTertiary: ResourceColor = '#66000000';
- fontFourth: ResourceColor = '#33000000';
- fontEmphasize: ResourceColor = '#ffed6f21';
- fontOnPrimary: ResourceColor = '#ffffffff'; // 白色
- fontOnSecondary: ResourceColor = '#99ffffff';
- fontOnTertiary: ResourceColor = '#66ffffff';
- fontOnFourth: ResourceColor = '#33ffffff';
- iconPrimary: ResourceColor = '#e5000000';
- iconSecondary: ResourceColor = '#99000000';
- iconTertiary: ResourceColor = '#66000000';
- iconFourth: ResourceColor = '#33000000';
- iconEmphasize: ResourceColor = '#ffed6f21';
- iconSubEmphasize: ResourceColor = '#66ed6f21';
- iconOnPrimary: ResourceColor = '#ffffffff';
- iconOnSecondary: ResourceColor = '#99ffffff';
- iconOnTertiary: ResourceColor = '#66ffffff';
- iconOnFourth: ResourceColor = '#33ffffff';
- backgroundPrimary: ResourceColor = '#ffffffff';
- backgroundSecondary: ResourceColor = '#fff1f3f5';
- backgroundTertiary: ResourceColor = '#ffe5e5ea';
- backgroundFourth: ResourceColor = '#ffd1d1d6';
- backgroundEmphasize: ResourceColor = '#ffed6f21';
- compForegroundPrimary: ResourceColor = '#ff000000';
- compBackgroundPrimary: ResourceColor = '#ffffffff';
- compBackgroundPrimaryTran: ResourceColor = '#ffffffff';
- compBackgroundPrimaryContrary: ResourceColor = '#ffffffff';
- compBackgroundGray: ResourceColor = '#fff1f3f5';
- compBackgroundSecondary: ResourceColor = '#19000000';
- compBackgroundTertiary: ResourceColor = '#0c000000';
- compBackgroundEmphasize: ResourceColor = '#ffed6f21';
- compBackgroundNeutral: ResourceColor = '#ff000000';
- compEmphasizeSecondary: ResourceColor = '#33ed6f21';
- compEmphasizeTertiary: ResourceColor = '#19ed6f21';
- compDivider: ResourceColor = '#33000000';
- compCommonContrary: ResourceColor = '#ffffffff';
- compBackgroundFocus: ResourceColor = '#fff1f3f5';
- compFocusedPrimary: ResourceColor = '#e5000000';
- compFocusedSecondary: ResourceColor = '#99000000';
- compFocusedTertiary: ResourceColor = '#66000000';
- interactiveHover: ResourceColor = '#0c000000';
- interactivePressed: ResourceColor = '#19000000';
- interactiveFocus: ResourceColor = '#ffed6f21';
- interactiveActive: ResourceColor = '#ffed6f21';
- interactiveSelect: ResourceColor = '#33000000';
- interactiveClick: ResourceColor = '#19000000';
- }
- // 极夜主题(深色)
- export class MidnightColors implements CustomColors {
- brand: ResourceColor = '#ff5ba854';
- warning: ResourceColor = '#ffd94838';
- alert: ResourceColor = '#ffdb6b42';
- confirm: ResourceColor = '#ff317af7';
- fontPrimary: ResourceColor = '#e5ffffff'; // 白色
- fontSecondary: ResourceColor = '#99ffffff';
- fontTertiary: ResourceColor = '#66ffffff';
- fontFourth: ResourceColor = '#33ffffff';
- fontEmphasize: ResourceColor = '#ff5ba854';
- fontOnPrimary: ResourceColor = '#ffffffff'; // 白色
- fontOnSecondary: ResourceColor = '#e5000000'; // 深色按钮反色
- fontOnTertiary: ResourceColor = '#e5000000';
- fontOnFourth: ResourceColor = '#e5000000';
- iconPrimary: ResourceColor = '#e5ffffff';
- iconSecondary: ResourceColor = '#99ffffff';
- iconTertiary: ResourceColor = '#66ffffff';
- iconFourth: ResourceColor = '#33ffffff';
- iconEmphasize: ResourceColor = '#ff5ba854';
- iconSubEmphasize: ResourceColor = '#665ba854';
- iconOnPrimary: ResourceColor = '#ffffffff';
- iconOnSecondary: ResourceColor = '#e5000000';
- iconOnTertiary: ResourceColor = '#e5000000';
- iconOnFourth: ResourceColor = '#e5000000';
- backgroundPrimary: ResourceColor = '#ffe5e5e5';
- backgroundSecondary: ResourceColor = '#ff191a1c';
- backgroundTertiary: ResourceColor = '#ff202224';
- backgroundFourth: ResourceColor = '#ff2e3033';
- backgroundEmphasize: ResourceColor = '#ff5ba854';
- compForegroundPrimary: ResourceColor = '#ffe5e5e5';
- compBackgroundPrimary: ResourceColor = '#23272e'; // 深色卡片
- compBackgroundPrimaryTran: ResourceColor = '#33ffffff';
- compBackgroundPrimaryContrary: ResourceColor = '#ffe5e5e5';
- compBackgroundGray: ResourceColor = '#ffe5e5ea';
- compBackgroundSecondary: ResourceColor = '#19ffffff';
- compBackgroundTertiary: ResourceColor = '#0cffffff';
- compBackgroundEmphasize: ResourceColor = '#ff5ba854';
- compBackgroundNeutral: ResourceColor = '#23272e';
- compEmphasizeSecondary: ResourceColor = '#335ba854';
- compEmphasizeTertiary: ResourceColor = '#195ba854';
- compDivider: ResourceColor = '#33ffffff';
- compCommonContrary: ResourceColor = '#ff000000';
- compBackgroundFocus: ResourceColor = '#ff000000';
- compFocusedPrimary: ResourceColor = '#e5ffffff';
- compFocusedSecondary: ResourceColor = '#99ffffff';
- compFocusedTertiary: ResourceColor = '#66ffffff';
- interactiveHover: ResourceColor = '#0cffffff';
- interactivePressed: ResourceColor = '#19ffffff';
- interactiveFocus: ResourceColor = '#ff5ba854';
- interactiveActive: ResourceColor = '#ff5ba854';
- interactiveSelect: ResourceColor = '#33ffffff';
- interactiveClick: ResourceColor = '#19ffffff';
- }
- export class DefaultTheme implements CustomTheme {
- public colors: DefaultColors = new DefaultColors();
- }
- export class TwilightTheme implements CustomTheme {
- public colors: TwilightColors = new TwilightColors();
- }
- export class ForestTheme implements CustomTheme {
- public colors: ForestColors = new ForestColors();
- }
- export class CoralTheme implements CustomTheme {
- public colors: CoralColors = new CoralColors();
- }
- export class MidnightTheme implements CustomTheme {
- public colors: MidnightColors = new MidnightColors();
- }
- export const ThemeList: CustomTheme[] = [
- new DefaultTheme(),
- new TwilightTheme(),
- new ForestTheme(),
- new CoralTheme(),
- new MidnightTheme()
- ];
- export const myTheme:CustomTheme=new MidnightTheme();
|