webpack-theme-color-replacer动态修改Ant Design Vue主题色

进入正题，首先我们安装antd
```
npm i --save ant-design-vue@next
```

在main.js中引入

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import utils from './config/util.js';Vue.prototype.$utils = utils;
Vue.prototype.axiosPost = utils.axiosPost; //axios post 请求
Vue.prototype.axiosGet = utils.axiosGet; //axios get 请求
Vue.config.productionTip = false;
import 'ant-design-vue/dist/antd.css';  这里引入css
//按需引入组件
import {ConfigProvider,Layout,Input,InputNumber,Button,Switch,Radio,Checkbox,Select,Card,Form,Row,Col,Modal,Table,Tabs,Icon,Badge,Popover,Dropdown,List,Avatar,Breadcrumb,Steps,Spin,Menu,Drawer,Tooltip,Alert,Tag,Divider,DatePicker,TimePicker,Upload,Progress,Skeleton,Popconfirm,PageHeader,Result,Statistic,Descriptions,Space,message,notification,
} from 'ant-design-vue';
Vue.use(ConfigProvider);
Vue.use(Layout);
Vue.use(Input);
Vue.use(InputNumber);
Vue.use(Button);
Vue.use(Switch);
Vue.use(Radio);
Vue.use(Checkbox);
Vue.use(Select);
Vue.use(Card);
Vue.use(Form);
Vue.use(Row);
Vue.use(Col);
Vue.use(Modal);
Vue.use(Table);
Vue.use(Tabs);
Vue.use(Icon);
Vue.use(Badge);
Vue.use(Popover);
Vue.use(Dropdown);
Vue.use(List);
Vue.use(Avatar);
Vue.use(Breadcrumb);
Vue.use(Steps);
Vue.use(Spin);
Vue.use(Menu);
Vue.use(Drawer);
Vue.use(Tooltip);
Vue.use(Alert);
Vue.use(Tag);
Vue.use(Divider);
Vue.use(DatePicker);
Vue.use(TimePicker);
Vue.use(Upload);
Vue.use(Progress);
Vue.use(Skeleton);
Vue.use(Popconfirm);
Vue.use(PageHeader);
Vue.use(Result);
Vue.use(Statistic);
Vue.use(Descriptions);
Vue.use(Space);new Vue({router,store,render: h => h(App),
}).$mount('#app');

然后安装webpack-theme-color-replacer

npm install webpack-theme-color-replacer

然后我们在config下创建这3个js文件

theme-color-replacer.plugin.config.js文件，代码如下：

const ThemeColorReplacer = require('webpack-theme-color-replacer');
const generate = require('@ant-design/colors/lib/generate').default;const getAntdSerials = color => {// 淡化（即less的tint）const lightens = new Array(9).fill().map((t, i) => {return ThemeColorReplacer.varyColor.lighten(color, i / 10);});const colorPalettes = generate(color);const rgb = ThemeColorReplacer.varyColor.toNum3(color.replace('#', '')).join(',');return lightens.concat(colorPalettes).concat(rgb);
};const themePluginOption = {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)' +selector);case '.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)' + selector;// fixed https://github.com/vueComponent/ant-design-vue-pro/issues/876case '.ant-steps-item-process .ant-steps-item-icon':return ':not(.ant-steps-item-custom)' + selector;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':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:hover';case '.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 > a';case '.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:hover';default:return selector;}},
};const createThemeColorReplacerPlugin = () =>new ThemeColorReplacer(themePluginOption);module.exports = createThemeColorReplacerPlugin;

themeColor.js，代码如下：

import client from 'webpack-theme-color-replacer/client';
import generate from '@ant-design/colors/lib/generate';export default {getAntdSerials(color) {// 淡化（即less的tint）const lightens = new Array(9).fill().map((t, i) => {return client.varyColor.lighten(color, i / 10);});// colorPalette变换得到颜色值const colorPalettes = generate(color);const rgb = client.varyColor.toNum3(color.replace('#', '')).join(',');return lightens.concat(colorPalettes).concat(rgb);},changeColor(newColor) {var options = {newColors: this.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},};return client.changer.changeColor(options, Promise);},
};

themesettingConfig.js，代码如下：

import themeColor from './themeColor.js';
import message from 'ant-design-vue/es/message';
import store from '../store';
// color Array
const colorList = [{key: '薄暮',color: '#F5222D',},{key: '火山',color: '#FA541C',},{key: '日暮',color: '#FAAD14',},{key: '明青',color: '#13C2C2',},{key: '极光绿',color: '#52C41A',},{key: '拂晓蓝（默认）',color: '#1890FF',},{key: '极客蓝',color: '#2F54EB',},{key: '酱紫',color: '#722ED1',},
];// 更新主题方法
const updateTheme = newPrimaryColor => {console.log('newPrimaryColor:', newPrimaryColor);store.commit('setprimaryColor', newPrimaryColor);const hideMessage = message.loading('正在切换主题！', 0);themeColor.changeColor(newPrimaryColor).finally(() => {console.log('切换成功');setTimeout(() => {hideMessage();}, 10);});
};export { updateTheme, colorList };

根目录vue.config.js 代码

const CompressionPlugin = require('compression-webpack-plugin');
const createThemeColorReplacerPlugin = require('./src/config/theme-color-replacer.plugin.config.js');module.exports = {configureWebpack: {plugins: [createThemeColorReplacerPlugin() // webpack plugins]}
};

然后我们新建SettingDrawer.vue组件使用

<template><div class="setting-drawer"><a-drawerwidth="300"placement="right"@close="onClose":closable="false":visible="visible"><div class="setting-drawer-index-content"><div :style="{ marginBottom: '24px' }"><h3 class="setting-drawer-index-title">整体风格设置</h3></div><div :style="{ marginBottom: '24px' }"><h3 class="setting-drawer-index-title">主题色</h3><div style="height: 20px"><a-tooltipclass="setting-drawer-theme-color-colorBlock"v-for="(item, index) in colorList":key="index"><template slot="title">{{ item.key }}</template><a-tag :color="item.color" @click="changeColor(item.color)"><!-- <a-icontype="check"v-if="item.color === primaryColor"></a-icon> --></a-tag></a-tooltip></div></div><a-divider /><div :style="{ marginBottom: '24px' }"><h3 class="setting-drawer-index-title">导航模式</h3><div><a-switch :default-checked="false" @change="changeMode" /> ChangeMode<br /><span className="ant-divider" style="margin: 10px" /><br /><a-switch :default-checked="false" @change="changeCollapsed" />Change Theme</div></div><a-divider /></div><div class="setting-drawer-index-handle" @click="toggle" slot="handle"><a-icon type="setting" v-if="!visible" /><a-icon type="close" v-else /></div></a-drawer></div>
</template><script>
import { updateTheme, colorList } from '../config/themesettingConfig';
export default {components: {},mixins: [],data() {return {visible: false,colorList,};},watch: {},mounted() {},methods: {changeMode(checked) {this.$parent.changeMode(checked);},changeCollapsed(checked) {this.$parent.changeCollapsed(checked);},showDrawer() {this.visible = true;},onClose() {this.visible = false;},toggle() {this.visible = !this.visible;},changeColor(color) {console.log('color:', color);updateTheme(color);},},
};
</script><style lang="less" >
.setting-drawer-index-content {.setting-drawer-index-blockChecbox {display: flex;.setting-drawer-index-item {margin-right: 16px;position: relative;border-radius: 4px;cursor: pointer;img {width: 48px;}.setting-drawer-index-selectIcon {position: absolute;top: 0;right: 0;width: 100%;padding-top: 15px;padding-left: 24px;height: 100%;color: #1890ff;font-size: 14px;font-weight: 700;}}}.setting-drawer-theme-color-colorBlock {width: 20px;height: 20px;border-radius: 2px;float: left;cursor: pointer;margin-right: 8px;padding-left: 0px;padding-right: 0px;text-align: center;color: #fff;font-weight: 700;i {font-size: 14px;}}
}.setting-drawer-index-handle {position: absolute;top: 240px;background: #1890ff;width: 48px;height: 48px;right: 300px;display: flex;justify-content: center;align-items: center;cursor: pointer;pointer-events: auto;z-index: 1001;text-align: center;font-size: 16px;border-radius: 4px 0 0 4px;i {color: rgb(255, 255, 255);font-size: 20px;}
}
</style>

引入使用组件即可

webpack-theme-color-replacer动态修改Ant Design Vue主题色相关推荐

vue3 antd table表格样式修改——ant design vue table表格的行高调整
vue3 antd项目实战--修改ant design vue table组件的默认样式(调整每行行高) 知识调用场景复现实际操作解决a-table表格padding过宽知识调用文章中可能会 ...
修改ant design vue中的Icon图标颜色
直接行内式即可 <a-icon type="file-text" style="color: rgba(28, 106, 235, 1)" />
Ant design vue动态主题切换的坑与一般性方法
本文原创,并且以吐槽为主,下面开始: Ant design vue是很优秀的框架,不过对于一般小白用户(比如我),文档方面不够友好.官方给出了主题自定义色彩的方案,但是太过于简陋,网上很多技术解决方案 ...
vue将每个路由打包成html,Ant Design Vue pro 动态路由的实现和打包
Ant Design Vue pro 动态路由的实现和打包 Ant Design Vue pro 动态路由的实现和打包配置路由权限在config文件夹下router.config.js中配置路由权 ...
解决ant design vue中的modal弹框样式修改无效问题修改modal样式无效
ant design vue中的modal弹框修改样式无效问题 ant中的弹框样式是修改不了的原因在于弹框modal被挂载在最大的元素div外面了所以需要将挂载在某个html元素上在modal外 ...
Ant Design Vue 表格筛选时只进行前台的按页筛选修改为后台的全局筛选
原因分析在我们使用 Ant Design Vue 表格筛选功能时会发现,如果只是按照例子来,只是前端的按页筛选,并不能都进行全局筛选,原因有两点: 1.我们筛选的时候,只是进行前端的数据过滤,并没有 ...
ant design vue pro 支持多页签模式页签可以缓存
ant design vue pro 支持多页签模式页签可以缓存代码贴在最后启动之后页面是这样的: 第一步:修改 src/layouts/BasicLayout.vue 文件,在该文件中添加mu ...
ant design vue利用rowClassName给table添加行样式
ant design vue利用rowClassName给table添加行样式目录 1. 需求:表格每行数据hasVerdict值不为'1'时标红显示 2. 实现方式:table属性rowClass ...
ant vue 设置中文_vue+Ant design vue做项目-Go语言中文社区
哈喽哈喽,这期带来蚂蚁金服的一个 Ant Design 的 Vue 实现. 样式还是很现代化的,嗯...现在是2019年9月17,对现在来说还很fashion过几年就不知道了. 话不多说直接上手,喜欢 ...
ABP vNext 对接 Ant Design Vue 实现分页查询
本文内容 ABP vNext中的分页查询 STable组件中的分页查询实现参数转换层最终对接效果在上一篇博客中,博主和大家分享了如何在 EF Core 中实现多租户架构.在这一过程中,博主主 ...

webpack-theme-color-replacer动态修改Ant Design Vue主题色

webpack-theme-color-replacer动态修改Ant Design Vue主题色相关推荐

最新文章

热门文章