业务背景

随着用户对网页的要求越来越高，换肤也成为了企业关注的内容，本文会提供一个解决方案，具体实现细节请参考本文推荐的文档和源码参考

什是换肤

一般可以认为有暗黑模式，更换主题色，更换布局三个方面的内容。

暗黑主题：切换屏幕背景为黑色，其它样式跟着适配。

主题色：用户可以自定背景和各种配色。

更换布局：用户根据自己的喜好配置。

方案选择

SCSS + CSS 变量

为什么选择这两个呢，首先Eelment+plus 内部的开发是基于scss进行开发的，scss 开发对Eelement-plus样式的修改让代码更加的清洁。其二scss可以很好的实现对代码的复用。

为什么不都用scss呢，因为我们不能通过js来操作scss的变量，而我们能通过js来操作css的变量，这样方便用户随意更改自定义的属性，比如背景色，字体色，字体大小 等。

方案落地

scss更换暗黑主题

我们可以通过给浏览器根目录添加一个属性（例如data-skin="dark"），scss通过获取data-skin的值来确定用哪个主题。具体代码

// 获取dom对象
 const body = document.documentElement as HTMLElement
 //设置属性值
 body.setAttribute('data-skin','skin1')

// 设置主题色
$themes: (
  default-theme: (
    theme-color: red,
    button-primary: blue
  ),
  skin1: (
    theme-color: #7bff00,
    button-primary: #bebe3c
  )
) !default;
// 定义一个scss方法，根据skin-data设置的值获取不同背景色
@mixin get-backcolor($color){
  @each $themename, $theme in $themes{
    [data-skin='#{$themename}'] &{
      background-color: map-get($theme,$color);
    }
  }
}
// 在scss中调用get-backcolor方法达到换肤目的
.background-theme{
  @include get-backcolor('theme-color')
}
.button-primary{
  @include get-backcolor('button-primary')
}

css变量的使用

我们把上面代码中的具体的变量的值用css变量代替

// 设置主题色
$themes: (
  default-theme: (
      // 第二个参数为默认值
    theme-color: var(--background-color-primary,red),
    button-primary: var(--background-color-primary,blue)
  )
) !default;

//通过js中的setProperty方法获取值并赋值。
 document.querySelect(":root").style.setProperty('--el-bg-color', customColor.value)

在element-plus中的使用

官方文档给出了自定义主题的方案，并且可以通过设置的方法进行背景的切换，这个方法的原理和上面提到的更换页面主题的原理一样，具体实现细节可以参考官方文档。开源项目参考这个比较好的开源项目代码 (/lyt-top/vue…)