使用 css/less 动态更换主题色（换肤功能）

前言

说起换肤功能，前端应该是非常熟悉了?

一般来说换肤的需求分为几种：

1. 纯前端，直接在页面前端通过点击自由切换限定的几种主题色，切换之后主题色变量存到本地浏览器

2. 在后台配置好色值，传到前端，前端从接口获取主题色在初始化的时候显示对应的主题色

3. 前面两者的结合，初始化的颜色设置，但也可通过前端的切换来更改主题色

 

拿到换肤需求后，就在思考该如何实现呢?

先搜一下，看下有哪些方法

Ant Design 的更换主题色功能是用 less 提供的 modifyVars 的方式进行覆盖变量来实现。

Element-UI 有换肤功能 https://elementui.github.io/theme-preview/#/zh-CN

实现原理：https://github.com/ElemeFE/element/issues/3054 

 

如果是有限的几种颜色切换，可以：

1. 在最外层加主题类名，定义几种主题色，通过切换类来切换主题色 or

2. 将不同主题的样式抽取出来生成多份主题样式文件，在切换事件的时候动态引入

这两种方法的缺点都是要维护几种样式文件，对开发者不友好

 

但如果是要实现动态换肤，自定义色值，那上面的几种方式就不适合了。

所以就有了下面的两种方式：

1. less的 modifyVars方法

modifyVars方法是是基于 less 在浏览器中的编译来实现。所以在引入less文件的时候需要通过link方式引入，然后基于less.js中的方法来进行修改变量

less.modifyVars({'@themeColor': 'blue'
});

 

link方式引入主题色文件

<link rel="stylesheet/less" type="text/css" href="./src/less/public.less" />

 

更改主题色事件

// color 传入颜色值
handleColorChange (color) {const changeColor = () => {var less = require('less');less.modifyVars({  // 调用 `less.modifyVars` 方法来改变变量值'
              @themeColor':color}).then(() => {console.log('修改成功');});};const lessUrl ='https://cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js';if (this.lessLoaded) {changeColor();} else {less = {async: true,};axios.get(lessUrl).then(() => {this.lessLoaded = true;changeColor();});}};

 

2. css 变量方法

如果项目里用的不是less, 那么还是用css的方法，通用且容易操作，使用css变量来进行主题色的修改，替换主题色变量，然后用setProperty来进行动态修改

用法就是给变量加–前缀，涉及到主题色的都改成var(–themeColor)这种方式

用之前看下兼容性

 https://caniuse.com/#search=CSS%20Variables

其实大部分主流浏览器还是支持的，不过还是有些不支持，所以要不要用看需求咯

用法举例：

body{--themeColor:#000;
}

使用：

.main{color: var(--themeColor);
}

要修改主题色的话：

document.body.style.setProperty('--themeColor', '#ff0000');

 

搜罗了下，貌似css改主题色的方法大致也就这些，用的时候根据需求选择最合适的方法~

 

参考： https://juejin.im/post/5ca41617f265da3092006155

转载于:https://www.cnblogs.com/leiting/p/11203383.html