在线更改主题步骤

看到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 上

 <link rel="stylesheet/less" type="text/css" href="/color.less" /> <script> window.less = { async: false, env: 'production'  }; </script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script> 

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
}) 这个方法用来更换颜色

<template> <div class="cont"> <a-row> <a-col :span="12" :offset="6"> <a-divider>设置颜色</a-divider> <h2>预设颜色</h2> <div class="yscont"> <div class="ysitem" style="background:#3e91f7" @click="click('#3e91f7')"></div> <div class="ysitem" style="background:#e23c39" @click="click('#e23c39')"></div> <div class="ysitem" style="background:#e96033" @click="click('#e96033')"></div> <div class="ysitem" style="background:#f0af41" @click="click('#f0af41')"></div> <div class="ysitem" style="background:#58bfc1" @click="click('#58bfc1')"></div> <div class="ysitem" style="background:#72c140" @click="click('#72c140')"></div> <div class="ysitem" style="background:#3258e3" @click="click('#3258e3')"></div> <div class="ysitem" style="background:#6839c9" @click="click('#6839c9')"></div> </div> <h2>自定义颜色</h2> <a-input type="color" style="width:100px;margin-bottom:10px" v-model="color" @change="huan"></a-input> <a-divider>效果展示</a-divider> <a-button-group style="margin-right:10px"> <a-button>Cancel</a-button> <a-button type="primary">OK</a-button> </a-button-group> <a-button-group> <a-button type="primary">L</a-button> <a-button>M</a-button> <a-button>M</a-button> <a-button type="dashed">R</a-button> </a-button-group> <br /> <a-radio-group> <a-radio-button value="a">Hangzhou</a-radio-button> <a-radio-button value="b">Shanghai</a-radio-button> <a-radio-button value="c">Beijing</a-radio-button> <a-radio-button value="d">Chengdu</a-radio-button> </a-radio-group> <a-menu theme="dark"> <a-sub-menu key="sub4"> <span slot="title"><a-icon type="setting" /><span>Navigation Three</span></span> <a-menu-item key="9">Option 9</a-menu-item> <a-menu-item key="10">Option 10</a-menu-item> <a-menu-item key="11">Option 11</a-menu-item> <a-menu-item key="12">Option 12</a-menu-item> </a-sub-menu> </a-menu> <a-pagination :total="50" /> <a-checkbox-group > <a-checkbox value="A">A</a-checkbox> <a-checkbox value="B">B</a-checkbox> <a-checkbox value="C">C</a-checkbox> <a-checkbox value="D">D</a-checkbox> <a-checkbox value="E">E</a-checkbox> </a-checkbox-group> </a-col> </a-row> </div> </template> <script> // @ is an alias to /src export default { name: 'home', components: {}, data () { return { color: ''  }  }, methods: { click (color) { this.color = color this.huan()  }, huan () { window.less  .modifyVars({ '@primary-color': this.color, '@link-color': this.color, '@btn-primary-bg': this.color  })  .then(() => { console.log('成功')  })  .catch(error => { alert('失败') console.log(error)  })  }  } } </script> <style scoped> .cont { padding: 100px 0; } .yscont { display: flex; margin-bottom: 10px; } .ysitem { width: 20px; height: 20px; border-radius: 3px; margin-right: 5px; cursor: pointer; } .ysitem:hover { box-shadow: 2px 2px 2px #999; } </style>