vue3+ts+ant-design-vue动态主题颜色

前言

最近在使用vue3+ts+antd搭建后端项目，需要动态改变主题颜色，其实也是使用了pro版的方法，但是还是有坑的，我把坑排了写一下记录

开始

安装需要依赖

npm i webpack-theme-color-replacer

npm i @ant-design/[email protected]

在src目录下新建config目录子文件有：

1. theme-color-replacer.plugin.config.js
2. themeColor.js
3. themesettingConfig.ts

theme-color-replacer.plugin.config.js

const ThemeColorReplacer = require('webpack-theme-color-replacer');
const generate = require('@ant-design/colors/src/generate').default
const getAntdSerials = (color) => {
    // 淡化（即less的tint）
    const lightens = new Array(9).fill('').map((t, i) => {
        return ThemeColorReplacer.varyColor.lighten(color, i / 10);
    });
    const colorPalettes = generate(color);
    const rgb = ThemeColorReplacer.varyColor
        .toNum3(c