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(),
},
// ...
},
},
},
// ...
};
};
上一章
第四十一章-Vite配置-css.preprocessorOptions
下一章
第四十三章-Vite配置-plugin