先看demo
源码
原文地址
看到ant design pro 上的 主题颜色更换 感觉挺酷的 就研究了一下 , 因为最近想用vue 重写一版博客 所有就 用的 vue + ant design 做的这个demo
1 创建项目
用vue cli 创建项目之后 需要先安装以下两个 插件 第一个是 ui 都知道 第二个是 用来改变颜色的插件
“ant-design-vue”: “^1.4.8”,
“antd-theme-generator”: “^1.1.7”
在 main.js 中 一定要 导入 antd.less
import ‘ant-design-vue/dist/antd.less’
import Antd from ‘ant-design-vue’
Vue.config.productionTip = false
Vue.use(Antd)
2 创建color.js
在跟目录下创建 color.js 内容为
const path = require('path');
const { generateTheme, getLessVars } = require('antd-theme-generator');
// ant-design-vue/dist/antd.less
const options = {
antDir: path.join(__dirname, './node_modules/ant-design-vue'), //对应具体位置
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',
'@secondary-color',
'@text-color',
'@text-color-secondary',
'@heading-color',
'@layout-body-background',
'@btn-primary-bg',
'@layout-header-background'
],
indexFileName: 'index.html',
outputFilePath: path.join(__dirname, './public/color.less'),
}
generateTheme(options).then(less => {
console.log('Theme generated successfully');
})
.catch(error => {
console.log('Error', error);
});
3 创建style
在src目录下 创建 style 文件夹
在文件夹下创建 index.less variables.less 两个文件
其中 index.less 为空
variables.less 内容为
@import “~/ant-design-vue/lib/style/themes/default.less”;
@link-color: #00375B;
@primary-color: rgb(138, 164, 182);
.primary-color{
color:@primary-color
}
4 更改 html
在public 下的index.html 中 增加以下代码
注: 这段代码加在body末尾 别在head 上
5 更改 package.json
“serve”: “node color && vue-cli-service serve”,
“build”: “node color && vue-cli-service build”,
6 更改颜色
window.less
.modifyVars({
‘@primary-color’: this.color,
‘@link-color’: this.color,
‘@btn-primary-bg’: this.color
}) 这个方法用来更换颜色
设置颜色
预设颜色
自定义颜色
效果展示
Cancel
OK
L
M
M
R
Hangzhou
Shanghai
Beijing
Chengdu
Navigation Three
Option 9
Option 10
Option 11
Option 12
A
B
C
D
E