kicc-ui/build/config/themeConfig.ts

/**
 * @program: kicc-ui
 * @description: 主题颜色动态生成配置
 * @author: wangxiang4
 * @create: 2022/4/5
 */

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

export const primaryColor = '#0084f4';
type Fn = (...arg: any) => any;
type GenerateTheme = 'default' | 'dark';

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

/** 根据ant-design色板生成算法生成渐变颜色: https://ant.design/docs/spec/colors-cn */
export function generateAntColors(color: string, theme: GenerateTheme = 'default') {
  return generate(color, { theme });
}

/** 获取ant-design主题颜色(包含: 默认主题,暗黑主题) */
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];
}

/** 生成主题(明亮,暗黑)渐变颜色 */
export function generateColors({ color = primaryColor, mixLighten, mixDarken, tinycolor }: GenerateColorsParams) {
  const arr = new Array(19).fill(0);

  // 生成渐变亮十六进制颜色,只有6个可用
  const lightens = arr.map((_t, i) => {
    return mixLighten(color, i / 5);
  });

  // 生成渐变暗十六进制颜色,只有6个可用
  const darkens = arr.map((_t, i) => {
    return mixDarken(color, i / 5);
  });

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

  // 生成去除小数点短型RGBA颜色
  const shortAlphaColors = alphaColors.map((item) => item.replace(/\s/g, '').replace(/0\./g, '.'));

  // 使用tinycolor颜色工具生成渐变亮十六进制颜色
  const tinycolorLightens = arr
    .map((_t, i) => {
      return tinycolor(color)
        .lighten(i * 5)
        .toHexString();
    })
    .filter((item) => item !== '#ffffff');

  // 使用tinycolor颜色工具生成渐变暗十六进制颜色
  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('-'));
}