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

用之前看下兼容性

使用 css/less 动态更换主题色(换肤功能)_第1张图片

 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

你可能感兴趣的:(使用 css/less 动态更换主题色(换肤功能))