useThemeVars.uts 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. // @ts-nocheck
  2. import { isDarkMode } from './useThemeMode'
  3. import type { SeedToken } from './interface';
  4. import { genFontMapToken } from './genFontMapToken';
  5. import { genSizeMapToken } from './genSizeMapToken';
  6. import { genColorMapToken as genLightColorMapToken } from './light';
  7. import { genColorMapToken as genDarkColorMapToken } from './dark';
  8. import { computed, reactive } from 'vue'; // 或相应的响应式系统
  9. // #ifndef UNI-APP-X
  10. export type VueApp = any
  11. export type UTSJSONObject = Record<string, any>
  12. const UTSJSONObject = Object
  13. // #endif
  14. // 内部存储的 tokens
  15. type LimeTokens = {
  16. light : UTSJSONObject
  17. dark : UTSJSONObject
  18. }
  19. // 默认的基础 token
  20. const DEFAULT_SEED_TOKEN : SeedToken = {
  21. primaryColor: '#3283ff'
  22. };
  23. export const themeTokenMaps = reactive<LimeTokens>({
  24. light: {},
  25. dark: {},
  26. })
  27. // 初始化默认 tokens
  28. function initDefaultTokens() {
  29. // Light 主题颜色
  30. const lightColors = {
  31. white: '#fff',
  32. gray1: '#f3f3f3',
  33. gray2: '#eeeeee',
  34. gray3: '#e7e7e7',
  35. gray4: '#dcdcdc',
  36. gray5: '#c5c5c5',
  37. gray6: '#a6a6a6',
  38. gray7: '#8b8b8b',
  39. gray8: '#777777',
  40. gray9: '#5e5e5e',
  41. gray10: '#4b4b4b',
  42. gray11: '#383838',
  43. gray12: '#2c2c2c',
  44. gray13: '#242424',
  45. gray14: '#181818',
  46. black: '#000',
  47. ...genLightColorMapToken(DEFAULT_SEED_TOKEN)
  48. };
  49. // Dark 主题颜色
  50. const darkColors = {
  51. white: '#000', // 在暗黑模式下反转
  52. gray1: '#181818',
  53. gray2: '#242424',
  54. gray3: '#2c2c2c',
  55. gray4: '#383838',
  56. gray5: '#4b4b4b',
  57. gray6: '#5e5e5e',
  58. gray7: '#777777',
  59. gray8: '#8b8b8b',
  60. gray9: '#a6a6a6',
  61. gray10: '#c5c5c5',
  62. gray11: '#dcdcdc',
  63. gray12: '#e7e7e7',
  64. gray13: '#eeeeee',
  65. gray14: '#f3f3f3',
  66. black: '#fff', // 在暗黑模式下反转
  67. ...genDarkColorMapToken(DEFAULT_SEED_TOKEN)
  68. };
  69. themeTokenMaps.light = UTSJSONObject.assign({}, lightColors, lightColors)
  70. themeTokenMaps.dark = UTSJSONObject.assign({}, darkColors, darkColors)
  71. }
  72. initDefaultTokens();
  73. // 导出的 themeTokens 是计算属性,自动返回当前主题的 tokens
  74. export const themeTokens = computed(():UTSJSONObject => {
  75. return isDarkMode.value ? themeTokenMaps.dark : themeTokenMaps.light;
  76. });
  77. export function useThemeToken(token : SeedToken | null = null) {
  78. if (token != null) {
  79. const lightColors = genLightColorMapToken(token!);
  80. const darkColors = genDarkColorMapToken(token!);
  81. // 只有在提供了相关属性时才重新生成 fonts 和 sizes
  82. const fonts = genFontMapToken(token!.fontSize)
  83. const sizes = genSizeMapToken(token!.sizeUnit, token.sizeStep)
  84. themeTokenMaps.light = UTSJSONObject.assign({}, themeTokenMaps.light, lightColors, fonts, sizes)
  85. themeTokenMaps.dark = UTSJSONObject.assign({}, themeTokenMaps.dark, darkColors, fonts, sizes)
  86. }
  87. }
  88. export function useThemeVars(options : UTSJSONObject | null = null) {
  89. if (options != null) {
  90. const currentTheme = isDarkMode.value ? themeTokenMaps.dark : themeTokenMaps.light;
  91. // #ifdef UNI-APP-X && APP
  92. options.toMap().forEach((value, key) => {
  93. currentTheme.set(key, value);
  94. });
  95. // #endif
  96. // #ifndef UNI-APP-X && APP
  97. Object.entries(options).forEach(([key, value]) => {
  98. // currentTheme.set(key, value);
  99. currentTheme[key] = value
  100. });
  101. // #endif
  102. }
  103. }