前端实现换肤功能

项目背景: 由于项目要求,需要前端对不同的企业用户展示不一样的颜色,也就是简单的更改肤色.本来使用前端框架会很容易解决,但是公司目前的架构不是很好,前后端分离也没有那么彻底,web工程还是搭配jsp,没办法,只好用最纯粹的css来实现换肤要求了.

方案一

最开始没怎么想,决定使用最简单的方法,根据不同的颜色方案加载不同的css

    <link rel="stylesheet" href="" id="customerTheme">
    <script>
    //根据不同的企业用户加载不同的css
 	document.querySelector('#customerTheme').setAttribute('href','./theme1.css')
 	script>

这种方案比较简单,但相应的就需要写很多css,而且css除了颜色不一样,代码重复比较多,维护起来也不方便,虽然皮肤可能不会太多,但是作为一个有逼格的程序员,这种代码必须要优化.

方案二

第二种方法是和同事探讨的时候,同事说偶然看谷歌页面时发现的.

 <link rel="stylesheet" href="" id="customerTheme">
 <link rel="stylesheet" href="./theme.css">
       <script>
       //根据不同的企业用户加载不同的css
		document.querySelector('#customerTheme').setAttribute('href','./root_theme1.css')
		script>

  /* root_theme1.css */
:root{
--bgColor:#f00;
}

  /* theme.css */
.theme{
background:var(bgColor);
}

按照这种写法,我们只需要多写几个root_themeX.css的变量css,根据不同的企业用户加载不同的root_theme的css文件就可以实现换肤的功能.

方案三

其实就是方案二,我们在html head里面加上一个style

    <style id="theme">style>

然后我们进行动态设置就可以了

document.querySelect('#theme').innerHTML=`:root{--bgColor:${theme};}`

这样我们可以支持任意肤色了,只需要和后台约定theme的规则即可