使用vue-antd动态切换主题
目录vue-antd动态切换主题安装依赖Vue3.0+Antd，修改antd主题色，配置全局cssvue-antd动态切换主题
目录vue-antd动态切换主题安装依赖Vue3.0 + Antd，修改antd主题色，配置全局css
vue-antd动态切换主题
安装依赖
1webpack-theme-color-replacer:yarn add webpack-theme-color-replacer@1.3.222less:yarn add less@2.7.23less-loader:yarn add less-loader@7.0.2
在vue.config.js中加入配置
constcreateThemeColorReplacerPlugin=require("./plugin.config");constvueConfig={css:{loaderOptions:{less:{lessOptions:{modifyVars:{//注意：此处不能给默认值，否则会导致主题色动态配置失败// less vars，customize ant design theme//primary-color: #2f54eb,//link-color: #2f54eb,//border-radius-base: 4px},// DO NOT REMOVE THIS LINEjavascriptEnabled:true,},},},},configureWebpack:{plugins:[createThemeColorReplacerPlugin()],},assetsDir:"static",};module.exports=vueConfig;
添加主题色更改方法，新建util文件夹创建plugin.config.js
constThemeColorReplacer=require(webpack-theme-color-replacer)constgenerate=require(@ant-design/colors/lib/generate).defaultconstgetAntdSerials=(color)=>{// 淡化（即less的tint）constlightens=newArray(9).fill().map((t,i)=>{returnThemeColorReplacer.varyColor.lighten(color,i/10)})constcolorPalettes=generate(color)constrgb=ThemeColorReplacer.varyColor.toNum3(color.replace(#,)).join(,)returnlightens.concat(colorPalettes).concat(rgb)}constthemePluginOption={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)+selectorcase.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)+selectorcase.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:hovercase.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 > acase.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:hoverdefault:returnselector}}}constcreateThemeColorReplacerPlugin=()=>newThemeColorReplacer(themePluginOption)module.exports=createThemeColorReplacerPlugin
添加util.js文件
importclientfrom"webpack-theme-color-replacer/client";importgeneratefrom"@ant-design/colors/lib/generate";functiongetAntdSerials(color){// 淡化（即less的tint）constlightens=newArray(9).fill().map((t,i)=>{returnclient.varyColor.lighten(color,i/10);});// colorPalette变换得到颜色值constcolorPalettes=generate(color);constrgb=client.varyColor.toNum3(color.replace("#","")).join(",");returnlightens.concat(colorPalettes).concat(rgb);}functionchangeColor(newColor){varoptions={newColors: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},};returnclient.changer.changeColor(options,Promise);}exportdefault{updateTheme(newPrimaryColor){consthideMessage=()=>console.log("正在切换主题！",0);changeColor(newPrimaryColor).finally((t)=>{setTimeout(()=>{hideMessage();});});},};
然后在main.js中引入为Vue原型prototype中的方法
importutilsfrom"./utils"Vue.prototype.$u=utils//注意antd样式的引入必须由css改为less引入-important-design-vue/dist/antd.css;+important-design-vue/dist/antd.less;
然后项目启动起来后调用Vm.$u.updateTheme方法即可动态改变主题色。
注意该方法传值必须传十六进制的颜色，如果传颜色对应的英文字符可能会出错.
如果自定义组件或者元素也需要统一管理主题色，则在assets目录新建main.less
@import"~ant-design-vue/dist/antd.less";#home {color:@primary-color;}
在main.less中引入antd的样式，然后antd的主题色是@primary-color， 直接使用即可
然后在main.js中直接引入main.less
-important-design-vue/dist/antd.less;+import"./assets/css/main.less"
Vue3.0 + Antd，修改antd主题色，配置全局css
1.在vue.config.js里修改配置
module.exports={css:{loaderOptions:{less:{lessOptions:{modifyVars:{primary-color:#3d62ff,// 修改全局主题色},javascriptEnabled:true,},},},extract:true,// 解决开发模式，打包时未提取CSS的问题}}
2.把main.ts中的import ‘ant-design-vue/dist/antd.css’;
修改为 import ‘ant-design-vue/dist/antd.less’;
修改css为less的时候，会报错 .bezierEasingMixin()
解决方法是：先卸载less-loader
npm uninstall-D less-loader
再安装less-loader@6.0.0
npm install-D less-loader@6.0.0
然后重新运行项目即可
以上为个人经验，希望能给大家一个参考，也希望大家多多支持本站。
声明：本站所有文章，如无特殊说明或标注，均为爬虫抓取以及网友投稿，版权归原作者所有。
