Blame view

build/config/themeConfig.ts 2.84 KB
vben authored
1
import { generate } from '@ant-design/colors';
2
vben authored
3
export const primaryColor = '#0960bd';
vben authored
4
Vben authored
5
6
export const borderColorBase = '#d9d9d9';
vben authored
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
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) {
vben authored
42
  const arr = new Array(19).fill(0);
43
  const lightens = arr.map((_t, i) => {
vben authored
44
45
46
    return mixLighten(color, i / 5);
  });
47
  const darkens = arr.map((_t, i) => {
vben authored
48
49
50
    return mixDarken(color, i / 5);
  });
51
  const alphaColors = arr.map((_t, i) => {
vben authored
52
53
54
55
56
    return tinycolor(color)
      .setAlpha(i / 20)
      .toRgbString();
  });
vben authored
57
  const tinycolorLightens = arr
58
    .map((_t, i) => {
vben authored
59
60
61
62
63
64
      return tinycolor(color)
        .lighten(i * 5)
        .toHexString();
    })
    .filter((item) => item !== '#ffffff');
vben authored
65
  const tinycolorDarkens = arr
66
    .map((_t, i) => {
vben authored
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
      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++) {
vben authored
85
    primaryColorObj[`primary-${index + 1}`] = palettes[index];
vben authored
86
87
88
89
90
91
92
93
94
95
96
97
98
  }

  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
vben authored
99
    'text-color-secondary': 'rgba(0, 0, 0, 0.45)', // Subtext color
vben authored
100
101
    'font-size-base': '14px', //  Main font size
    'box-shadow-base': '0 2px 8px rgba(0, 0, 0, 0.15)', //  Floating shadow
Vben authored
102
    'border-color-base': borderColorBase, //  Border color,
vben authored
103
104
105
106
    'border-radius-base': '2px', //  Component/float fillet
    'link-color': primary, //   Link color
  };
}