第四十二章-Vite的颜色

1.说明

本章解析build\config\themeConfig.ts文件，直接创建这个文件。然后我们一段一段的分析：

yarn add ant-design-vue@next

2.第一部分3-16行代码

// ↓默认颜色
export const primaryColor = '#0960bd';

// ↓默认主题
export const themeMode = 'light';

// ↓主题类型
export type ThemeMode = 'dark' | 'light';

// ↓一个解决临时检查的方法类型
type Fn = (...arg: any) => any;

// ↓Vite生成颜色组的方法参数，颜色这一块有点深奥了，不做细的研究，感兴趣的同学自己看看源码吧
export interface GenerateColorsParams {
  mixLighten: Fn;
  mixDarken: Fn;
  tinycolor: any;
  color?: string;
}

3.第二部分18-22行代码

import { generate } from '@ant-design/colors';

export function generateAntColors(color: string, mode: ThemeMode) {
  return generate(color, {
    theme: mode == 'dark' ? 'dark' : 'default',
  });
}

调用的@ant-design/colors的颜色生成方法，将参数简化了一下。

参考链接：

4.第三部分24-32行代码

export function getThemeColors(color?: string, theme?: ThemeMode) {
  const tc = color || primaryColor;
  const tm = theme || themeMode;
  // ↓传入的颜色根据主题生成10个颜色系列
  const colors = generateAntColors(tc, tm);
  // ↓取10个颜色的第6个作为主颜色
  const primary = colors[5];
  // ↓再使用主颜色根据主题生成10个颜色系列
  const modeColors = generateAntColors(primary, tm === 'dark' ? 'light' : 'dark');

  // ↓输出这20个颜色
  return [...colors, ...modeColors];
}

5.第四部分34-71行代码

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];
}

这里直接根据颜色生成了98中颜色。我确实不太清楚这个么多颜色干什么的。调用效果参考build\vite\plugin\theme.ts（现在先不管这个文件）：

/**
 * Vite plugin for website theme color switching
 * https://github.com/anncwb/vite-plugin-theme
 */
import { viteThemePlugin, mixLighten, mixDarken, tinycolor } from 'vite-plugin-theme';
import { getThemeColors, generateColors } from '../../config/themeConfig';

export function configThemePlugin() {
  const colors = generateColors({
    mixDarken,
    mixLighten,
    tinycolor,
  });

  // ...
}

#0960bd生成的颜色：

console.log([...lightens, ...darkens, ...alphaColors, ...tinycolorDarkens, ...tinycolorLightens]);
// ↓输出
[
  '#0960bd',                '#3a80ca',                '#6ba0d7',
  '#9dbfe5',                '#cedff2',                '#ffffff',
  '#13011f10c',             '#16113f119',             '#19315e127',
  '#1c417e134',             '#1f519e141',             '#2261be14e',
  '#2571de15b',             '#2891fd169',             '#2ba21d176',
  '#2eb23d183',             '#31c25d190',             '#34d27d19d',
  '#37f29c1ab',             '#0960bd',                '#074d97',
  '#053a71',                '#04264c',                '#021326',
  '#000000',                '#-2-13-26',              '#-4-26-4c',
  '#-5-3a-71',              '#-7-4d-97',              '#-9-60-bd',
  '#-b-73-e3',              '#-d-86-109',             '#-e-9a-12e',
  '#-10-ad-154',            '#-12-c0-17a',            '#-14-d3-1a0',
  '#-16-e6-1c6',            '#-17-fa-1eb',            'rgba(9, 96, 189, 0)',
  'rgba(9, 96, 189, 0.05)', 'rgba(9, 96, 189, 0.1)',  'rgba(9, 96, 189, 0.15)',
  'rgba(9, 96, 189, 0.2)',  'rgba(9, 96, 189, 0.25)', 'rgba(9, 96, 189, 0.3)',
  'rgba(9, 96, 189, 0.35)', 'rgba(9, 96, 189, 0.4)',  'rgba(9, 96, 189, 0.45)',
  'rgba(9, 96, 189, 0.5)',  'rgba(9, 96, 189, 0.55)', 'rgba(9, 96, 189, 0.6)',
  'rgba(9, 96, 189, 0.65)', 'rgba(9, 96, 189, 0.7)',  'rgba(9, 96, 189, 0.75)',
  'rgba(9, 96, 189, 0.8)',  'rgba(9, 96, 189, 0.85)', 'rgba(9, 96, 189, 0.9)',
  '#0960bd',                '#0854a5',                '#07478c',
  '#063b74',                '#042f5c',                '#032243',
  '#02162b',                '#010913',                '#0960bd',
  '#0a6cd5',                '#0b79ee',                '#1e86f4',
  '#3793f5',                '#4fa0f7',                '#67adf8',
  '#80baf9',                '#98c7fa',                '#b0d4fb',
  '#c9e2fc',                '#e1effe',                '#f9fcff'
]


console.log(
    [...lightens, ...darkens, ...alphaColors, ...tinycolorDarkens, ...tinycolorLightens].length
  );
// ↓输出
78

6.第五部分73-104行代码

/**
 * 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
  };
}

这个方法就是生成antd主题变量对象的。将该对象的结果放到Vite的less配置中：

// ...
import { generateModifyVars } from './build/config/themeConfig';

// ...
export default ({ command, mode }: ConfigEnv): UserConfig => {
  // ...
  return {
    // ...
    css: {
      preprocessorOptions: {
        less: {
          modifyVars: {
            // ...
            ...generateModifyVars(),
          },
          // ...
        },
      },
    },
    // ...
  };
};