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('-')); }