vue3+ts+ant-design-vue dynamic theme color

foreword

Recently, I am using vue3+ts+antd to build a back-end project. I need to dynamically change the theme color. In fact, I also use the method of the pro version, but there are still pitfalls. I will list the pitfalls and write a record.

start

Installation requires dependencies

npm i webpack-theme-color-replacer

npm i @ant-design/[email protected]

Create a new config directory sub-file under the src directory:

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