AppTheme.ets 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302
  1. import { CustomColors, CustomTheme } from '@kit.ArkUI';
  2. // 默认主题色(浅色)
  3. export class DefaultColors implements CustomColors {
  4. brand: ResourceColor = '#ff0a59f7';
  5. warning: ResourceColor = '#ffe84026';
  6. alert: ResourceColor = '#ffed6f21';
  7. confirm: ResourceColor = '#ff64bb5c';
  8. fontPrimary: ResourceColor = '#e5000000'; // 黑色
  9. fontSecondary: ResourceColor = '#99000000';
  10. fontTertiary: ResourceColor = '#66000000';
  11. fontFourth: ResourceColor = '#33000000';
  12. fontEmphasize: ResourceColor = '#ff0a59f7';
  13. fontOnPrimary: ResourceColor = '#ffffffff'; // 白色
  14. fontOnSecondary: ResourceColor = '#99ffffff';
  15. fontOnTertiary: ResourceColor = '#66ffffff';
  16. fontOnFourth: ResourceColor = '#33ffffff';
  17. iconPrimary: ResourceColor = '#e5000000';
  18. iconSecondary: ResourceColor = '#99000000';
  19. iconTertiary: ResourceColor = '#66000000';
  20. iconFourth: ResourceColor = '#33000000';
  21. iconEmphasize: ResourceColor = '#ff0a59f7';
  22. iconSubEmphasize: ResourceColor = '#660a59f7';
  23. iconOnPrimary: ResourceColor = '#ffffffff';
  24. iconOnSecondary: ResourceColor = '#99ffffff';
  25. iconOnTertiary: ResourceColor = '#66ffffff';
  26. iconOnFourth: ResourceColor = '#33ffffff';
  27. backgroundPrimary: ResourceColor = '#ffffffff';
  28. backgroundSecondary: ResourceColor = '#fff1f3f5';
  29. backgroundTertiary: ResourceColor = '#ffe5e5ea';
  30. backgroundFourth: ResourceColor = '#ffd1d1d6';
  31. backgroundEmphasize: ResourceColor = '#ff0a59f7';
  32. compForegroundPrimary: ResourceColor = '#ff000000';
  33. compBackgroundPrimary: ResourceColor = '#ffffffff';
  34. compBackgroundPrimaryTran: ResourceColor = '#ffffffff';
  35. compBackgroundPrimaryContrary: ResourceColor = '#ffffffff';
  36. compBackgroundGray: ResourceColor = '#fff1f3f5';
  37. compBackgroundSecondary: ResourceColor = '#19000000';
  38. compBackgroundTertiary: ResourceColor = '#0c000000';
  39. compBackgroundEmphasize: ResourceColor = '#ff0a59f7';
  40. compBackgroundNeutral: ResourceColor = '#ff000000';
  41. compEmphasizeSecondary: ResourceColor = '#330a59f7';
  42. compEmphasizeTertiary: ResourceColor = '#190a59f7';
  43. compDivider: ResourceColor = '#33000000';
  44. compCommonContrary: ResourceColor = '#ffffffff';
  45. compBackgroundFocus: ResourceColor = '#fff1f3f5';
  46. compFocusedPrimary: ResourceColor = '#e5000000';
  47. compFocusedSecondary: ResourceColor = '#99000000';
  48. compFocusedTertiary: ResourceColor = '#66000000';
  49. interactiveHover: ResourceColor = '#0c000000';
  50. interactivePressed: ResourceColor = '#19000000';
  51. interactiveFocus: ResourceColor = '#ff0a59f7';
  52. interactiveActive: ResourceColor = '#ff0a59f7';
  53. interactiveSelect: ResourceColor = '#33000000';
  54. interactiveClick: ResourceColor = '#19000000';
  55. }
  56. // 暮色主题(深色)
  57. export class TwilightColors implements CustomColors {
  58. brand: ResourceColor = '#ff317af7';
  59. warning: ResourceColor = '#ffd94838';
  60. alert: ResourceColor = '#ffdb6b42';
  61. confirm: ResourceColor = '#ff5ba854';
  62. fontPrimary: ResourceColor = '#e5ffffff'; // 白色
  63. fontSecondary: ResourceColor = '#99ffffff';
  64. fontTertiary: ResourceColor = '#66ffffff';
  65. fontFourth: ResourceColor = '#33ffffff';
  66. fontEmphasize: ResourceColor = '#ff317af7';
  67. fontOnPrimary: ResourceColor = '#ffffffff'; // 白色
  68. fontOnSecondary: ResourceColor = '#e5000000'; // 深色按钮反色
  69. fontOnTertiary: ResourceColor = '#e5000000';
  70. fontOnFourth: ResourceColor = '#e5000000';
  71. iconPrimary: ResourceColor = '#e5ffffff';
  72. iconSecondary: ResourceColor = '#99ffffff';
  73. iconTertiary: ResourceColor = '#66ffffff';
  74. iconFourth: ResourceColor = '#33ffffff';
  75. iconEmphasize: ResourceColor = '#ff317af7';
  76. iconSubEmphasize: ResourceColor = '#66317af7';
  77. iconOnPrimary: ResourceColor = '#ffffffff';
  78. iconOnSecondary: ResourceColor = '#e5000000';
  79. iconOnTertiary: ResourceColor = '#e5000000';
  80. iconOnFourth: ResourceColor = '#e5000000';
  81. backgroundPrimary: ResourceColor = '#ffe5e5e5';
  82. backgroundSecondary: ResourceColor = '#ff191a1c';
  83. backgroundTertiary: ResourceColor = '#ff202224';
  84. backgroundFourth: ResourceColor = '#ff2e3033';
  85. backgroundEmphasize: ResourceColor = '#ff317af7';
  86. compForegroundPrimary: ResourceColor = '#ffe5e5e5';
  87. compBackgroundPrimary: ResourceColor = '#23272e'; // 深色卡片
  88. compBackgroundPrimaryTran: ResourceColor = '#33ffffff';
  89. compBackgroundPrimaryContrary: ResourceColor = '#ffe5e5e5';
  90. compBackgroundGray: ResourceColor = '#ffe5e5ea';
  91. compBackgroundSecondary: ResourceColor = '#19ffffff';
  92. compBackgroundTertiary: ResourceColor = '#0cffffff';
  93. compBackgroundEmphasize: ResourceColor = '#ff317af7';
  94. compBackgroundNeutral: ResourceColor = '#23272e';
  95. compEmphasizeSecondary: ResourceColor = '#33317af7';
  96. compEmphasizeTertiary: ResourceColor = '#19317af7';
  97. compDivider: ResourceColor = '#33ffffff';
  98. compCommonContrary: ResourceColor = '#ff000000';
  99. compBackgroundFocus: ResourceColor = '#ff000000';
  100. compFocusedPrimary: ResourceColor = '#e5ffffff';
  101. compFocusedSecondary: ResourceColor = '#99ffffff';
  102. compFocusedTertiary: ResourceColor = '#66ffffff';
  103. interactiveHover: ResourceColor = '#0cffffff';
  104. interactivePressed: ResourceColor = '#19ffffff';
  105. interactiveFocus: ResourceColor = '#ff317af7';
  106. interactiveActive: ResourceColor = '#ff317af7';
  107. interactiveSelect: ResourceColor = '#33ffffff';
  108. interactiveClick: ResourceColor = '#19ffffff';
  109. }
  110. // 森林主题(浅色)
  111. export class ForestColors implements CustomColors {
  112. brand: ResourceColor = '#ff64bb5c';
  113. warning: ResourceColor = '#ffd94838';
  114. alert: ResourceColor = '#ffdb6b42';
  115. confirm: ResourceColor = '#ff317af7';
  116. fontPrimary: ResourceColor = '#e5000000'; // 黑色
  117. fontSecondary: ResourceColor = '#99000000';
  118. fontTertiary: ResourceColor = '#66000000';
  119. fontFourth: ResourceColor = '#33000000';
  120. fontEmphasize: ResourceColor = '#ff64bb5c';
  121. fontOnPrimary: ResourceColor = '#ffffffff'; // 白色
  122. fontOnSecondary: ResourceColor = '#99ffffff';
  123. fontOnTertiary: ResourceColor = '#66ffffff';
  124. fontOnFourth: ResourceColor = '#33ffffff';
  125. iconPrimary: ResourceColor = '#e5000000';
  126. iconSecondary: ResourceColor = '#99000000';
  127. iconTertiary: ResourceColor = '#66000000';
  128. iconFourth: ResourceColor = '#33000000';
  129. iconEmphasize: ResourceColor = '#ff64bb5c';
  130. iconSubEmphasize: ResourceColor = '#6664bb5c';
  131. iconOnPrimary: ResourceColor = '#ffffffff';
  132. iconOnSecondary: ResourceColor = '#99ffffff';
  133. iconOnTertiary: ResourceColor = '#66ffffff';
  134. iconOnFourth: ResourceColor = '#33ffffff';
  135. backgroundPrimary: ResourceColor = '#ffffffff';
  136. backgroundSecondary: ResourceColor = '#fff1f3f5';
  137. backgroundTertiary: ResourceColor = '#ffe5e5ea';
  138. backgroundFourth: ResourceColor = '#ffd1d1d6';
  139. backgroundEmphasize: ResourceColor = '#ff64bb5c';
  140. compForegroundPrimary: ResourceColor = '#ff000000';
  141. compBackgroundPrimary: ResourceColor = '#ffffffff';
  142. compBackgroundPrimaryTran: ResourceColor = '#ffffffff';
  143. compBackgroundPrimaryContrary: ResourceColor = '#ffffffff';
  144. compBackgroundGray: ResourceColor = '#fff1f3f5';
  145. compBackgroundSecondary: ResourceColor = '#19000000';
  146. compBackgroundTertiary: ResourceColor = '#0c000000';
  147. compBackgroundEmphasize: ResourceColor = '#ff64bb5c';
  148. compBackgroundNeutral: ResourceColor = '#ff000000';
  149. compEmphasizeSecondary: ResourceColor = '#3364bb5c';
  150. compEmphasizeTertiary: ResourceColor = '#1964bb5c';
  151. compDivider: ResourceColor = '#33000000';
  152. compCommonContrary: ResourceColor = '#ffffffff';
  153. compBackgroundFocus: ResourceColor = '#fff1f3f5';
  154. compFocusedPrimary: ResourceColor = '#e5000000';
  155. compFocusedSecondary: ResourceColor = '#99000000';
  156. compFocusedTertiary: ResourceColor = '#66000000';
  157. interactiveHover: ResourceColor = '#0c000000';
  158. interactivePressed: ResourceColor = '#19000000';
  159. interactiveFocus: ResourceColor = '#ff64bb5c';
  160. interactiveActive: ResourceColor = '#ff64bb5c';
  161. interactiveSelect: ResourceColor = '#33000000';
  162. interactiveClick: ResourceColor = '#19000000';
  163. }
  164. // 珊瑚主题(浅色)
  165. export class CoralColors implements CustomColors {
  166. brand: ResourceColor = '#ffed6f21';
  167. warning: ResourceColor = '#ffe84026';
  168. alert: ResourceColor = '#ff0a59f7';
  169. confirm: ResourceColor = '#ff64bb5c';
  170. fontPrimary: ResourceColor = '#e5000000'; // 黑色
  171. fontSecondary: ResourceColor = '#99000000';
  172. fontTertiary: ResourceColor = '#66000000';
  173. fontFourth: ResourceColor = '#33000000';
  174. fontEmphasize: ResourceColor = '#ffed6f21';
  175. fontOnPrimary: ResourceColor = '#ffffffff'; // 白色
  176. fontOnSecondary: ResourceColor = '#99ffffff';
  177. fontOnTertiary: ResourceColor = '#66ffffff';
  178. fontOnFourth: ResourceColor = '#33ffffff';
  179. iconPrimary: ResourceColor = '#e5000000';
  180. iconSecondary: ResourceColor = '#99000000';
  181. iconTertiary: ResourceColor = '#66000000';
  182. iconFourth: ResourceColor = '#33000000';
  183. iconEmphasize: ResourceColor = '#ffed6f21';
  184. iconSubEmphasize: ResourceColor = '#66ed6f21';
  185. iconOnPrimary: ResourceColor = '#ffffffff';
  186. iconOnSecondary: ResourceColor = '#99ffffff';
  187. iconOnTertiary: ResourceColor = '#66ffffff';
  188. iconOnFourth: ResourceColor = '#33ffffff';
  189. backgroundPrimary: ResourceColor = '#ffffffff';
  190. backgroundSecondary: ResourceColor = '#fff1f3f5';
  191. backgroundTertiary: ResourceColor = '#ffe5e5ea';
  192. backgroundFourth: ResourceColor = '#ffd1d1d6';
  193. backgroundEmphasize: ResourceColor = '#ffed6f21';
  194. compForegroundPrimary: ResourceColor = '#ff000000';
  195. compBackgroundPrimary: ResourceColor = '#ffffffff';
  196. compBackgroundPrimaryTran: ResourceColor = '#ffffffff';
  197. compBackgroundPrimaryContrary: ResourceColor = '#ffffffff';
  198. compBackgroundGray: ResourceColor = '#fff1f3f5';
  199. compBackgroundSecondary: ResourceColor = '#19000000';
  200. compBackgroundTertiary: ResourceColor = '#0c000000';
  201. compBackgroundEmphasize: ResourceColor = '#ffed6f21';
  202. compBackgroundNeutral: ResourceColor = '#ff000000';
  203. compEmphasizeSecondary: ResourceColor = '#33ed6f21';
  204. compEmphasizeTertiary: ResourceColor = '#19ed6f21';
  205. compDivider: ResourceColor = '#33000000';
  206. compCommonContrary: ResourceColor = '#ffffffff';
  207. compBackgroundFocus: ResourceColor = '#fff1f3f5';
  208. compFocusedPrimary: ResourceColor = '#e5000000';
  209. compFocusedSecondary: ResourceColor = '#99000000';
  210. compFocusedTertiary: ResourceColor = '#66000000';
  211. interactiveHover: ResourceColor = '#0c000000';
  212. interactivePressed: ResourceColor = '#19000000';
  213. interactiveFocus: ResourceColor = '#ffed6f21';
  214. interactiveActive: ResourceColor = '#ffed6f21';
  215. interactiveSelect: ResourceColor = '#33000000';
  216. interactiveClick: ResourceColor = '#19000000';
  217. }
  218. // 极夜主题(深色)
  219. export class MidnightColors implements CustomColors {
  220. brand: ResourceColor = '#ff5ba854';
  221. warning: ResourceColor = '#ffd94838';
  222. alert: ResourceColor = '#ffdb6b42';
  223. confirm: ResourceColor = '#ff317af7';
  224. fontPrimary: ResourceColor = '#e5ffffff'; // 白色
  225. fontSecondary: ResourceColor = '#99ffffff';
  226. fontTertiary: ResourceColor = '#66ffffff';
  227. fontFourth: ResourceColor = '#33ffffff';
  228. fontEmphasize: ResourceColor = '#ff5ba854';
  229. fontOnPrimary: ResourceColor = '#ffffffff'; // 白色
  230. fontOnSecondary: ResourceColor = '#e5000000'; // 深色按钮反色
  231. fontOnTertiary: ResourceColor = '#e5000000';
  232. fontOnFourth: ResourceColor = '#e5000000';
  233. iconPrimary: ResourceColor = '#e5ffffff';
  234. iconSecondary: ResourceColor = '#99ffffff';
  235. iconTertiary: ResourceColor = '#66ffffff';
  236. iconFourth: ResourceColor = '#33ffffff';
  237. iconEmphasize: ResourceColor = '#ff5ba854';
  238. iconSubEmphasize: ResourceColor = '#665ba854';
  239. iconOnPrimary: ResourceColor = '#ffffffff';
  240. iconOnSecondary: ResourceColor = '#e5000000';
  241. iconOnTertiary: ResourceColor = '#e5000000';
  242. iconOnFourth: ResourceColor = '#e5000000';
  243. backgroundPrimary: ResourceColor = '#ffe5e5e5';
  244. backgroundSecondary: ResourceColor = '#ff191a1c';
  245. backgroundTertiary: ResourceColor = '#ff202224';
  246. backgroundFourth: ResourceColor = '#ff2e3033';
  247. backgroundEmphasize: ResourceColor = '#ff5ba854';
  248. compForegroundPrimary: ResourceColor = '#ffe5e5e5';
  249. compBackgroundPrimary: ResourceColor = '#23272e'; // 深色卡片
  250. compBackgroundPrimaryTran: ResourceColor = '#33ffffff';
  251. compBackgroundPrimaryContrary: ResourceColor = '#ffe5e5e5';
  252. compBackgroundGray: ResourceColor = '#ffe5e5ea';
  253. compBackgroundSecondary: ResourceColor = '#19ffffff';
  254. compBackgroundTertiary: ResourceColor = '#0cffffff';
  255. compBackgroundEmphasize: ResourceColor = '#ff5ba854';
  256. compBackgroundNeutral: ResourceColor = '#23272e';
  257. compEmphasizeSecondary: ResourceColor = '#335ba854';
  258. compEmphasizeTertiary: ResourceColor = '#195ba854';
  259. compDivider: ResourceColor = '#33ffffff';
  260. compCommonContrary: ResourceColor = '#ff000000';
  261. compBackgroundFocus: ResourceColor = '#ff000000';
  262. compFocusedPrimary: ResourceColor = '#e5ffffff';
  263. compFocusedSecondary: ResourceColor = '#99ffffff';
  264. compFocusedTertiary: ResourceColor = '#66ffffff';
  265. interactiveHover: ResourceColor = '#0cffffff';
  266. interactivePressed: ResourceColor = '#19ffffff';
  267. interactiveFocus: ResourceColor = '#ff5ba854';
  268. interactiveActive: ResourceColor = '#ff5ba854';
  269. interactiveSelect: ResourceColor = '#33ffffff';
  270. interactiveClick: ResourceColor = '#19ffffff';
  271. }
  272. export class DefaultTheme implements CustomTheme {
  273. public colors: DefaultColors = new DefaultColors();
  274. }
  275. export class TwilightTheme implements CustomTheme {
  276. public colors: TwilightColors = new TwilightColors();
  277. }
  278. export class ForestTheme implements CustomTheme {
  279. public colors: ForestColors = new ForestColors();
  280. }
  281. export class CoralTheme implements CustomTheme {
  282. public colors: CoralColors = new CoralColors();
  283. }
  284. export class MidnightTheme implements CustomTheme {
  285. public colors: MidnightColors = new MidnightColors();
  286. }
  287. export const ThemeList: CustomTheme[] = [
  288. new DefaultTheme(),
  289. new TwilightTheme(),
  290. new ForestTheme(),
  291. new CoralTheme(),
  292. new MidnightTheme()
  293. ];
  294. export const myTheme:CustomTheme=new MidnightTheme();