• 👨🏻‍🎓博主介绍：大家好，我是尼克.张，热爱分享知识，很高兴在这里认识大家🌟
• 🌈擅长领域：前端开发
• 🙏🏻如果本文章各位小伙伴们有帮助的话，🍭关注+👍🏻点赞+🗣评论+📦收藏，相应的有空了我也会回访，互助！！！
• 🤝另本人水平有限，旨在创作简单易懂的文章，在文章描述时如有错，恳请各位大佬指正，在此感谢！！！

换肤是一个常见的需求，换肤涉及的面很多，总的涉及到的有页面整体的样式，自定义的组件样式，外部引入的组件(element，百度地图，echarts等等)，但其实只需要我们分模块去解决，就能迎刃而解。

1.修改element相关的样式

方法1.去官网案例下载

如果仅希望更换 Element 的主题色，推荐使用在线主题生成工具
或者在线主题编辑器，这个需要自己配置

方法2.用命令生成

1.npm i element-theme -g
用这种方式的时候执行et报错primordials is not defined，百度了一下大部分方法是回退node版本，当时我不想回退，后来发现了另一个解决办法：npm i element-themex -g 解决element ui 自定义主题失败问题

2.通过et命令
et -i [可以自定义变量文件] 生成element-variables.scss
et 生成theme文件夹

3.安装依赖
npm install gulp -g
npm install gulp-clean-css -S
npm install gulp-css-wrap -S

4.根目录下新建gulpfile.js

var path = require('path')
var gulp = require('gulp')
var cleanCSS = require('gulp-clean-css')
var cssWrap = require('gulp-css-wrap')
gulp.task('css-wrap', function () {
    return gulp.src(path.resolve('./theme/index.css'))
        //找需要添加命名空间的css文件，支持正则表达式 
        .pipe(cssWrap({
            selector: '.light' // 添加的命名空间 
        }))
        .pipe(cleanCSS())
        .pipe(gulp.dest('src/assets/theme')) // 存放的目录 
})

5.执行gulp css-wrap
默认生成的都是浅色系，所以还要再去自己配一个深色系，方法同上
然后动态修改document.documentElement.className=“xx”

2.修改页面整体及自定义的样式

方法1.判断html中theme的值

/*创建一个theme.scss*/
:root[theme="dark"] {
  --bgc: #132c50;
  --head-bgc: #132c50;
}
:root[theme="light"] {
  --bgc: #fff;
  --head-bgc: #2b4695;
}

//判断是深色还是浅色系
document.documentElement.setAttribute("theme", "xx");

方法2.使用link标签放入head中

在public下新建theme文件夹，放入dark.css和light.css

const createLink = () => {
  const link = document.createElement("link")
  link.rel = 'stylesheet' //(重要)
  link.type = 'text/css'
  document.querySelector('head').appendChild(link)
  return link
}
const toggleTheme = (theme = 'light') => {
  const $link = createLink()
  $link.href = `./themes/${theme}.css`
  return theme
}
//判断是深色还是浅色系,调用
toggleTheme('xx')

3.修改echarts的样式

echarts主题编辑器
根据自身页面的样式配置，配置完之后下载js版本，并全局注入自己的项目中

echarts.init(chartDom, this.isDark ? "darkGray" : "");

4.与颜色相关的方法

1.定义scss中某个变量的值

document.body.style.setProperty("--text-color", this.strokeColor);

2.设置html下的类名

document.documentElement.setAttribute("theme", "dark");

3.获取root下某个属性的值

const root = document.querySelector(":root");
const color = getComputedStyle(root).getPropertyValue("--bgc").trim()