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

An_s

已于 2022-11-24 11:20:49 修改

阅读量3.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue3+typeScript+antd搭建前端项目文章标签： vue.js 前端 javascript

于 2022-07-11 15:56:30 首次发布

本文链接：https://blog.youkuaiyun.com/echo_Ae/article/details/125723159

vue3+typeScript+antd搭建前端项目专栏收录该内容

8 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

本文档介绍了如何在Vue3+TypeScript+Ant Design Vue项目中实现动态主题颜色。通过安装相关依赖，创建配置文件，并在组件中应用，实现主题色的切换。特别提示，需配合webpack-theme-color-replacer插件和特定版本的@ant-design/colors使用。

前言

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

开始

安装需要依赖

npm i webpack-theme-color-replacer

npm i @ant-design/colors@2.0.3

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

theme-color-replacer.plugin.config.js
themeColor.js
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

了解本专栏