基于Vue、Element的换肤，原生前端开发的路该怎么走

var path = require(‘path’)

var gulp = require(‘gulp’)

var cleanCSS = require(‘gulp-clean-css’)

var cssWrap = require(‘gulp-css-wrap’)

var customThemeName = ‘.theme-summer’

gulp.task(‘default’, function() {

return gulp.src( path.resolve(‘./index.css’))

.pipe(cssWrap({selector: customThemeName}))

.pipe(cleanCSS())

.pipe(gulp.dest(‘dist’))

})

然后运行 gulp

这样就得到了一个以 .theme-summer 为命名空间的自定义主题了。

加完以后，我们按照前面介绍的切换 body 元素的 class 的方法，就可以实现皮肤切换的功能了。

方案三

=================================================================

快速改变网站颜色

---

依据 Element 官网所介绍，Element 使用 SCSS 编写，如果你的项目也使用了 SCSS，那么可以直接在项目中改变 Element 的样式变量。新建一个 element-variables.scss 样式文件。（温馨提示：请确保你安装了 node-sass 与 sass-loader）

element-variables.scss 文件，这里就不贴出来了，具体可以看这里：element-variables.scss，这个文件里面定义了很多颜色变量

这种方法使用起来是简单的，你只需将其引入

修改里面的颜色变量即可生效。

这种方法是快捷的，修改几个颜色变量即可生效。（然后就可以部署啦~）

这里有一个问题，如何在 js 中修改这个 element-variables.scss 文件里面的变量？如果可以实现，那么就可以实现实时动态换色了。

补充说明： js 修改 scss 变量是有方案的，但是在我们项目中无法做到动态换颜色，为什么呢？因为我们项目中所有的 css 预编译语言（sass,less,stylus）最终都会编译成 css；也就是说，打包后的项目中只有编译后的 css 文件。那么你 js 改 scss 变量的方法在打包后的项目中是不起作用的。

方案四

=================================================================

实时更换主色调

---

前面已经介绍了几种方法可以做到换肤，但都是在我们的限定提供的几个皮肤范围内换肤；但我们有一个需求是，弹出一个颜色选择器，然后我们选了什么颜色，页面的主色调就立马改成什么颜色。

ElementUI 官网中有实现动态换肤，它能让用户自定义颜色值，而且展示效果也更加优雅。 我们来看看他是怎么实现的(这里引用的是官方的 实现解释)

• 获取当前版本的 Element-UI 的样式文件（在线 XHR 获取）

• 根据用户选择的主题色，生成一系列对应的颜色（比如，选择绿色，生成不同程度的浅绿，深绿…）

• 颜色替换（用刚刚生成的颜色来替换样式文件中的颜色）

• 直接在页面上加 style 标签，把生成的样式填进去

我们一起来看一下技术实现细节吧，强烈建议你打开代码一起来看： https://github.com/Neveryu/vue-cms/blob/master/src/views/theme/index.vue#L167-L297）

1、首先我们需要拿到通过 package.json 拿到 element-ui 的版本号，根据该版本号去请求相应的样式。

// 如果没有chalk就是第一次换颜色，需要远程获取css文件，赋值给chalk

// 后续的换颜色操作，就不用远程获取了

if (!this.chalk) {

const url = https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css

await this.getCSSString(url, ‘chalk’)

}

getCSSString 方法是一个常用 XHR，用来获取远程 css 资源文件。

2、根据用户选择的颜色，生成相应的颜色

/**

• 传入一个颜色的HEX，得到这个颜色的深浅颜色数组

• 我们知道，我们默认的主色调蓝色，在实际使用中，还需要对应的浅蓝和深蓝

• @param {[string]]} theme [color]

• @return {[array]} [对应的深浅颜色数组]

*/

getThemeCluster(theme) {

// 具体看代码，这里就不写了

// …

}

3、颜色替换

/* 更新样式 - 使用新的颜色变量替换之前的 */

updateStyle(style, oldCluster, newCluster) {

let newStyle = style

oldCluster.forEach((color, index) => {

newStyle = newStyle.replace(new RegExp(color, ‘ig’), newCluster[index])

})

return newStyle

}

4、在页面上加 style 标签，把生成的样式填进去

let styleTag = document.getElementById(id)

if (!styleTag) {

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

)]
[外链图片转存中…(img-tR2yXLD8-1710923223058)]
[外链图片转存中…(img-eG7e30YU-1710923223058)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
[外链图片转存中…(img-WezqOlrE-1710923223059)]