xt-front/build/config/themeConfig.ts

import { generate } from '@ant-design/colors';

export const primaryColor = '#1890ff';

export const darkMode = 'light';

type Fn = (...arg: any) => any;

type GenerateTheme = 'default' | 'dark';

export interface GenerateColorsParams {
  mixLighten?: Fn;
  mixDarken?: Fn;
  tinycolor?: any;
  color?: string;
}

export function generateAntColors(color: string, theme: GenerateTheme = 'default') {
  return generate(color, {
    theme,
  });
}

export function getThemeColors(color?: string) {
  const tc = color || primaryColor;
  const lightColors = generateAntColors(tc);
  const primary = lightColors[5];
  const modeColors = generateAntColors(primary, 'dark');

  return [...lightColors, ...modeColors];
}
/** hex转rgb */
function hexToRgb(str) {
  const hxs = str.replace('#', '').match(/../g);
  for (let i = 0; i < 3; i++) hxs[i] = parseInt(hxs[i], 16);
  return hxs;
}

/** rgb转hex */
function rgbToHex(a, b, c) {
  const hexs = [a.toString(16), b.toString(16), c.toString(16)];
  for (let i = 0; i < 3; i++) {
    if (hexs[i].length == 1) hexs[i] = `0${hexs[i]}`;
  }
  return `#${hexs.join('')}`;
}

/** 加深颜色值 */
export function mixDarken(color, level) {
  const rgbc = hexToRgb(color);
  for (let i = 0; i < 3; i++) rgbc[i] = Math.floor(rgbc[i] * (1 - level));
  return rgbToHex(rgbc[0], rgbc[1], rgbc[2]);
}

/** 变浅颜色值 */
export function mixLighten(color, level) {
  const rgbc = hexToRgb(color);
  for (let i = 0; i < 3; i++) rgbc[i] = Math.floor((255 - rgbc[i]) * level + rgbc[i]);
  return rgbToHex(rgbc[0], rgbc[1], rgbc[2]);
}

// export function generateColors({ color = primaryColor, tinycolor }: GenerateColorsParams) {
export function generateColors({ color = primaryColor }: GenerateColorsParams) {
  const arr = new Array(19).fill(0);
  const lightens = arr.map((_t, i) => {
    return mixLighten(color, i / 5);
  });

  const darkens = arr.map((_t, i) => {
    return mixDarken(color, i / 5);
  });

  // const alphaColors = arr.map((_t, i) => {
  //   return tinycolor(color)
  //     .setAlpha(i / 20)
  //     .toRgbString();
  // });

  // const shortAlphaColors = alphaColors.map(item => item.replace(/\s/g, '').replace(/0\./g, '.'));

  // const tinycolorLightens = arr
  //   .map((_t, i) => {
  //     return tinycolor(color)
  //       .lighten(i * 5)
  //       .toHexString();
  //   })
  //   .filter(item => item !== '#ffffff');

  // const tinycolorDarkens = arr
  //   .map((_t, i) => {
  //     return tinycolor(color)
  //       .darken(i * 5)
  //       .toHexString();
  //   })
  //   .filter(item => item !== '#000000');
  return [
    ...lightens,
    ...darkens,
    // ...alphaColors,
    // ...shortAlphaColors,
    // ...tinycolorDarkens,
    // ...tinycolorLightens,
  ].filter(item => !item.includes('-'));
}