devbox
花生_TL007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue-cli3，vue2+elementui实现用户自定义主题色，切换主题，（2023-02-10增加功能：后台可配置主题色以及功能色）_vue2+element 主题切换方案

作者：花生_TL007 | 2024-03-19 13:23:23

赞

踩

vue2+element 主题切换方案

自定义主题色包含以下两种，并且这两种的主题色需要同步

  1. element-ui的主题色
  2. 程序员自己写的样式中的主题色

我参考

  1. 一篇博客：vue,elementUI切换主题，自定义主题 - 小兔额乖乖 - 博客园
  2. 一个开源框架：腾讯的tDesign搭建的开源框架——TDesign Vue Next Starter

输出了此篇文章

说明1：小兔额乖乖文章中的项目示例，在修改主题色后，刷新一下，鼠标hover时会有问题，此问题在本篇文章中已经解决

说明2：我曾经尝试完全模仿腾讯那个框架的思路。但是此思路不适用于element-ui这个框架，会报错

说明3：下面的正文中，项目中修改主题色时，会运行  document.head.appendChild(style)  ，修改一次颜色就会添加一个stylesheet，有兴趣的同学可以优化一下，改成替换掉上一次的style。

 以下是正文

---------------------------------------------------------------------------------------------------------------------------------

1、创建一个vue项目

① vue-cli3创建项目 

vue create vue-custom-theme

② 安装element-ui相关

安装elementUI

npm i element-ui -S

安装sass  

npm install node-sass@4.11.0 sass-loader@7.1.0 -D

 启动项目

npm run serve

2、引入element-ui

①在main,js中

  1. import ElementUI from 'element-ui'
  2. import './styles.scss'
  3. Vue.use(ElementUI)

②给一个默认的主题色【此步骤可省略，不需要。因为可以在Theme.vue中直接从后台获取默认主题（this.$store.state.sysConfig.theme）。this.$store.state.sysConfig.theme是在后台获取的，存储在了vuex里面，获取时机是全局路由拦截，在进入页面之前获取的】

用户先从线上拉去配置主题的css文件，当用户更改颜色后，在把css文件里面所有的颜色值替换掉，然后把这个css文件重新插入到html中达到改变颜色。

在这里都需要修改再方法1的基础上进行扩展：在element-variables.scss（大部分项目都是）添加 默认我们自己设置的颜色。

当然这个颜色也可以在其他公共css修改。我是在style.scss中修改的，如下

style.scss

  1. /* theme color */
  2. $--color-primary: #ff6f4b;
  3.  
  4. /* icon font path, required */
  5. $--font-path: '~element-ui/lib/theme-chalk/fonts';
  6.  
  7. @import "~element-ui/packages/theme-chalk/src/index";

3、主题色修改

①安装两个插件

  1. npm install css-color-function  
  2.  
  3. npm install object-assign

③ 从 unpkg.com/element-ui/lib/theme-chalk/index.css 把最新css文件复制下来copy到项目静态文件目录中：

④  接下来就是写代码了。在App.vue上引入自定义的修改主题组件，再随便弄些element组件观察变化：

 ⑤写组件：Theme.vue

  1. <!-- 切换主题色  -->
  2. <template>
  3.   <div class="handle-theme">
  4.     <el-color-picker
  5.       @change="colorChange"
  6.       v-model="colors.primary"
  7.     ></el-color-picker>
  8.   </div>
  9. </template>
  10. <script>
  11. import generateColors from "@/utils/color";
  12. import objectAssign from 'object-assign';
  13. export default {
  14.   name: 'App',
  15.   data() {
  16.     return {
  17.       originalStylesheetCount: -1, // 记录当前已引入style数量
  18.       originalStyle: '', // 获取拿到的.css的字符串
  19.       colors: {
  20.    
  21.         primary: '#ff6f4b',// this.$store.state.sysConfig.theme,
  22.         success: '#00c5bd',
  23.         warning: '#f39800',
  24.         danger: '#f56c6c',
  25.         info: '#909399'
  26.       },
  27.       // primaryColor: "", //提交成功后设置默认颜色
  28.       cssUrl: [
  29.         '//unpkg.com/element-ui/lib/theme-chalk/index.css',
  30.         process.env.BASE_URL + 'static/css/index.css'
  31.       ]
  32.     };
  33.   },
  34.   methods: {
  35.     initTheme() {
  36.       // 默认从线上官方拉取最新css,2秒钟后做一个检查没有拉到就从本地在拉下
  37.       // 如果是记住用户的状态就需要，在主题切换的时候记录颜色值，在下次打开的时候从新赋值
  38.       this.colors.primary =  localStorage.getItem('color') || this.colors.primary; // 例如
  39.       // this.getIndexStyle(this.cssUrl[0]);
  40.       // setTimeout(() =>{
  41.       //   if (this.originalStyle) {
  42.       //     return;
  43.       //   } else {
  44.       this.getIndexStyle(this.cssUrl[1]);
  45.       //   }
  46.       // }, 2000);
  47.       this.$nextTick(() => {
  48.         // 获取页面一共引入了多少个style 文件
  49.         this.originalStylesheetCount = document.styleSheets.length;
  50.       });
  51.     },
  52.     colorChange(e) {
  53.       if (!e) return;
  54.       this.primaryColor = e;
  55.       localStorage.setItem('color', e);
  56.  
  57.       let primarySeries = this.generateColors('p', e)
  58.       let successSeries = this.generateColors('s', this.colors.success)
  59.       let warningSeries = this.generateColors('w', this.colors.warning)
  60.       let dangerSeries = this.generateColors('d', this.colors.danger)
  61.       let infoSeries = this.generateColors('i', this.colors.info)
  62.  
  63.       this.colors = objectAssign(
  64.         {},
  65.         this.colors,
  66.         primarySeries,
  67.         successSeries,
  68.         warningSeries,
  69.         dangerSeries,
  70.         infoSeries
  71.       );
  72.       this.writeNewStyle();
  73.     },
  74.     writeNewStyle() {
  75.       let cssText = this.originalStyle;
  76.       Object.keys(this.colors).forEach((key) => {
  77.         cssText = cssText.replace(
  78.           new RegExp('(:|\\s+)' + key, 'g'),
  79.           '$1' + this.colors[key]
  80.         );
  81.       });
  82.       const style = document.createElement('style');
  83.       style.innerText = `
  84.                     :root{
  85.                         --primary-color: ${this.colors.primary};
  86.                         --primary-color-light-1:${this.colors['pl-1']};
  87.                         --primary-color-light-2:${this.colors['pl-2']};
  88.                         --primary-color-light-3:${this.colors['pl-3']};
  89.                         --primary-color-light-4:${this.colors['pl-4']};
  90.                         --primary-color-light-5:${this.colors['pl-5']};
  91.                         --primary-color-light-6:${this.colors['pl-6']};
  92.                         --primary-color-light-7:${this.colors['pl-7']};
  93.                         --primary-color-light-8:${this.colors['pl-8']};
  94.                         --primary-color-light-9:${this.colors['pl-9']};
  95.                     }${cssText}`;
  96.       // ":root{--primary-color:" + this.colors.primary + "}" + cssText;
  97.       document.head.appendChild(style);
  98.       // if (this.originalStylesheetCount === document.styleSheets.length) {
  99.       //     // 如果之前没有插入就插入
  100.       //     const style = document.createElement("style");
  101.       //     style.innerText =
  102.       //         ":root{--primary-color:" + this.colors.primary + "}" + cssText;
  103.       //     document.head.appendChild(style);
  104.       // } else {
  105.       //     // 如果之前没有插入就修改
  106.       //     document.head.lastChild.innerText =
  107.       //         ":root{--primary-color:" +
  108.       //         this.colors.primary +
  109.       //         "} " +
  110.       //         cssText;
  111.       // }
  112.     },
  113.     getIndexStyle(url) {
  114.       var request = new XMLHttpRequest();
  115.       request.open('GET', url);
  116.       request.onreadystatechange = () => {
  117.         if (
  118.           request.readyState === 4 &&
  119.           (request.status == 200 || request.status == 304)
  120.         ) {
  121.           // 调用本地的如果拿不到会得到html,html是不行的
  122.           if (request.response && !/DOCTYPE/gi.test(request.response)) {
  123.             this.originalStyle = this.getStyleTemplate(request.response);
  124.             this.colorChange(this.colors.primary);
  125.           } else {
  126.             this.originalStyle = '';
  127.           }
  128.         } else {
  129.           this.originalStyle = '';
  130.         }
  131.       };
  132.       request.send(null);
  133.     },
  134.     getStyleTemplate(data) {
  135.        const colorMap = {
  136.         // "#3a8ee6": "shade-1",
  137.         // "#409eff": "primary",
  138.         // "#53a8ff": "light-1",
  139.         // "#66b1ff": "light-2",
  140.         // "#79bbff": "light-3",
  141.         // "#8cc5ff": "light-4",
  142.         // "#a0cfff": "light-5",
  143.         // "#b3d8ff": "light-6",
  144.         // "#c6e2ff": "light-7",
  145.         // "#d9ecff": "light-8",
  146.         // "#ecf5ff": "light-9",
  147.  
  148.         '#3a8ee6': 'ps-1',
  149.         '#409eff': 'primary',
  150.         '#53a8ff': 'pl-1',
  151.         '#66b1ff': 'pl-2',
  152.         '#79bbff': 'pl-3',
  153.         '#8cc5ff': 'pl-4',
  154.         '#a0cfff': 'pl-5',
  155.         '#b3d8ff': 'pl-6',
  156.         '#c6e2ff': 'pl-7',
  157.         '#d9ecff': 'pl-8',
  158.         '#ecf5ff': 'pl-9',
  159.  
  160.         '#5daf34': 'ss-1', // is-plain:active
  161.         '#67c23a': 'success', // success
  162.         '#76c84e': 'sl-1', // 没有
  163.         '#85ce61': 'sl-2', // hover color
  164.         '#95d475': 'sl-3', // 没有
  165.         '#a4da89': 'sl-4', // is-disabled hover color
  166.         '#b3e19d': 'sl-5', // is-disabled color
  167.         '#c2e7b0': 'sl-6', // border-color
  168.         '#d1edc4': 'sl-7', // 没有
  169.         '#e1f3d8': 'sl-8', // light
  170.         '#f0f9eb': 'sl-9', // lighter
  171.  
  172.         '#cf9236': 'ws-1', // is-plain:active
  173.         '#E6A23C': 'warning', // success
  174.         '#e9ab50': 'wl-1', // 没有
  175.         '#ebb563': 'wl-2', // hover color
  176.         '#eebe77': 'wl-3', // 没有
  177.         '#f0c78a': 'wl-4', // is-disabled hover color
  178.         '#f3d19e': 'wl-5', // is-disabled color
  179.         '#f5dab1': 'wl-6', // border-color
  180.         '#f8e3c5': 'wl-7', // 没有
  181.         '#faecd8': 'wl-8', // light
  182.         '#fdf6ec': 'wl-9', // lighter
  183.  
  184.         '#dd6161': 'ds-1', // is-plain:active
  185.         '#F56C6C': 'danger', // success
  186.         '#f67b7b': 'dl-1', // 没有
  187.         '#f78989': 'dl-2', // hover color
  188.         '#f89898': 'dl-3', // 没有
  189.         '#f9a7a7': 'dl-4', // is-disabled hover color
  190.         '#fab6b6': 'dl-5', // is-disabled color
  191.         '#fbc4c4': 'dl-6', // border-color
  192.         '#fcd3d3': 'dl-7', // 没有
  193.         '#fde2e2': 'dl-8', // light
  194.         '#fef0f0': 'dl-9', // lighter
  195.  
  196.         '#82848a': 'is-1', // is-plain:active
  197.         '#909399': 'info', // success
  198.         '#9b9ea3': 'il-1', // 没有
  199.         '#a6a9ad': 'il-2', // hover color
  200.         '#b1b3b8': 'il-3', // 没有
  201.         '#bcbec2': 'il-4', // is-disabled hover color
  202.         '#c8c9cc': 'il-5', // is-disabled color
  203.         '#d3d4d6': 'il-6', // border-color
  204.         '#dedfe0': 'il-7', // 没有
  205.         '#e9e9eb': 'il-8', // light
  206.         '#f4f4f5': 'il-9'// lighter
  207.       };
  208.       Object.keys(colorMap).forEach((key) => {
  209.         const value = colorMap[key];
  210.         data = data.replace(new RegExp(key, 'ig'), value);
  211.       });
  212.       return data;
  213.     }
  214.   },
  215.   mounted() {
  216.     this.initTheme();
  217.     // 默认从线上官方拉取最新css,2秒钟后做一个检查没有拉到就从本地在拉下
  218.     // let that = this;
  219.     // 如果是记住用户的状态就需要，在主题切换的时候记录颜色值，在下次打开的时候从新赋值
  220.     // this.colors.primary = localStorage.getItem('color')||this.colors.primary//例如
  221.  
  222.     // setTimeout(function() {
  223.     //     if (that.originalStyle) {
  224.     //         return;
  225.     //     } else {
  226.     //         that.getIndexStyle(that.cssUrl[1]);
  227.     //     }
  228.     // }, 2000);
  229.     // this.$nextTick(() => {
  230.     //     // 获取页面一共引入了多少个style 文件
  231.     //     this.originalStylesheetCount = document.styleSheets.length;
  232.     // });
  233.   }
  234. };
  235. </script>
  236. <style lang="scss">
  237.  
  238. </style>

使用

  1. .boxDiv{
  2.   padding:40px;
  3.   background: var(--primary-color);
  4.   box-shadow:  0 0 10px 8px var(--primary-color-light-8);
  5. }

　

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/267811
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号