前言

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

开始

安装需要依赖

npm i webpack-theme-color-replacernpm 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 = generate(color);const rgb = ThemeColorReplacer.varyColor.toNum3(color.replace('#', '')).join(',');return lightens.concat(colorPalettes).concat(rgb);
};const themePluginOption = {fileName: 'css/theme-colors-[contenthash:8].css',matchColors: getAntdSerials('#1890ff'), // 主色系列// 改变样式选择器，解决样式覆盖问题changeSelector(selector) {switch (selector) {case '.ant-calendar-today .ant-calendar-date':return (':not(.ant-calendar-selected-date):not(.ant-calendar-selected-day)' +selector);case '.ant-btn:focus,.ant-btn:hover':return '.ant-btn:focus:not(.ant-btn-primary):not(.ant-btn-danger),.ant-btn:hover:not(.ant-btn-primary):not(.ant-btn-danger)';case '.ant-btn.active,.ant-btn:active':return '.ant-btn.active:not(.ant-btn-primary):not(.ant-btn-danger),.ant-btn:active:not(.ant-btn-primary):not(.ant-btn-danger)';case '.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon':case '.ant-steps-item-process .ant-steps-item-icon>.ant-steps-icon':return ':not(.ant-steps-item-process)' + selector;// fixed https://github.com/vueComponent/ant-design-vue-pro/issues/876case '.ant-steps-item-process .ant-steps-item-icon':return ':not(.ant-steps-item-custom)' + selector;case '.ant-menu-horizontal>.ant-menu-item-active,.ant-menu-horizontal>.ant-menu-item-open,.ant-menu-horizontal>.ant-menu-item-selected,.ant-menu-horizontal>.ant-menu-item:hover,.ant-menu-horizontal>.ant-menu-submenu-active,.ant-menu-horizontal>.ant-menu-submenu-open,.ant-menu-horizontal>.ant-menu-submenu-selected,.ant-menu-horizontal>.ant-menu-submenu:hover':case '.ant-menu-horizontal > .ant-menu-item-active,.ant-menu-horizontal > .ant-menu-item-open,.ant-menu-horizontal > .ant-menu-item-selected,.ant-menu-horizontal > .ant-menu-item:hover,.ant-menu-horizontal > .ant-menu-submenu-active,.ant-menu-horizontal > .ant-menu-submenu-open,.ant-menu-horizontal > .ant-menu-submenu-selected,.ant-menu-horizontal > .ant-menu-submenu:hover':return '.ant-menu-horizontal > .ant-menu-item-active,.ant-menu-horizontal > .ant-menu-item-open,.ant-menu-horizontal > .ant-menu-item-selected,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item:hover,.ant-menu-horizontal > .ant-menu-submenu-active,.ant-menu-horizontal > .ant-menu-submenu-open,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-selected,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu:hover';case '.ant-menu-horizontal > .ant-menu-item-selected > a':case '.ant-menu-horizontal>.ant-menu-item-selected>a':return '.ant-menu-horizontal:not(ant-menu-light):not(.ant-menu-dark) > .ant-menu-item-selected > a';case '.ant-menu-horizontal > .ant-menu-item > a:hover':case '.ant-menu-horizontal>.ant-menu-item>a:hover':return '.ant-menu-horizontal:not(ant-menu-light):not(.ant-menu-dark) > .ant-menu-item > a:hover';default:return selector;}},
};const createThemeColorReplacerPlugin = () =>new ThemeColorReplacer(themePluginOption);module.exports = createThemeColorReplacerPlugin;

themeColor.js

import client from 'webpack-theme-color-replacer/client';
import generate from '@ant-design/colors/src/generate';export default {getAntdSerials(color) {// 淡化（即less的tint）const lightens = new Array(9).fill('').map((t, i) => {return client.varyColor.lighten(color, i / 10);});// colorPalette变换得到颜色值const colorPalettes = generate(color);const rgb = client.varyColor.toNum3(color.replace('#', '')).join(',');return lightens.concat(colorPalettes).concat(rgb);},changeColor(newColor) {var options = {newColors: this.getAntdSerials(newColor), // new colors array, one-to-one corresponde with `matchColors`changeUrl(cssUrl) {return `/${cssUrl}`; // while router is not `hash` mode, it needs absolute path},};return client.changer.changeColor(options, Promise);},
};

themesettingConfig.ts

import themeColor from './themeColor.js';
import message from 'ant-design-vue/es/message';
// import store from '../store';const colorList = [{key: '薄暮',color: '#F5222D',},{key: '火山',color: '#FA541C',},{key: '日暮',color: '#FAAD14',},{key: '明青',color: '#13C2C2',},{key: '极光绿',color: '#52C41A',},{key: '拂晓蓝（默认）',color: '#1890FF',},{key: '极客蓝',color: '#2F54EB',},{key: '酱紫',color: '#722ED1',},
];// 更新主题方法
const updateTheme = (newPrimaryColor: any) => {// console.log('newPrimaryColor:', newPrimaryColor);// store.commit('setprimaryColor', newPrimaryColor);const hideMessage = message.loading('正在切换主题！', 0);themeColor.changeColor(newPrimaryColor).finally(() => {console.log('切换成功');setTimeout(() => {hideMessage();}, 10);});
};export { updateTheme, colorList };

然后我们就搭建好了，下面开始组件使用

test.vue

<template>
<div><a-divider>主题颜色</a-divider><div style="margin-top: .5rem"><div style="height: 20px"><a-tooltip class="setting-drawer-theme-color-colorBlock" v-for="(item, index) in colorList" :key="index"><template #title>{{ item.key }}</template><a-tag :color="item.color" @click="changeColor(item.color)"><check-outlined  v-if="item.color == primaryColor"/></a-tag></a-tooltip></div></div></div>
</template><script lang="ts">import { updateTheme, colorList } from '@/config/themesettingConfig';
setup () {
// 主题颜色const primaryColor = ref('#1890FF');function changeColor (color: string) {if (primaryColor.value != color) {updateTheme(color);primaryColor.value = color;console.log("...切换颜色...", color, primaryColor.value);}}
retrun {
colorList, changeColor, primaryColor
}
}</script>

shims-vue.ts

declare module '*.js'

总结

其实也没啥好总结的，要搭配使用 webpack-theme-color-replacer 依赖注意 @ant-design/colors 版本

vue3+ts+ant-design-vue动态主题颜色相关推荐

vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用（2）
回顾上篇文章地址:vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用(1)_konsei的博客-CSDN博客上篇文章搭建了vue3项目,引入了ant ...
Ant design vue动态主题切换的坑与一般性方法
本文原创,并且以吐槽为主,下面开始: Ant design vue是很优秀的框架,不过对于一般小白用户(比如我),文档方面不够友好.官方给出了主题自定义色彩的方案,但是太过于简陋,网上很多技术解决方案 ...
VUE3 使用 Ant Design Vue 图标库的图标
emmm 就是 Ant Design Vue 这玩意用来做蛮好的支持VUE3 所以这里用了这个了. 首先他支持你一个个导入那岂不是.....傻里傻气的 ,所以我们一次性导入! 1. 先安装: ...
Vue vben admin - 新鲜出炉的高颜值管理后台UI框架，基于 Vue3 和 Ant Design Vue
基于Vue3.0 / Vite / Ant Design 等火热开源项目构建,新鲜出炉,值得关注. 关于 Vue vben admin Vue Vben Admin 是一个基于 Vue3.0.Vite ...
vue3+ant design vue 动态加载Icon图标
问题与思路在使用前端组件库时,我们常常会遇到需要动态加载 Icon 图标,如何处理这一需求,是前端开发人员必须思考的问题.在 vue 中,有一个内置组件 component,它的主要作用是配合 is ...
Ant Design Vue 动态路由
main.js 引入 router import router from './router' new Vue({router,i18n,created: bootstrap,render: h =& ...
VUE3 使用 Ant Design Vue的icon图标
安装: npm install --save @ant-design/icons-vue 2.在main入口文件引入,不想一个个一得导入,可直接循环导入即可 import { createApp } ...
vue3+ant design vue+ts实战【ant-design-vue组件库引入】
vue3 UI组件库 Ant Design of Vue Ant Design Vue
基于 Vue3.0 和 Ant Design Vue ,高颜值管理后台UI框架vue-vben-admin运行
简介 Vue Vben Admin 是一个免费开源的中后台模版.使用了最新的vue3,vite2,TypeScript等主流技术开发,开箱即用的中后台前端解决方案,也可用于学习参考. Github地址 ...
vue将每个路由打包成html,Ant Design Vue pro 动态路由的实现和打包
Ant Design Vue pro 动态路由的实现和打包 Ant Design Vue pro 动态路由的实现和打包配置路由权限在config文件夹下router.config.js中配置路由权 ...

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

前言

开始

总结

vue3+ts+ant-design-vue动态主题颜色相关推荐

最新文章

热门文章