前端实现换肤功能

项目背景: 由于项目要求,需要前端对不同的企业用户展示不一样的颜色,也就是简单的更改肤色.本来使用前端框架会很容易解决,但是公司目前的架构不是很好,前后端分离也没有那么彻底,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文件就可以实现换肤的功能.

:root这个时css3中的特性,用的其实比较少,也比较陌生,但只要用过一次,以后就都记住啦!