学习笔记02-前端换肤

最开始我使用 elementPlus 官方文档的SCSS方法来完成前端更换主题，但是这个方法写出来只有暗黑主题和明亮主题，我想要的是多种主题切换。所以我改为使用css变量来完成这个想法。加上 vueUse 的 useColorMode 来实现主题切换。

useColorMode 切换主题的原理是修改html的class来完成，所以只需要根据class选择器来定义css变量。

:root.mode_1 {
  --el-bg-color-page: #3b3b3b;
  --el-bg-color: #2c2c2c;
  --el-bg-color-overlay: #303030;
  --el-fill-color-blank: var(--el-bg-color);
  --el-color-white: #ffffff;
  --el-color-black: #0f0f28;
  --el-text-color-secondary: #ffcc99b3;
  --el-text-color-primary: #e5eaf3;
  --el-text-color-regular:#e5eaf3;
}

但是 elementPlus 中的变量是很多的，还有一些是根据主题色来融合出来的

通过阅读这部分代码知道了，这里使用了scss的 @mixin 函数来写入通过mix融合后的颜色变量。这里我学着 elementPlus 方法的写

// 定义颜色值
$colors: (
  "mode_1": (
    "primary": #ffcc66,
    "success": #00dc82,
    "warning": #5566aa,
    "danger": #ffaaaa,
    "error": #ffaaaa,
    "info": #f5f5f5,
  ),
  "dark": (
    "primary": #11dd99,
    "success": #00dcdd,
    "warning": #0047e1,
    "danger": #f56c6c,
    "error": #f56c6c,
    "info": #f5f5f5,
  ),
);
// 混入函数定义
@mixin set-color-mix-level($type, $number, $mode: "light", $mix-color: #fff) {
  //这个为了和 element-plus 的定义名称一致，使用if判断一下
  #{if($number == 0, "--el-color-#{$type}", "--el-color-#{$type}-light-#{$number}")}: mix(
    $mix-color,
    map.get($colors, $mode, $type),
    math.percentage(math.div($number, 10))
  );
}
:root.mode_1 {
  --el-bg-color-page: #3b3b3b;
  --el-bg-color: #2c2c2c;
  --el-bg-color-overlay: #303030;
  --el-fill-color-blank: var(--el-bg-color);
  --el-color-white: #ffffff;
  --el-color-black: #0f0f28;
  // 遍历颜色值
  @each $type in "primary", "success", "warning", "danger", "error", "info" {
    // 从0%到90%混合出颜色
    @for $i from 0 through 9 {
      @include set-color-mix-level(
        $type,
        $i,
        "mode_1",
        #303030
      );
    }
  }
  // 修改hover颜色
  --el-fill-color-light: mix(var(--el-color-white), var(--el-bg-color-page), 50%);
  --el-text-color-secondary: #ffcc99b3;
  --el-text-color-primary: #e5eaf3;
  --el-text-color-regular:#e5eaf3;
}

好了，到这里就已经将 elementPlus 大部分的css变量替换掉了。

到此已经完成我的想法了。