vue elementui scss切换 主题，用户自定义颜色切换功能开发

改变主题颜色

这里理论上 应该分为 2 个模块。 如下图所示：

1. elementui btn 等 主色调颜色
2. 用户自定义 字体/背景色。
   这里 可以 明显的 看到，当 light 主题的时候， 主色调 是 咖啡色。
   而 当 暗色 主题的时候 则为 蓝色 /绿色。 这里是为了方便理解 上述 所说的 1,2 区别。
   1-蓝色，2-绿色。
   
   

1.elementui btn 等 主色调颜色，去 https://element.eleme.cn/#/zh-CN/theme 官网自行操作。
正常 目录结构可以如下

2.用户自定义颜色/背景色替换。如果是 vue-cli2 则需要 在vue.config.js 配置

  css: {
    loaderOptions: {
      sass: {
        // 旧版的 scss-loader 是 data 新版的是 prependData
        prependData: `@import "@/styles/setting/var.scss";`,
      },
    },
  },
1
2
3
4
5
6
7
8

这是 需要区分主题的 颜色 scss文件 var.scss。

$primary: #B78349;
$primaryDark: green;
/* ******************************************************************************************************* */

@mixin primaryTxtColor() {
  [data-theme="light"] & {
    color: $primary;
  }

  [data-theme="dark"] & {
    color: $primaryDark;
  }
}

@mixin primaryBgColor() {
  [data-theme="light"] & {
    background-color: $primary;
  }

  [data-theme="dark"] & {
    background-color: $primaryDark;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

使用通过scss的 @include 写法 替换 之前写法：

     .org-item {
        height: 25px;
        @include primaryBgColor();
        // background-color: $primary;
      }
1
2
3
4
5

vue 组件

<template>
  <el-dropdown @command="changeTheme">
    <span class="el-dropdown-link">
      切换主题<i class="el-icon-arrow-down el-icon--right"></i>
    </span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item class="clearfix" command="default"
        >light</el-dropdown-item
      >
      <el-dropdown-item class="clearfix" command="science-blue"
        >dark</el-dropdown-item
      >
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
import { toggleClass } from "@/utils";
import "@/assets/custom-theme/index.scss";
export default {
  data() {
    return {
      theme: "light"
    };
  },
  mounted() {
    this.theme = localStorage.getItem("lsj-theme")
      ? JSON.parse(localStorage.getItem("lsj-theme"))
      : "light";
    if (this.theme === "light") {
      this.changeLight();
    } else {
      this.changeDark();
    }
    this.setAttribute(this.theme);
  },
  methods: {
    setAttribute(theme) {
      window.document.documentElement.setAttribute("data-theme", theme);
    },
    changeLight() {
      localStorage.setItem("lsj-theme", JSON.stringify("light"));
      this.setAttribute("light");
      toggleClass(document.body, " ");
    },
    changeDark() {
      localStorage.setItem("lsj-theme", JSON.stringify("dark"));
      this.setAttribute("dark");
      toggleClass(document.body, "custom-theme");
    },
    // change theme - 换肤
    changeTheme(command) {
      console.log(command, "command");
      if (command === "default") {
        this.changeLight();
        return;
      }
      if (command === "science-blue") {
        this.changeDark();
        return;
      }
    }
  }
};
</script>


/**
 * @param {HTMLElement} element
 * @param {string} className
 */
 export function toggleClass(element, className) {
  if (!element || !className) {
    return;
  }
  element.className = className;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77