最近一年很多需求要求更换主题色,而团队的项目基础框架不一,因此几乎使用了所有的更换主题的方案。以下总结了各方案的实现以及优缺点,希望能帮助有需要更换主题色的伙伴少踩坑。
方案一:硬编码
对一些老的前端基础库和业务库样式没有提取公共样式,当有更换主题的需求,实现的方法只能是全局样式替换,工作量比较大,需要更改form表单、按钮、表格、tab、容器等所有组件的各种状态,此外还需更换icon图标。
以下是我们的一个老项目实现主题色更换,全局样式替换接近500行,如下图所示:
![c55e7d01142f5d62c8364d8caacdd3b7.png](https://i-blog.csdnimg.cn/blog_migrate/fe5ce67ce49f74f82f666ff412e186c2.png)
![aa9a7eeca03538e27ec2ee7ab4b049a7.png](https://i-blog.csdnimg.cn/blog_migrate/bd28659149601e8f710fa7e6749e1ce6.png)
![0a80b4e4a166931a6bb40686014e969b.png](https://i-blog.csdnimg.cn/blog_migrate/1860983911980a69ca179e8a47ddea0f.png)
「总结:」 对于这种老项目只能通过硬编码的方式去更改,工作量较大,好在老项目依赖同一个基础库和业务库,所以在一个项目上实现了也可以快速推广到其它项目。
方案二:sass变量配置
团队的基础组件库Link-ui是基于Eelement-ui二次开发,因此可以采取类似于Element-ui的方式进行主题更改,只需要设计师提供6个主题色即可完成主题色的更改,如下所示。
![05598ec340e30b9090566dd4d76306ac.png](https://i-blog.csdnimg.cn/blog_migrate/d784616466907126aa2834b86191bec4.png)
配置基础色 基础色一般需要设计师提供,也可以通过配置化的方式实现,
$--color-primary-bold: #1846D1 !default;
$--color-primary: #2664FD !default;
$--color-primary-light: #4D85FD !default;
$--color-primary-light-1: #9AC0FE !default;
$--color-primary-light-2: #C1DBFF !default;
$--color-primary-lighter: #E8F2FF !default;
从基础库安装包引入基础色和库的样式源文件
@import "./common/base_var.scss";
/* 改变 icon 字体路径变量,必需 */
$--font-path: '~link-ui-web/lib/theme-chalk/fonts';
@import "~link-ui-web/packages/theme-chalk/src/index";
全局引入
import '@/styles/link-variables.scss';
更换主题色 只需要更改上面的6个变量即可实现主题色的更改,比如想改成红色,代码如下
$--color-primary-bold: #D11824 !default;
$--color-primary: #FD268E !default;
$--color-primary-light: #D44DFD !default;
// $--color-primary-light-1: #9AC0FE !default;
$--color-primary-light-2: #DCC1FF !default;
$--color-primary-lighter: #F1E8FF !default;
![83b7f4b968b0f89468221dd962e45912.png](https://i-blog.csdnimg.cn/blog_migrate/e2d074fa7a49d739758dd227dc3452d5.png)
「总结:」 对于基础库和样式架构设计合理的项目更改主题色非常的简单,只要在配置文件更换变量的值即可。它的缺点是sass变量的更改每次都需要编译,很难实现配置化。
方案三、css变量+sass变量+data-theme
代码结构如下:
![19102f21ae14dc4eac808e916d45e19c.png](https://i-blog.csdnimg.cn/blog_migrate/c6626832c52a79e19e102bf8df7b6d16.png)
设计三套主题分别定义不同的变量(包含颜色、图标和图片)
// theme-default.scss
/* 默认主题色-合作蓝色 */
[data-theme=default] {
--color-primary: #516BD9;
--color-primary-bold: #3347B6;
--color-primary-light: #6C85E1;
--color-primary-light-1: #C7D6F7;
--color-primary-light-2: #c2d6ff;
--color-primary-lighter: #EFF4FE;
--main-background: linear-gradient(90deg,#4e68d7, #768ff3);
--user-info-content-background-image: url('../../assets/main/top-user-info-bg.png');
--msg-tip-content-background-image: url('../../assets/main/top-user-info-bg.png');
...
}
// theme-orange.scss
// 阳光黄
[data-theme=orange] {
--color-primary: #FF7335;
--color-primary-bold: #fe9d2e;
--color-primary-light: #FECB5D;
--color-primary-light-1: #FFDE8B;
--color-primary-light-2: #fcdaba;
--color-primary-lighter: #FFF3E8;
--main-background: linear-gradient(90deg,#ff7335 2%, #ffa148 100%);
--user-info-content-background-image: url('../../assets/main/top-user-info-bg-1.png');
--msg-tip-content-background-image: url('../../assets/main/top-user-info-bg-1.png');
...
}
// theme-red.scss
/* 财富红 */
[data-theme=red] {
--color-primary: #DF291E;
--color-primary-bold: #F84323;
--color-primary-light: #FB8E71;
--color-primary-light-1: #FCB198;
--color-primary-light-2: #ffd1d1;
--color-primary-lighter: #FFEEEE;
--main-background: linear-gradient(90deg,#df291e 2%, #ff614c 100%);
--user-info-content-background-image: url('../../assets/main/top-user-info-bg-2.png');
--msg-tip-content-background-image: url('../../assets/main/top-user-info-bg-2.png');
...
}
把主题色的变量作为基础库的变量
$--color-primary-bold: var(--color-primary-bold) !default;
$--color-primary: var(--color-primary) !default;
$--color-primary-light: var(--color-primary-light) !default;
$--color-primary-light-1: var(--color-primary-light-1) !default;
$--color-primary-light-2: var(--color-primary-light-2) !default;
$--color-primary-lighter: var(--color-primary-lighter) !default;
App.vue指定默认主题色
window.document.documentElement.setAttribute('data-theme', 'default')
data-theme会注入到全局的变量上,所以我们可以在任何地方获取定义的css变量
![a29d1050c799402182cb469659ad346b.png](https://i-blog.csdnimg.cn/blog_migrate/19e3af2d98e439cc8cd8b1ff32e1fd24.png)
实现效果如下:
![b5f0ee089f59674aa51d75bf8704cf52.png](https://i-blog.csdnimg.cn/blog_migrate/ded8ad4140020e8995547c8582b2cbdf.png)
![10e024d7b4aa4a31ebb1135012e64eb8.png](https://i-blog.csdnimg.cn/blog_migrate/d2bfe6795adf22695c7648325b3c3634.png)
![98d264fbc6c85e7a8cd0a757a0b3e934.png](https://i-blog.csdnimg.cn/blog_migrate/65830c5675f95ae7285e8bf6dcfd78b7.png)
「总结:」 该方案是最完美的方案,但是需对颜色、背景图、icon等做配置,需设计师设计多套方案,工作量相对较大,适合要求较高的项目或者标准产品上面,目前我们的标准产品选择的是该方案。
方案四:滤镜filter
「filter
」 CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像,背景和边框的渲染。
它有个属性hue-rotate()
用于改变图整体色调,设定图像会被调整的色环角度值。值为0deg
展示原图,大于360deg
相当于又绕一圈。用法如下:
body {
filter: hue-rotate(45deg);
}
「总结:」 成本几乎为0,实现简单。缺点是对于某些图片或者不想改的颜色需要特殊处理。
方案五:特殊时期变灰
filter还有个属性
grayscale()
改变图像灰度,值在0%
到100%
之间,值为0%展示原图,值为100%
则完全转为灰度图像。
body {
filter: grayscale(1);
}
![5ef73b6817a1167b237d3a8b81635492.png](https://i-blog.csdnimg.cn/blog_migrate/2e156ce997d2e177cbc52436e2638cac.png)
「总结:」 成本小,可以将该功能做成配置项,比如配置它的生效开始时间和生效结束时间,便于运营维护也不用频繁发布代码。
总结
以上就是实现换肤的全部方案,我们团队在实际项目都有使用,比较好推荐的方案是方案一、方案三、方案五,对于要求不高的切换主题推荐方案四,它的技术零成本,对于标准产品推荐方案三。如有更好的方案欢迎评论区交流。
往期推荐
前端重新部署如何使用WebWorker优雅地通知用户刷新网页?
如果让你实现实时消息推送你会用什么技术?轮询、websocket还是sse
最后
欢迎加我微信,拉你进技术群,长期交流学习...
欢迎关注「前端Q」,认真学前端,做个专业的技术人...
点个在看支持我吧