themeConfig.ts
2.79 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
import { generate } from '@ant-design/colors';
export const primaryColor = '#0960bd';
export const themeMode = 'light';
export type ThemeMode = 'dark' | 'light';
type Fn = (...arg: any) => any;
export interface GenerateColorsParams {
mixLighten: Fn;
mixDarken: Fn;
tinycolor: any;
color?: string;
}
export function generateAntColors(color: string, mode: ThemeMode) {
return generate(color, {
theme: mode == 'dark' ? 'dark' : 'default',
});
}
export function getThemeColors(color?: string, theme?: ThemeMode) {
const tc = color || primaryColor;
const tm = theme || themeMode;
const colors = generateAntColors(tc, tm);
const primary = colors[5];
const modeColors = generateAntColors(primary, tm === 'dark' ? 'light' : 'dark');
return [...colors, ...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 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, ...tinycolorDarkens, ...tinycolorLightens];
}
/**
* less global variable
*/
export function generateModifyVars() {
const palettes = generateAntColors(primaryColor, themeMode);
const primary = palettes[5];
const primaryColorObj: Record<string, string> = {};
for (let index = 0; index < 10; index++) {
primaryColorObj[`primary-${index + 1}`] = palettes[index];
}
return {
'primary-color': primary,
...primaryColorObj,
'info-color': primary,
'processing-color': primary,
'success-color': '#55D187', // Success color
'error-color': '#ED6F6F', // False color
'warning-color': '#EFBD47', // Warning color
'disabled-color': 'rgba(0, 0, 0, 0.25)', // Failure color
'heading-color': 'rgba(0, 0, 0, 0.85)', // Title color
'text-color': 'rgba(0, 0, 0, 0.85)', // Main text color
'text-color-secondary ': 'rgba(0, 0, 0, 0.45)', // Subtext color
'font-size-base': '14px', // Main font size
'box-shadow-base': '0 2px 8px rgba(0, 0, 0, 0.15)', // Floating shadow
'border-color-base': '#d9d9d9', // Border color,
'border-radius-base': '2px', // Component/float fillet
'link-color': primary, // Link color
};
}