• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

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

武飞扬头像
相见一月
帮助1

 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>
学新通

效果图

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

20230222_112753

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

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanhhfgakh
系列文章
更多 icon
同类精品
更多 icon
继续加载