You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
79 lines
1.8 KiB
79 lines
1.8 KiB
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]; |
|
} |
|
|
|
export function generateColors({ |
|
color = primaryColor, |
|
mixLighten, |
|
mixDarken, |
|
tinycolor, |
|
}: 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('-')); |
|
}
|
|
|