关于项目主题换肤的一些方案

前言

前端换肤技术实施的核心是替换项目中定义的各种颜色值，一般来讲，需要将这些所有的颜色值整理在一个文件中，以便于统一管理、统一配色。所以在实际开发过程中，为页面各个模块设置对应的颜色值时，都需要在这个文件中获取。Es6的模块化提供了非常友好的文件读取方式，我们可以结合webpack编译工具来编译不同颜色文件的css样式，以实现一种统一的换肤方案应用在公司的不同项目中。

本文主要介绍如何利用 webpack 结合第三方框架去构建一个换肤的方案，首先介绍从页面到模块的不同颜色层级的定义，然后重点会介绍 webpack 的配置和优化，最后根据Vue 生态系统结合第三方组件进行验证。

1. 页面组成与颜色规范

前端页面主要分为工具栏，导航栏，菜单栏，与页面主体部分，因为涉及到不同项目中采用的css预处理语言样式不同，所以需要统一制定一个换肤的主题规范，从而满足不同项目的主题切换工作。 从颜色范围来讲，主题颜色主要分为浅色系 和深色系 ；从颜色区间来讲，主题颜色应该分为多种色值来界定不同层级的颜色；从细节来讲，页面的主题颜色应该包含但不仅限于以下部分：主色、强调色、背景颜色、文本颜色。

从设计的层面来讲，系统的所有主题颜色应该围绕主色来进行配置。

主题颜色规范参考如下：

主色：系统最直观的颜色，通常用于在导航栏，菜单栏，按钮，图片当中。

 

主色色系最好是以柔色为主，如上图所示，在层级关系比较明显的组件中（如菜单），基色应与主色相同，可以通过不同的透明度或者深浅关系来设置一级、二级、三级菜单。

强调色：通常指链接等可直接点击的字体颜色，一般来说，强调色和主色在一个色系中，但比它更深一点。

 

强调色也可以分为不同的层级，在页面的交互过程中，可能存在一些状态颜色来表示某一段页面内容的状态信息，如链接的LVHA四个属性，由浅到深按层次变化字体的颜色值。

背景颜色：通常为#FFFFFF（白色），但是在深色系中其颜色之可能为其他较深的颜色值。

文本颜色：前端页面常用的文本颜色为#000000（黑色），与背景应该能够明显区分，通常是与其相反的色值（为互补色）。文本中可能存在标题与正文部分，标题相对来说比正文多0.2个透明度（安全监管：0.65， 0.45）

 

固定颜色：通常表示不用进行主题切换的颜色，用于表示一些特定的信息：如disable（灰）、error（红）、success（绿），这些颜色值都是固定的，不需要换肤。

2. 构建与配置

一、换肤方案的总体思路

方案	方法	特点
1	利用class 命名空间	最简单的换肤方案
2	利用link标签引用不同的css文件	传统前端最常用
3	利用CSS预处理生成多套主题样式	现代前端最常用
4	动态换肤	支持浏览器热换肤，最酷炫
5	CSS变量换肤	不考虑IE，最佳换肤方式

1.

1. 利用class命名空间

用不同的class定义不同的颜色值，主要原理是通过改变标签的className来切换不同的主题。

优缺点

• 优点：简单，好理解，易实现
• 缺点：CSS中需多写主题的class，代码容易混乱；需手动编写

 

2. 利用link标签引用不同的css文件

通过css文件编写多套主题，然后改变标签中的href引用不同主题的css文件。

优缺点

• 优点：简单，好理解，易实现
• 缺点：需要手写两份以上CSS配色样式； 切换样式需要下载CSS的时间

方案1和方案2的区别：在切换主题时，方案1的页面渲染开销始终小于方案2。

 

3. 利用CSS预处理生成多套主题样式

利用CSS预处理生成多套主题样式，再根据需要切换。

主要的思路是：

1. 利用Less，stylus 或 sass 的变量代替颜色值
2. 配置多个主题颜色配置
3. 利用webpack等工具输出多套主题样式
4. 页面加载后，根据用户需求加载不同的样式列表（同方案2）

优缺点

• 优点：不用手写多套CSS
• 缺点：配置复杂；生成冗余的CSS文件；切换样式需要下载CSS的时间

 

4.动态换肤

这是element ui中的换肤方案，支持浏览器热换肤。生成一套主题， 将主题配色配置写在JS中，在浏览器中用JS动态修改style标签覆盖原有的CSS。

优缺点

• 优点：只需一套CSS文件；换肤不需要延迟等候；可自动适配多种主题色；
• 缺点：稍难理解；需准确的CSS颜色值；可能受限于浏览器性能;

 

5. CSS 变量换肤

利用CSS 变量设置颜色，用JS动态修改CSS变量，进而换色。
如果不考虑IE兼容，这是最佳换肤方案

优缺点

• 优点：只需一套CSS文件，对浏览器性能要求低；可自动适配多种主题色；
• 缺点：不支持IE， 2016年前的chrome，safari