themeConfig.ts 1.5 KB

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