【背景需求】项目需支持用户自定义主题颜色并缓存颜色

【技术实现】（插件） vue@2.x、element-ui@2.x.x、css-color-function@1.3.3、object-assign@4.1.1

-------------- Test.vue ---------------

<template>
  <div class="navbar">
    <div class="right-menu">
      <span class="logout-span" @click="showThemeDialog">{{ $t('navbar.theme') }}</span>
    </div>
    <el-dialog :visible.sync="themeDialogVisible" :title="$t('navbar.theme')" width="400px">
      <el-form
        :model="colors"
        :rules="rules"
        ref="form"
        class="theme-form"
        label-position="top"
        label-width="70px"
      >
        <el-form-item label="主题色" prop="primary">
          <el-color-picker v-model="colors.primary"></el-color-picker>
        </el-form-item>
        <el-form-item class="color-buttons">
          <el-button type="primary" @click="submitForm">切换</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>

import generateColors from "@/utils/color";
import objectAssign from "object-assign";

const defaultColor = '#409eff'
export default {
  components: {
    Breadcrumb,
    Hamburger,
    ErrorLog,
    SizeSelect
  },
  data() {
    const colorValidator = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("主题色不能为空"));
      } else if (!/^#[\dabcdef]{6}$/i.test(value)) {
        return callback(new Error("请输入 hex 格式的主题色"));
      } else {
        callback();
      }
    };
    return {
      colors: {
        primary: defaultColor
      },
      rules: {
        primary: [{ validator: colorValidator, trigger: "blur" }]
      },
      localColor:'',
      originalStylesheetCount: -1,
      originalStyle: "",
      themeDialogVisible: false
    };
  },
  created() {
    this.getIndexStyle();
    this.localColor = localStorage.getItem('color')
  },
  mounted() {
    this.$nextTick(() => {
      this.originalStylesheetCount = document.styleSheets.length
      this.colors.primary = this.localColor ? this.localColor : defaultColor
      this.initColor()
    });
  },
  computed: {
    ...mapGetters(["sidebar", "name", "avatar", "device"])
  },
  methods: {
    toggleSideBar() {
      this.$store.dispatch("toggleSideBar");
    },
    logout() {
      this.$store.dispatch("LogOut").then(() => {
        location.reload(); // In order to re-instantiate the vue-router object to avoid bugs
      });
    },
    showThemeDialog() {
      this.themeDialogVisible = true;
    },
    writeNewStyle() {
      document.getElementsByTagName('body')[0].style.setProperty('--color-primary', this.colors.primary);
      let cssText = this.originalStyle;
      Object.keys(this.colors).forEach(key => {
        cssText = cssText.replace(
          new RegExp("(:|\\s+)" + key, "g"),
          "$1" + this.colors[key]
        );
      });

      if (this.originalStylesheetCount === document.styleSheets.length) {
        const style = document.createElement("style");
        style.innerText = cssText;
        document.head.appendChild(style);
      } else {
        document.head.lastChild.innerText = cssText;
      }
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.themeDialogVisible = false;
          this.colors = objectAssign(
            {},
            this.colors,
            generateColors(this.colors.primary)
          );

          this.writeNewStyle();
          localStorage.setItem('color', this.colors.primary)
        } else {
          return false;
        }
      });
    },
    getIndexStyle() {
      this.getFile("//unpkg.com/element-ui/lib/theme-chalk/index.css").then(
        ({ data }) => {
          this.originalStyle = this.getStyleTemplate(data);
        }
      );
    },
    getStyleTemplate(data) {
      const colorMap = {
        "#3a8ee6": "shade-1",
        "#409eff": "primary",
        "#53a8ff": "light-1",
        "#66b1ff": "light-2",
        "#79bbff": "light-3",
        "#8cc5ff": "light-4",
        "#a0cfff": "light-5",
        "#b3d8ff": "light-6",
        "#c6e2ff": "light-7",
        "#d9ecff": "light-8",
        "#ecf5ff": "light-9"
      };
      Object.keys(colorMap).forEach(key => {
        const value = colorMap[key];
        data = data.replace(new RegExp(key, "ig"), value);
      });
      return data;
    },
    getFile (url, isBlob = false) {
        return new Promise((resolve, reject) => {
          const client = new XMLHttpRequest()
          client.responseType = isBlob ? 'blob' : ''
          client.onreadystatechange = () => {
            if (client.readyState !== 4) {
              return
            }
            if (client.status === 200) {
              const urlArr = client.responseURL.split('/')
              resolve({
                data: client.response,
                url: urlArr[urlArr.length - 1]
              })
            } else {
              reject(new Error(client.statusText))
            }
          }
          client.open('GET', url)
          client.send()
        })
      },
    resetForm() {
    //   this.$refs.form.resetFields();
        this.colors.primary = defaultColor
    },
    initColor(){
        this.colors = objectAssign(
            {},
            this.colors,
            generateColors(this.colors.primary)
          );
          this.writeNewStyle();
    }
  }
};
</script>

-------------- @/utils/color.js ---------------

import color from 'css-color-function'
import formula from './formula.json'

const generateColors = primary => {
  let colors = {}

  Object.keys(formula).forEach(key => {
    const value = formula[key].replace(/primary/g, primary)
    colors[key] = color.convert(value)
  })
  return colors
}

export default generateColors

-------------- ./formula.json -----------

{
  "shade-1": "color(primary shade(10%))",
  "light-1": "color(primary tint(10%))",
  "light-2": "color(primary tint(20%))",
  "light-3": "color(primary tint(30%))",
  "light-4": "color(primary tint(40%))",
  "light-5": "color(primary tint(50%))",
  "light-6": "color(primary tint(60%))",
  "light-7": "color(primary tint(70%))",
  "light-8": "color(primary tint(80%))",
  "light-9": "color(primary tint(90%))"
}

--------------- 换主题色代码结束线 --------------

【备注】 以上会改变element-ui涉及到的元素的主题颜色，如果有一些元素是个人在页面新建的，比如某些文字、自定义按钮需要动态变色的话，需要以下技术实现：

在index.scss里 写入以下代码 ：
 :root {
    --color-primary: #409eff;  //--color-primary  ：全局主题色变量
}
$varColor: var(--color-primary);  //用var盛放颜色变量，供于js里改变此变量使用

在改变颜色的function里改变颜色变量值：
document.getElementsByTagName('body')[0].style.setProperty('--color-primary', this.colors.primary); //(上面的Test.vue已包含此句)

【over】帮助到的点个赞呗