需求：根據(jù)element的自定義主題色，之后改變element的全局所有顏色，解決頁面刷新后主題色失效問題，這個需要把顏色存入到瀏覽器的存儲中，如果換個瀏覽器就得重新選擇了哈，如果需要在不同的瀏覽器保持一致的主題，需要跟后端溝通

之前還寫過一個簡單的，有需要的可以去看：vue實現(xiàn)element-ui自定義主題色切換(簡單版)_element主題切換_請叫我歐皇i的博客-CSDN博客

效果如下：

1.下載顏色插件

我下的是1.4.6版本,最好下載的版本一致吧，不然報錯了我也沒辦法

npm install webpack-theme-color-replacer@1.4.6

2.建個js文件themeColorClient.js

直接復制粘貼以下代碼

import client from 'webpack-theme-color-replacer/client'
import forElementUI from 'webpack-theme-color-replacer/forElementUI'
// 注意自己項目里的引入路徑

export let curColor = '#409EFF'

// 動態(tài)切換主題色
export function changeThemeColor(newColor) {
  var options = {
    newColors: [...forElementUI.getElementUISeries(newColor), '#ff0000', '#ffff00']
  }
  return client.changer.changeColor(options, Promise)
    .then(() => {
      curColor = newColor
      localStorage.setItem('theme_color', curColor)
    })
}
// 頁面刷新的時候會觸發(fā)
export function initThemeColor() {
  const savedColor = localStorage.getItem('theme_color')
  if (savedColor) {
    curColor = savedColor
    changeThemeColor(savedColor)
  }
}

3.在main.js文件導入

保證每次刷新數(shù)據(jù)還在

import { initThemeColor } from './plugins/themeColorClient'
initThemeColor()

4.顏色選擇器

<template>
  <el-color-picker v-model="mainColor" size="small" @change="changeColor" />
</template>

<script>
import { changeThemeColor, curColor } from "@/plugins/themeColorClient";
export default {
  name: "d2-header-color",
  data() {
    return {
      mainColor: curColor,
      predefine: [
        "#ff4500",
        "#ff8c00",
        "#ffd700",
        "#90ee90",
        "#00ced1",
        "#1e90ff",
        "#c71585",
      ],
    };
  },
  methods: {
    changeColor(newColor) {
      console.log(newColor, "顏色");
      changeThemeColor(newColor)
        .then((t) => console.log("123465"))
        .catch((err) => console.log(err, "567"));
      //.then(t => this.$x.toast.success('主題色切換成功~'))
    },
  },
};
</script>

5.在vue.config.js中配置

const ThemeColorReplacer = require('webpack-theme-color-replacer')
const forElementUI = require('webpack-theme-color-replacer/forElementUI')
module.exports = {
  chainWebpack: config => {
       // 自定義主題色
    config
      .plugin('theme-color-replacer')
      .use(ThemeColorReplacer, [{
        fileName: 'style/theme-colors.[contenthash:8].css',
        matchColors: [
          ...forElementUI.getElementUISeries(process.env.VUE_APP_ELEMENT_COLOR), // Element-ui主色系列
          '#0cdd3a', // 自定義顏色
          '#c655dd'
        ],
        changeSelector: forElementUI.changeSelector,
        // 解決history模式下路由跳轉(zhuǎn)樣式不生效問題
        injectCss: true,
        isJsUgly: process.env.NODE_ENV === 'production' ? true : undefined
      }])
}
    
}

6.如果非element的組件需要使用全局自定義樣式可以如下設(shè)置

在公共的scss樣式文件下添加如下代碼

// 全局更改樣式,必須是--navWidth，可以看theme文件
//--navWidth為變量,必須以--開頭，否則其它頁面使用這個變量不會生效
$mainBgc: var(--navWidth, #409eff);

?之后在需要全局樣式下添加$mainBgc即可

.box{
color:$mainBgc;
}

這樣就可以實現(xiàn)了，文章到此結(jié)束，希望對你有所幫助~有不懂的可以在評論區(qū)聯(lián)系我文章來源地址http://www.zghlxwxcb.cn/news/detail-733199.html

到了這里，關(guān)于vue2實現(xiàn)自定義主題webpack-theme-color-replacer的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！