themeConfig.ts 1.9 KB

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