themeConfig.ts 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. import { generate } from '@ant-design/colors';
  2. export const primaryColor = '#1890FF';
  3. // export const darkMode = 'light';
  4. export const darkMode = 'vent1';
  5. type Fn = (...arg: any) => any;
  6. type GenerateTheme = 'default' | 'dark' | 'vent1';
  7. export interface GenerateColorsParams {
  8. mixLighten: Fn;
  9. mixDarken: Fn;
  10. tinycolor: any;
  11. color?: string;
  12. }
  13. export function generateAntColors(color: string, theme: GenerateTheme = 'default') {
  14. return generate(color, {
  15. theme,
  16. });
  17. }
  18. export function getThemeColors(color?: string) {
  19. const tc = color || primaryColor;
  20. const lightColors = generateAntColors(tc);
  21. const primary = lightColors[5];
  22. const modeColors = generateAntColors(primary, 'dark');
  23. return [...lightColors, ...modeColors];
  24. }
  25. export function generateColors({ color = primaryColor, mixLighten, mixDarken, tinycolor }: GenerateColorsParams) {
  26. const arr = new Array(19).fill(0);
  27. const lightens = arr.map((_t, i) => {
  28. return mixLighten(color, i / 5);
  29. });
  30. const darkens = arr.map((_t, i) => {
  31. return mixDarken(color, i / 5);
  32. });
  33. const alphaColors = arr.map((_t, i) => {
  34. return tinycolor(color)
  35. .setAlpha(i / 20)
  36. .toRgbString();
  37. });
  38. const shortAlphaColors = alphaColors.map((item) => item.replace(/\s/g, '').replace(/0\./g, '.'));
  39. const tinycolorLightens = arr
  40. .map((_t, i) => {
  41. return tinycolor(color)
  42. .lighten(i * 5)
  43. .toHexString();
  44. })
  45. .filter((item) => item !== '#ffffff');
  46. const tinycolorDarkens = arr
  47. .map((_t, i) => {
  48. return tinycolor(color)
  49. .darken(i * 5)
  50. .toHexString();
  51. })
  52. .filter((item) => item !== '#000000');
  53. return [...lightens, ...darkens, ...alphaColors, ...shortAlphaColors, ...tinycolorDarkens, ...tinycolorLightens].filter(
  54. (item) => !item.includes('-')
  55. );
  56. }