ElementPlus主题色修改

一般情况下我们使用elementplus的时候 肯定需要更改他的主题颜色，我们系统中的主题颜色大多数的时候适合他的主题颜色不一样的。
那么如何更改呢？
我是在assets/styles/element/index.scss下

@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': #427cff
    ),
    'success': (
      'base': #009817
    ),
    'warning': (
      'base': #e27d02
    ),
    'danger': (
      'base': #fb4a32
    ),
    'error': (
      'base': #ff5f5f
    ),
    'info': (
      'base': #65676f
    )
  ),
  $text-color: (
    'primary': #646a74,
    'regular': #edf3fc,
    'secondary': #333333,
    'placeholder': #9598a3,
    'disabled': #dcdee4
  ),
);

@use 'element-plus/theme-chalk/src/index.scss' as *;

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

想要全局使用的话，在vite.config.ts中

css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @use "@/assets/styles/element/index.scss" as *;
          `
      }
    }
}
1
2
3
4
5
6
7
8
9

解释：
@forward
  通过@forward加载一个模块的成员，并将这些成员当作自己的成员对外暴露出去，类似于类似于 es6 的 export …，通常用于跨多个文件组织 Sass 库
（相当于中转站，通过@forward引入scss文件并将引入scss文件中的变量、混合、函数等抛出，当其
他scss文件用@use引入此模块时可使用）

@use与@forward一起使用的情况
当一个模块里面须要同时使用@use与@forward时，先使用@forwar后再使用@use

@use
  注意：@use必须声明在其他代码之上
使用总结
@use引入同一个文件多次，不会重复引入，而@import会重复引入
@use引入的文件都是一个模块，默认以文件名作为模块名，可通过as alias取别名
@use引入多个文件时，每个文件都是单独的模块，相同变量名不会覆盖，通过模块名访问，而 @import变量会被覆盖
@use方式可通过 @use ‘xxx’ as *来取消命名空间，建议不要这么做
@use模块内可通过− 或 - 或−或来定义私有成员，也就是说或者-开头的Variables mixins functions 不会被引入
@use模块内变量可通过！default 定义默认值，引入时可通用with（…）的方式修改
可定义-index.scss或_index.scss来合并多个scss文件，它@use默认加载文件

参考链接

第二种方法
最后换了一种方式，写一个hooks

import { onMounted } from 'vue';

export const setElementTheme = () => {
  onMounted(() => {
    setStyle('--el-color-primary', '#14C2C2');
    setStyle('--el-text-color-regular', '#000000d9');
    setStyle('--el-text-color-placeholder', '#00000040');
  });

  const setStyle = (key: string, value: string) => {
    document.documentElement.style.setProperty(key, value);
  };
};
1
2
3
4
5
6
7
8
9
10
11
12
13

在app.vue中

import { setElementTheme } from '@/hooks/setElementTheme';

setElementTheme();
1
2
3

第三种
在styles下面写一个index.scss中直接覆盖变量，然后再main.ts中引入

import './assets/styles/index.scss';
1

index.scss

/* 修改主题色 */
:root {
  --el-color-primary: #05B7BFFF;
  --el-text-color-regular: #000000d9;
  --el-text-color-placeholder: #00000040;
}
1
2
3
4
5
6