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

    1. 进入正题，首先我们安装antd 
      npm i --save ant-design-vue@next
    2. 在main.js中引入 
      1. import Vue from 'vue';
      2. import App from './App.vue';
      3. import router from './router';
      4. import store from './store';
      5. import utils from './config/util.js';
      6.  
      7. Vue.prototype.$utils = utils;
      8. Vue.prototype.axiosPost = utils.axiosPost; //axios post 请求
      9. Vue.prototype.axiosGet = utils.axiosGet; //axios get 请求
      10. Vue.config.productionTip = false;
      11. import 'ant-design-vue/dist/antd.css';  这里引入css
      12. //按需引入组件
      13. import {
      14.   ConfigProvider,
      15.   Layout,
      16.   Input,
      17.   InputNumber,
      18.   Button,
      19.   Switch,
      20.   Radio,
      21.   Checkbox,
      22.   Select,
      23.   Card,
      24.   Form,
      25.   Row,
      26.   Col,
      27.   Modal,
      28.   Table,
      29.   Tabs,
      30.   Icon,
      31.   Badge,
      32.   Popover,
      33.   Dropdown,
      34.   List,
      35.   Avatar,
      36.   Breadcrumb,
      37.   Steps,
      38.   Spin,
      39.   Menu,
      40.   Drawer,
      41.   Tooltip,
      42.   Alert,
      43.   Tag,
      44.   Divider,
      45.   DatePicker,
      46.   TimePicker,
      47.   Upload,
      48.   Progress,
      49.   Skeleton,
      50.   Popconfirm,
      51.   PageHeader,
      52.   Result,
      53.   Statistic,
      54.   Descriptions,
      55.   Space,
      56.   message,
      57.   notification,
      58. } from 'ant-design-vue';
      59. Vue.use(ConfigProvider);
      60. Vue.use(Layout);
      61. Vue.use(Input);
      62. Vue.use(InputNumber);
      63. Vue.use(Button);
      64. Vue.use(Switch);
      65. Vue.use(Radio);
      66. Vue.use(Checkbox);
      67. Vue.use(Select);
      68. Vue.use(Card);
      69. Vue.use(Form);
      70. Vue.use(Row);
      71. Vue.use(Col);
      72. Vue.use(Modal);
      73. Vue.use(Table);
      74. Vue.use(Tabs);
      75. Vue.use(Icon);
      76. Vue.use(Badge);
      77. Vue.use(Popover);
      78. Vue.use(Dropdown);
      79. Vue.use(List);
      80. Vue.use(Avatar);
      81. Vue.use(Breadcrumb);
      82. Vue.use(Steps);
      83. Vue.use(Spin);
      84. Vue.use(Menu);
      85. Vue.use(Drawer);
      86. Vue.use(Tooltip);
      87. Vue.use(Alert);
      88. Vue.use(Tag);
      89. Vue.use(Divider);
      90. Vue.use(DatePicker);
      91. Vue.use(TimePicker);
      92. Vue.use(Upload);
      93. Vue.use(Progress);
      94. Vue.use(Skeleton);
      95. Vue.use(Popconfirm);
      96. Vue.use(PageHeader);
      97. Vue.use(Result);
      98. Vue.use(Statistic);
      99. Vue.use(Descriptions);
      100. Vue.use(Space);
      101.  
      102. new Vue({
      103.   router,
      104.   store,
      105.   render: h => h(App),
      106. }).$mount('#app');

    3. 然后安装webpack-theme-color-replacer 
      npm install webpack-theme-color-replacer

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

       

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

      1. const ThemeColorReplacer = require('webpack-theme-color-replacer');
      2. const generate = require('@ant-design/colors/lib/generate').default;
      3.  
      4. const getAntdSerials = color => {
      5.   // 淡化（即less的tint）
      6.   const lightens = new Array(9).fill().map((t, i) => {
      7.     return ThemeColorReplacer.varyColor.lighten(color, i / 10);
      8.   });
      9.   const colorPalettes = generate(color);
      10.   const rgb = ThemeColorReplacer.varyColor
      11.     .toNum3(color.replace('#', ''))
      12.     .join(',');
      13.   return lightens.concat(colorPalettes).concat(rgb);
      14. };
      15.  
      16. const themePluginOption = {
      17.   fileName: 'css/theme-colors-[contenthash:8].css',
      18.   matchColors: getAntdSerials('#1890ff'), // 主色系列
      19.   // 改变样式选择器，解决样式覆盖问题
      20.   changeSelector(selector) {
      21.     switch (selector) {
      22.       case '.ant-calendar-today .ant-calendar-date':
      23.         return (
      24.           ':not(.ant-calendar-selected-date):not(.ant-calendar-selected-day)' +
      25.           selector
      26.         );
      27.       case '.ant-btn:focus,.ant-btn:hover':
      28.         return '.ant-btn:focus:not(.ant-btn-primary):not(.ant-btn-danger),.ant-btn:hover:not(.ant-btn-primary):not(.ant-btn-danger)';
      29.       case '.ant-btn.active,.ant-btn:active':
      30.         return '.ant-btn.active:not(.ant-btn-primary):not(.ant-btn-danger),.ant-btn:active:not(.ant-btn-primary):not(.ant-btn-danger)';
      31.       case '.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon':
      32.       case '.ant-steps-item-process .ant-steps-item-icon>.ant-steps-icon':
      33.         return ':not(.ant-steps-item-process)' + selector;
      34.       // fixed https://github.com/vueComponent/ant-design-vue-pro/issues/876
      35.       case '.ant-steps-item-process .ant-steps-item-icon':
      36.         return ':not(.ant-steps-item-custom)' + selector;
      37.       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':
      38.       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':
      39.         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';
      40.       case '.ant-menu-horizontal > .ant-menu-item-selected > a':
      41.       case '.ant-menu-horizontal>.ant-menu-item-selected>a':
      42.         return '.ant-menu-horizontal:not(ant-menu-light):not(.ant-menu-dark) > .ant-menu-item-selected > a';
      43.       case '.ant-menu-horizontal > .ant-menu-item > a:hover':
      44.       case '.ant-menu-horizontal>.ant-menu-item>a:hover':
      45.         return '.ant-menu-horizontal:not(ant-menu-light):not(.ant-menu-dark) > .ant-menu-item > a:hover';
      46.       default:
      47.         return selector;
      48.     }
      49.   },
      50. };
      51.  
      52. const createThemeColorReplacerPlugin = () =>
      53.   new ThemeColorReplacer(themePluginOption);
      54.  
      55. module.exports = createThemeColorReplacerPlugin;

    7. themeColor.js，代码如下：

      1. import client from 'webpack-theme-color-replacer/client';
      2. import generate from '@ant-design/colors/lib/generate';
      3.  
      4. export default {
      5.   getAntdSerials(color) {
      6.     // 淡化（即less的tint）
      7.     const lightens = new Array(9).fill().map((t, i) => {
      8.       return client.varyColor.lighten(color, i / 10);
      9.     });
      10.     // colorPalette变换得到颜色值
      11.     const colorPalettes = generate(color);
      12.     const rgb = client.varyColor.toNum3(color.replace('#', '')).join(',');
      13.     return lightens.concat(colorPalettes).concat(rgb);
      14.   },
      15.   changeColor(newColor) {
      16.     var options = {
      17.       newColors: this.getAntdSerials(newColor), // new colors array, one-to-one corresponde with `matchColors`
      18.       changeUrl(cssUrl) {
      19.         return `/${cssUrl}`; // while router is not `hash` mode, it needs absolute path
      20.       },
      21.     };
      22.     return client.changer.changeColor(options, Promise);
      23.   },
      24. };

    8. themesettingConfig.js，代码如下：
       

      1. import themeColor from './themeColor.js';
      2. import message from 'ant-design-vue/es/message';
      3. import store from '../store';
      4. // color Array
      5. const colorList = [
      6.   {
      7.     key: '薄暮',
      8.     color: '#F5222D',
      9.   },
      10.   {
      11.     key: '火山',
      12.     color: '#FA541C',
      13.   },
      14.   {
      15.     key: '日暮',
      16.     color: '#FAAD14',
      17.   },
      18.   {
      19.     key: '明青',
      20.     color: '#13C2C2',
      21.   },
      22.   {
      23.     key: '极光绿',
      24.     color: '#52C41A',
      25.   },
      26.   {
      27.     key: '拂晓蓝（默认）',
      28.     color: '#1890FF',
      29.   },
      30.   {
      31.     key: '极客蓝',
      32.     color: '#2F54EB',
      33.   },
      34.   {
      35.     key: '酱紫',
      36.     color: '#722ED1',
      37.   },
      38. ];
      39.  
      40. // 更新主题方法
      41. const updateTheme = newPrimaryColor => {
      42.   console.log('newPrimaryColor:', newPrimaryColor);
      43.   store.commit('setprimaryColor', newPrimaryColor);
      44.   const hideMessage = message.loading('正在切换主题！', 0);
      45.   themeColor.changeColor(newPrimaryColor).finally(() => {
      46.     console.log('切换成功');
      47.     setTimeout(() => {
      48.       hideMessage();
      49.     }, 10);
      50.   });
      51. };
      52.  
      53. export { updateTheme, colorList };

    9. 根目录vue.config.js 代码
       

      1. const CompressionPlugin = require('compression-webpack-plugin');
      2. const createThemeColorReplacerPlugin = require('./src/config/theme-color-replacer.plugin.config.js');
      3.  
      4. module.exports = {
      5.   configureWebpack: {
      6.     plugins: [
      7.       createThemeColorReplacerPlugin() // webpack plugins
      8.     ]
      9.   }
      10. };
    10. 然后我们新建SettingDrawer.vue组件使用
        
      1. <template>
      2.   <div class="setting-drawer">
      3.     <a-drawer
      4.       width="300"
      5.       placement="right"
      6.       @close="onClose"
      7.       :closable="false"
      8.       :visible="visible"
      9.     >
      10.       <div class="setting-drawer-index-content">
      11.         <div :style="{ marginBottom: '24px' }">
      12.           <h3 class="setting-drawer-index-title">整体风格设置</h3>
      13.         </div>
      14.  
      15.         <div :style="{ marginBottom: '24px' }">
      16.           <h3 class="setting-drawer-index-title">主题色</h3>
      17.  
      18.           <div style="height: 20px">
      19.             <a-tooltip
      20.               class="setting-drawer-theme-color-colorBlock"
      21.               v-for="(item, index) in colorList"
      22.               :key="index"
      23.             >
      24.               <template slot="title">
      25.                 {{ item.key }}
      26.               </template>
      27.               <a-tag :color="item.color" @click="changeColor(item.color)">
      28.                 <!-- <a-icon
      29.                   type="check"
      30.                   v-if="item.color === primaryColor"
      31.                 ></a-icon> -->
      32.               </a-tag>
      33.             </a-tooltip>
      34.           </div>
      35.         </div>
      36.         <a-divider />
      37.         <div :style="{ marginBottom: '24px' }">
      38.           <h3 class="setting-drawer-index-title">导航模式</h3>
      39.  
      40.           <div>
      41.             <a-switch :default-checked="false" @change="changeMode" /> Change
      42.             Mode
      43.             <br />
      44.             <span className="ant-divider" style="margin: 10px" />
      45.             <br />
      46.             <a-switch :default-checked="false" @change="changeCollapsed" />
      47.             Change Theme
      48.           </div>
      49.         </div>
      50.         <a-divider />
      51.       </div>
      52.       <div class="setting-drawer-index-handle" @click="toggle" slot="handle">
      53.         <a-icon type="setting" v-if="!visible" />
      54.         <a-icon type="close" v-else />
      55.       </div>
      56.     </a-drawer>
      57.   </div>
      58. </template>
      59.  
      60. <script>
      61. import { updateTheme, colorList } from '../config/themesettingConfig';
      62. export default {
      63.   components: {},
      64.   mixins: [],
      65.   data() {
      66.     return {
      67.       visible: false,
      68.       colorList,
      69.     };
      70.   },
      71.   watch: {},
      72.   mounted() {},
      73.   methods: {
      74.     changeMode(checked) {
      75.       this.$parent.changeMode(checked);
      76.     },
      77.     changeCollapsed(checked) {
      78.       this.$parent.changeCollapsed(checked);
      79.     },
      80.     showDrawer() {
      81.       this.visible = true;
      82.     },
      83.     onClose() {
      84.       this.visible = false;
      85.     },
      86.     toggle() {
      87.       this.visible = !this.visible;
      88.     },
      89.     changeColor(color) {
      90.       console.log('color:', color);
      91.       updateTheme(color);
      92.     },
      93.   },
      94. };
      95. </script>
      96.  
      97. <style lang="less" >
      98. .setting-drawer-index-content {
      99.   .setting-drawer-index-blockChecbox {
      100.     display: flex;
      101.  
      102.     .setting-drawer-index-item {
      103.       margin-right: 16px;
      104.       position: relative;
      105.       border-radius: 4px;
      106.       cursor: pointer;
      107.  
      108.       img {
      109.         width: 48px;
      110.       }
      111.  
      112.       .setting-drawer-index-selectIcon {
      113.         position: absolute;
      114.         top: 0;
      115.         right: 0;
      116.         width: 100%;
      117.         padding-top: 15px;
      118.         padding-left: 24px;
      119.         height: 100%;
      120.         color: #1890ff;
      121.         font-size: 14px;
      122.         font-weight: 700;
      123.       }
      124.     }
      125.   }
      126.   .setting-drawer-theme-color-colorBlock {
      127.     width: 20px;
      128.     height: 20px;
      129.     border-radius: 2px;
      130.     float: left;
      131.     cursor: pointer;
      132.     margin-right: 8px;
      133.     padding-left: 0px;
      134.     padding-right: 0px;
      135.     text-align: center;
      136.     color: #fff;
      137.     font-weight: 700;
      138.  
      139.     i {
      140.       font-size: 14px;
      141.     }
      142.   }
      143. }
      144.  
      145. .setting-drawer-index-handle {
      146.   position: absolute;
      147.   top: 240px;
      148.   background: #1890ff;
      149.   width: 48px;
      150.   height: 48px;
      151.   right: 300px;
      152.   display: flex;
      153.   justify-content: center;
      154.   align-items: center;
      155.   cursor: pointer;
      156.   pointer-events: auto;
      157.   z-index: 1001;
      158.   text-align: center;
      159.   font-size: 16px;
      160.   border-radius: 4px 0 0 4px;
      161.  
      162.   i {
      163.     color: rgb(255, 255, 255);
      164.     font-size: 20px;
      165.   }
      166. }
      167. </style>

      引入使用组件即可
  • 相关阅读:
    沁恒 CH32V208(四): CH32V208 网络DHCP示例代码分析
    基于SSM+SpringBoot+MySQL+Vue前后端分离的高校考试管理系统
    Oracle查询最大连接数和当前连接数
    SQLAlchemy 使用封装实例
    kotlin flow sample的用法
    tensor的索引、切片、拼接和压缩等
    el-upload上传组件的动态添加；el-upload动态上传文件；el-upload区分文件是哪个组件上传的。
    中台架构介绍和应用价值
    手画图解 | 关于死锁，面试的一切都在这里了
    详解：飞讯是如何助力集团型制造企业实现数字化转型的
  • 原文地址：https://blog.csdn.net/slow097/article/details/125633774