themeConfig.ts 1.8 KB

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