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

向右看齐 2021-11-10 12:26 1547阅读 0赞

前言

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

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

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

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

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

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

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

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

Element-UI 有换肤功能 [https://elementui.github.io/theme-preview/\#/zh-CN][https_elementui.github.io_theme-preview_zh-CN]

实现原理：[https://github.com/ElemeFE/element/issues/3054][https_github.com_ElemeFE_element_issues_3054]

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

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

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

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

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

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

1. **less的 modifyVars**方法

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

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

link方式引入主题色文件

更改主题色事件

// 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)这种方式

用之前看下兼容性

![1207871-20190802143842870-1700097756.png][]

[https://caniuse.com/\#search=CSS%20Variables][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_juejin.im_post_5ca41617f265da3092006155]

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

[modifyVars]: http://lesscss.org/usage/#using-less-in-the-browser-modify-variables
[https_elementui.github.io_theme-preview_zh-CN]: https://elementui.github.io/theme-preview/#/zh-CN
[https_github.com_ElemeFE_element_issues_3054]: https://github.com/ElemeFE/element/issues/3054
[1207871-20190802143842870-1700097756.png]: /images/20211109/ae87c59ce72e41dcb4feee963dd0eca3.png
[https_caniuse.com_search_CSS_20Variables]: https://caniuse.com/#search=CSS%20Variables
[https_juejin.im_post_5ca41617f265da3092006155]: https://juejin.im/post/5ca41617f265da3092006155