在vue3页面自定义主题,element-puls的scss的底层css代码逻辑

 element-puls的颜色的原理,由于要给我们先定义好不同的主题色,所以肯定不可能一模一样,不过大体的流程是这样子,

不过先说明一下,修改主题色并没有太好的方法,最终的方法都是用 js 覆盖ui组件库的 最重要的主题色 ( primart系列 ) 从而达到动态主题色的效果

我也想过用 js 修改scss的变量,但是这样根本行不通,因为scss的函数和方法只能用scss的变量,而想修改scss变量需要套一层css的变量,如:

1.  
   $aaa:var(--my-color,red)
2.  
   //然后
3.  
   document.documentElement.style.setProperty("--my-color", '#626aef');

但是这样scss就函数和方法识别不了,

因为var()是css的,scss根本不会编译,会把 var(--my-color,red) 当成一个值

所以只能用js把新的变量覆盖旧的变量.

当然如果你有更好的方法(用最少的js代码)实现动态主题色变化可以留言

 如果你想用来做自己的自定义主题,前面的几个带有 !default 参数都可以修改,其中最重要的就是 $default-theme-arr 变量,

如果你深入了解,还可以修改里面的参数,达到更多的颜色

 把下面的写入scss文件再引入到main.ts

1.  
   @use "sass:math";
2.  
   @use "sass:map";
3.  
   // 你要的颜色(key值不能为颜色,英文表示的颜色也不行,但是可以isviolet)
4.  
   $default-theme-arr: (
5.  
   isviolet: #626aef,
6.  
   iscolour: #41b584,
7.  
   isblue:#409eff,
8.  
   isred:#f34d37,
9.  
   ) !default;
10.  
    // 你的空间命名(前缀)
11.  
    $namespace: "my" !default;
12.  
    // 你的混入白 (会影响到light系列相关的颜色)
13.  
    $mix-white-color: #ffffff !default;
14.  
    // 你的混入黑 (会影响到dark系列相关的颜色)
15.  
    $mix-black-color: #141414 !default;
16.  
    //最终的light层级,element默认为 3, 5, 7, 8, 9(需要整数)
17.  
    $light-tier: (3, 5, 7, 8, 9) !default;
18.  
     
19.  
     
20.  
    // keys和values
21.  
    $default-theme-keys: map.keys($default-theme-arr);
22.  
    $default-theme-values: map.values($default-theme-arr);
23.  
     
24.  
    // 自定义scss变量
25.  
    $default-theme: () !default;
26.  
    @each $type in $default-theme-keys {
27.  
    $default-theme: map.deep-merge(
28.  
    (
29.  
    $type: (
30.  
    "base": map.get($default-theme-arr, $type),
31.  
    ),
32.  
    ),
33.  
    $default-theme
34.  
    ) !global;
35.  
    }
36.  
    // https://sass-lang.com/documentation/values/maps#immutability
37.  
    //用白/黑混合颜色来产生亮/暗的层次
38.  
    @mixin set-color-mix-level($type, $mode, $number, $mix-color) {
39.  
    $default-theme: map.deep-merge(
40.  
    (
41.  
    $type: (
42.  
    // light-$i:混合(混合的颜色,被混合的颜色,混合多少)
43.  
    // mix($color1, $color2, $weight) 表示$color1的比例为$weight，$color2的比例为1-$weight
44.  
    // math.转百分比(math.转分数(分子,分母))
45.  
    // 如 math.percentage(math.div(2, 10)) => math.percentage(0.2) => 20%
46.  
    // 最终混合出的颜色为:白或黑为20%,传进来的颜色为剩余的80%
47.  
    "#{$mode}-#{$number}":
48.  
    mix(
49.  
    $mix-color,
50.  
    map.get($default-theme, $type, "base"),
51.  
    math.percentage(math.div($number, 10))
52.  
    ),
53.  
    ),
54.  
    ),
55.  
    $default-theme
56.  
    ) !global;
57.  
    }
58.  
     
59.  
    // css变量名
60.  
    @function joinVarName($list) {
61.  
    $name: "--" $namespace; //前缀
62.  
    // 遍历变量名 并返回
63.  
    @each $item in $list {
64.  
    @if $item != "" {
65.  
    $name: $name "-" $item;
66.  
    }
67.  
    }
68.  
    @return $name;
69.  
    }
70.  
    //设置CSS var值，因为我们需要将value转换为字符串
71.  
    //例如:@include set-css-var-value(('color'， 'primary')， red);
72.  
    // --el-color-primary:红色;
73.  
    @mixin set-css-var-value($name, $value) {
74.  
    #{joinVarName($name)}: #{$value};
75.  
    }
76.  
     
77.  
    // 添加不同的变量颜色
78.  
    // light 系列 $colors.primary.light-i
79.  
    @each $type in $default-theme-keys {
80.  
    @for $i from 1 through 9 {
81.  
    @include set-color-mix-level($type, "light", $i, $mix-white-color);
82.  
    }
83.  
    }
84.  
    // dark 系列 $colors.primary.light-i
85.  
    @each $type in $default-theme-keys {
86.  
    @for $i from 1 through 9 {
87.  
    @include set-color-mix-level($type, "dark", $i, $mix-black-color);
88.  
    }
89.  
    }
90.  
    // 自定义颜色
91.  
    :root {
92.  
    @for $ii from 1 through length($default-theme-arr) {
93.  
    $this-key: nth($default-theme-keys, $ii);
94.  
    $this-value: nth($default-theme-values, $ii);
95.  
     
96.  
    @include set-css-var-value(
97.  
    ($this-key, "rgb"),
98.  
    (red($this-value), green($this-value), blue($this-value))
99.  
    );
100.  
     @include set-css-var-value($this-key, $this-value);
101.  
     @each $i in $light-tier {
102.  
     @include set-css-var-value(
103.  
     ($this-key, "light", $i),
104.  
     map.get($default-theme, $this-key, "light-#{$i}")
105.  
     );
106.  
     }
107.  
     @include set-css-var-value(
108.  
     ($this-key, "dark-2"),
109.  
     map.get($default-theme, $this-key, "dark-2")
110.  
     );
111.  
     }
112.  
     }
113.  
     // 黑暗模式
114.  
     html.dark {
115.  
     @for $ii from 1 through length($default-theme-arr) {
116.  
     $this-key: nth($default-theme-keys, $ii);
117.  
     $this-value: nth($default-theme-values, $ii);
118.  
      
119.  
     @include set-css-var-value(
120.  
     ($this-key, "rgb"),
121.  
     (red($this-value), green($this-value), blue($this-value))
122.  
     );
123.  
     @include set-css-var-value($this-key, $this-value);
124.  
     @each $i in $light-tier {
125.  
     @include set-css-var-value(
126.  
     ($this-key, "light", $i),
127.  
     map.get($default-theme, $this-key, "dark-#{$i}")
128.  
     );
129.  
     }
130.  
     @include set-css-var-value(
131.  
     ($this-key, "dark-2"),
132.  
     map.get($default-theme, $this-key, "dark-2")
133.  
     );
134.  
     }
135.  
     }

变量颜色效果:

 修改主题颜色

1.  
   <template>
2.  
   <el-select v-model="TopicAcitve">
3.  
   <el-option
4.  
   class="option"
5.  
   v-for="item in Topic"
6.  
   :key="item.value"
7.  
   :label="item.label"
8.  
   :value="item.value" />
9.  
   </el-select>
10.  
    </template>
11.  
    <script setup lang="ts">
12.  
    // 主题色(参数只能是 scss文件你写的 $default-theme-arr里面的key值)
13.  
    let Topic: ref([
14.  
    { label: '主题蓝', value: 'isblue' },
15.  
    { label: '主题绿', value: 'iscolour' },
16.  
    { label: '主题红', value: 'isred' },
17.  
    { label: '主题紫', value: 'isviolet' }
18.  
    ]),
19.  
    let TopicAcitve = ref('isblue')
20.  
     
21.  
     
22.  
    const style = document.documentElement.style;
23.  
    //监听用户有没有修改主题色
24.  
    watch(() => TopicAcitve.value,(newVal) => {
25.  
    style.setProperty("--el-color-primary-rgb", `var(--my-${themeColor}-rgb)`);
26.  
    style.setProperty("--el-color-primary", `var(--my-${themeColor})`);
27.  
    style.setProperty("--el-color-primary-light-3", `var(--my-${themeColor}-light-3)`);
28.  
    style.setProperty("--el-color-primary-light-5", `var(--my-${themeColor}-light-5)`);
29.  
    style.setProperty("--el-color-primary-light-7", `var(--my-${themeColor}-light-7)`);
30.  
    style.setProperty("--el-color-primary-light-8", `var(--my-${themeColor}-light-8)`);
31.  
    style.setProperty("--el-color-primary-light-9", `var(--my-${themeColor}-light-9)`);
32.  
    style.setProperty("--el-color-primary-dark-2", `var(--my-${themeColor}-dark-2)`);
33.  
    });
34.  
    </script>

效果图

内容不一样,用的代码是一样的

这篇好文章是转载于：学新通技术网