ant design vue 在线自定义更换主题颜色

最新推荐文章于 2025-03-26 16:44:16 发布

前端小白请多指教

最新推荐文章于 2025-03-26 16:44:16 发布

阅读量6.5k

点赞数 1

文章标签： vue js javascript

本文链接：https://blog.youkuaiyun.com/qq_34164252/article/details/103629992

版权

本文介绍如何使用Vue和AntDesign实现网站主题颜色的动态更换，通过配置和代码示例，展示了如何定制主题颜色，使网站更具个性化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

 <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>