themeConfig.ts 1.8 KB

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