在线动态换肤思路

很早之前就在想在线换肤的实现思路，主要是之前有个项目有换肤，连布局图片都不一样，无能为力，只好写不同页面，然后通过打包的时候配置删除和替代文件实现，但是在线换肤还是没去做。今天分享一下换肤的思路，只是单纯的颜色替换，没有包括连布局图片都不一样的换肤。

跟国际化一样，方案可能不难，难的是开发业务的时候很繁琐，写的不好就很难维护。最简单的一个方式，通过不同的css实现换肤，前提是确定好几个可供切换的css，效果：

代码很简单主要就是动态切换link引入的地址：

let link = document.getElementById('color');

link.setAttribute('href', type + '.css');

这种方法其实并不是很建议，一个是你必须提供很多css文件，另外一个就是你很难直接通过设置css的十六进制去换肤，方法也有，比如把十六进制传递给后台让后台生成一份文件之类的，总的来说比较low一点，如果只是固定几个皮肤这样的反而更简单。

另外一种是类似element-ui做的换肤，把颜色的样式都写在head头部的style标签里面，可以去看一下，当你换颜色的时候，style标签id为docs-style和chalk-style里面的颜色就会被替换。可以去看看：

https://element.eleme.cn/#/zh-CN/theme/preview

自己简单做了个效果，效果跟上面是一样的，代码：

<style id="colorId">

.bg{

background: #00aaee;

}

.text{

color: #00aaee;

}

</style>

<li><button class="bg" onclick="changeColor('00aaee')">a皮肤</button></li>

<li><button class="bg" onclick="changeColor('00ee57')">b皮肤</button></li>

<li><button class="bg" onclick="changeColor('ee0043')">c皮肤</button></li>

let currentColor = '00aaee';

function changeColor(color) {

let reg = new RegExp(currentColor,'g');

let sty = document.getElementById('colorId');

let str = sty.innerHTML;

str = str.replace(reg, color);

sty.innerHTML = str;

currentColor = color;

}

我这边只是提供个思路，真正要实现起来当然要复杂一些，颜色肯定不止一个，element是颜色对应一个关键字的数组，然后把style里面的颜色都先替换成关键字，然后再根据颜色生成对应的数组，接着把关键字替换回颜色，最后写入style标签。

还有一种css自定义变量的方式，这我还真是前几天才知道的，是一个大佬告知的，这个css很早就出现了，只是一直不知道：

:root {

--bg: #00aaee;

--color: #00aaee;

}

.bg{

background: var(--bg);

}

.text{

color: var(--color);

}

function changeColor(color) {

document.body.style.setProperty('--bg', '#' + color);

document.body.style.setProperty('--color', '#' + color);

}

很简单，查一下css自定义变量就知道怎么使用了。本来觉得这个自定义变量是真没什么意义，发现 这样一用，反而觉得换肤功能会简单很多。

另外一种antd利用 Less 的变量以及在浏览器编译没有去实验一下，本地连antd的官网都打不开。还有之前有提到过的css in js在这种换肤场景下好像也非常的合适。

自己知道的在线换肤的思路只有这三种了，如果真的有需求要做在线换肤功能，还真不知道哪种会比较好，只能是自己选型了，真正涉及项目的时候，可不只是这样说说而已，会碰见什么坑就不好说了。讲道理，现在应该没多少在线换肤的功能网站了吧。

自己感觉还是有点不对劲，希望有做过换肤项目的（不只是demo）可以指点一波。

（完）

Coding 个人笔记