Ant-design-vue更换主题颜色

package.json

"antd-theme-generator": "^1.2.5",
"antd-theme-webpack-plugin": "1.2.0",
"less": "^3.9.0",
"less-loader": "^4.1.0",
//如果高版本的less不能实现主题颜色切换less就换成2.7.3版本的
//less这个2.7.3版本应该是版本太低有个bug，在我的项目中页面加载完后会闪一下变成白屏再重新加载

vue.config.js

const AntDesignThemePlugin = require("antd-theme-webpack-plugin");
const options = {antDir: path.join(__dirname, "./node_modules/ant-design-vue"), //antd包位置stylesDir: path.join(__dirname, "./src/styles"), //主题文件所在文件夹varFile: path.join(__dirname, "./src/styles/variables.less"), // 自定义默认的主题色mainLessFile: path.join(__dirname, "./src/styles/index.less"), // 项目中其他自定义的样式（如果不需要动态修改其他样式，该文件可以为空）themeVariables: ["@primary-color","@success-color"], //要改变的主题变量indexFileName: "./public/index.html", // index.html所在位置outputFilePath: path.join(__dirname, "./public/color.less"), //提取的less文件输出到什么地方generateOnce: false // 是否只生成一次（if you don't want to generate color.less on each chnage in code to make build process fast in development mode, assign it true value. But if you have new changes in your styles, you need to re-run your build process npm start.）
};
module.exports ={configureWebpack: {// webpack pluginsplugins: [// 引入依赖配置new AntDesignThemePlugin(options)],},
}

在src目录下创建style文件夹，文件夹中创建index.less和variables.less文件

variables.less 配置如下:

// 这段样式引入必须添加
@import "~ant-design-vue/lib/style/themes/default.less";
//动态设置默认主题变量
@primary-color: #bfa;

public目录下index.html中添加less执行程序,注意下列代码添加在body标签下

<body>
<link rel="stylesheet/less" type="text/css" href="./color.less" />
<script>window.less = {async: false,env: 'production',javascriptEnabled: true};
</script>
<script src="https://cdn.bootcdn.net/ajax/libs/less.js/3.9.0/less.min.js"></script>
</body>
引入的less要和package.json中的less版本一致，

在页面中设置按钮更换主题

<div><a-button type="primary" @click="changetheme()" style="position:absolute;right: 30%;top: 30%">Primary</a-button>
</div>
changetheme(){
window.less.modifyVars(//更换主题颜色要这么写{'@primary-color': '#e64e14','@success-color': '#fafafa'//这个@...在node_modules\ant-design-vue\lib\style\themes\default.less应该是ant定义好的找找有没有自己能用的//这里写了啥@...也要在vue.config.js中themeVariables里也要写@...}
)
.then(() => {console.log('success')})
.catch(error => {console.log(error);
});
},

注意事项:

如果项目运行报错

/node_modules/ant-design-vue/lib/style/themes/default.less 文件中添加上述报错信息中的extract中的less变量

@table-header-sort-active-bg: darken(@table-header-bg, 3%);
@table-header-filter-active-bg: darken(@table-header-sort-active-bg, 5%);
@table-selection-column-width: 60px;

原先的./public/color.less要先可以删掉，以上步骤不出错会再新生成个color.less文件；不删的话会把原先的覆盖掉。

Ant-design-vue更换主题颜色相关推荐

Ant design vue动态主题切换的坑与一般性方法
本文原创,并且以吐槽为主,下面开始: Ant design vue是很优秀的框架,不过对于一般小白用户(比如我),文档方面不够友好.官方给出了主题自定义色彩的方案,但是太过于简陋,网上很多技术解决方案 ...
ant design vue treeDefaultExpandAll 更换数据后没有自动展开
ant design vue treeDefaultExpandAll 更换数据后没有自动展开,找了官网,看到也没什么解决办法在vue当中,所以只好这样子做原理很简单,就是销毁tree-sele ...
基于 Vue3.0 和 Ant Design Vue ,高颜值管理后台UI框架vue-vben-admin运行
简介 Vue Vben Admin 是一个免费开源的中后台模版.使用了最新的vue3,vite2,TypeScript等主流技术开发,开箱即用的中后台前端解决方案,也可用于学习参考. Github地址 ...
ABP vNext 对接 Ant Design Vue 实现分页查询
本文内容 ABP vNext中的分页查询 STable组件中的分页查询实现参数转换层最终对接效果在上一篇博客中,博主和大家分享了如何在 EF Core 中实现多租户架构.在这一过程中,博主主 ...
ant design vue table表格组件实现隔行变色
ant design vue table表格组件实现隔行变色一.使用方法 html代码: <a-table:columns="patient":data-source=&q ...
Ant Design Vue select下拉列表设置默认值
在项目中需要为Ant Design Vue 的 select 组件设置一个默认值,如下图所示的状态下拉选择框,默认选择全部代码如下: 1 <a-select v-model="que ...
iviewui php,Vue UI框架对比：Element UI、Ant Design Vue、iView
Element UI 文档:https://element.eleme.io/#/zh-CN/component/installation vue-element-admin预览:https://pa ...
解决ant design vue中的modal弹框样式修改无效问题修改modal样式无效
ant design vue中的modal弹框修改样式无效问题 ant中的弹框样式是修改不了的原因在于弹框modal被挂载在最大的元素div外面了所以需要将挂载在某个html元素上在modal外 ...
【Ant Design Vue】之Grid栅格和Space间距
文章目录 Grid 栅格 Space 间距 Grid 栅格 Ant Design Vue 将整个设计建议区域按照 24 等分的原则进行划分,划分之后的信息区块我们称之为『盒子』.建议横向排列的盒子数量 ...

Ant-design-vue更换主题颜色

Ant-design-vue更换主题颜色相关推荐

最新文章

热门文章