| 提交 | 用户 | age | ||
| 3d1681 | 1 | import { generate } from '@ant-design/colors'; |
| 91e004 | 2 | |
| 759e53 | 3 | export const primaryColor = '#0960bd'; |
| 3d1681 | 4 | |
| 5b8eb4 | 5 | export const darkMode = 'light'; |
| 3d1681 | 6 | |
| V | 7 | type Fn = (...arg: any) => any; |
| 8 | ||
| c26dd0 | 9 | type GenerateTheme = 'default' | 'dark' |
| 江 | 10 | |
| 3d1681 | 11 | export interface GenerateColorsParams { |
| V | 12 | mixLighten: Fn; |
| 13 | mixDarken: Fn; | |
| 14 | tinycolor: any; | |
| 15 | color?: string; | |
| 16 | } | |
| 17 | ||
| c26dd0 | 18 | export function generateAntColors(color: string, theme: GenerateTheme = 'default') { |
| 3d1681 | 19 | return generate(color, { |
| c26dd0 | 20 | theme |
| 3d1681 | 21 | }); |
| V | 22 | } |
| 23 | ||
| 5b8eb4 | 24 | export function getThemeColors(color?: string) { |
| 3d1681 | 25 | const tc = color || primaryColor; |
| c26dd0 | 26 | const lightColors = generateAntColors(tc); |
| 3d1681 | 27 | const primary = colors[5]; |
| c26dd0 | 28 | const modeColors = generateAntColors(primary, 'dark'); |
| 3d1681 | 29 | |
| c26dd0 | 30 | return [...lightColors, ...modeColors]; |
| 3d1681 | 31 | } |
| V | 32 | |
| 33 | export function generateColors({ | |
| 34 | color = primaryColor, | |
| 35 | mixLighten, | |
| 36 | mixDarken, | |
| 37 | tinycolor, | |
| 38 | }: GenerateColorsParams) { | |
| 1b71db | 39 | const arr = new Array(19).fill(0); |
| 67962f | 40 | const lightens = arr.map((_t, i) => { |
| 3d1681 | 41 | return mixLighten(color, i / 5); |
| V | 42 | }); |
| 43 | ||
| 67962f | 44 | const darkens = arr.map((_t, i) => { |
| 3d1681 | 45 | return mixDarken(color, i / 5); |
| V | 46 | }); |
| 47 | ||
| 67962f | 48 | const alphaColors = arr.map((_t, i) => { |
| 3d1681 | 49 | return tinycolor(color) |
| V | 50 | .setAlpha(i / 20) |
| 51 | .toRgbString(); | |
| 52 | }); | |
| 53 | ||
| c77f7e | 54 | const shortAlphaColors = alphaColors.map((item) => item.replace(/\s/g, '').replace(/0\./g, '.')); |
| V | 55 | |
| 1b71db | 56 | const tinycolorLightens = arr |
| 67962f | 57 | .map((_t, i) => { |
| 3d1681 | 58 | return tinycolor(color) |
| V | 59 | .lighten(i * 5) |
| 60 | .toHexString(); | |
| 61 | }) | |
| 62 | .filter((item) => item !== '#ffffff'); | |
| 63 | ||
| 1b71db | 64 | const tinycolorDarkens = arr |
| 67962f | 65 | .map((_t, i) => { |
| 3d1681 | 66 | return tinycolor(color) |
| V | 67 | .darken(i * 5) |
| 68 | .toHexString(); | |
| 69 | }) | |
| 70 | .filter((item) => item !== '#000000'); | |
| c77f7e | 71 | return [ |
| V | 72 | ...lightens, |
| 73 | ...darkens, | |
| 74 | ...alphaColors, | |
| 75 | ...shortAlphaColors, | |
| 76 | ...tinycolorDarkens, | |
| 77 | ...tinycolorLightens, | |
| 78 | ].filter((item) => !item.includes('-')); | |
| 3d1681 | 79 | } |
