使用 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

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

动态更换主题色（换肤功能）
文章目录对于可供选择的颜色/主题样式换肤的实现一个全局class控制样式切换 JS改变href属性值切换样式表,例如 HTML 的 rel 属性下的 alternate 实现: 对于制定动态色值换 ...
html积极向上的主题设计,css/less 实现动态更换主题色
固定主题色的切换思路:访问网页 => js读取缓存(判断是否有主题色的值,没有就默认皮肤,有则使用指定皮肤) => 用户点击换肤 => js切换对应的css样式文件即可 => ...
Ant design vue中实现动态更换主题色
一.创建vue项目可视化创建步骤:cmd调出窗口,输入vue ui,自动在浏览器上打开新窗口输入文件名 ,文件名最好是英文然后进行配置功能, 根据需求选择配置功能这里最好选择2.0版本, 可以 ...
vue-element-admin 换肤功能，登录后不同权限不同皮肤，刷新不会失效
一.拉vue-element-admin的代码跑起来安装依赖时会遇到一些问题,tui-editor装不上,需要按照以下步骤删除它 1.vue-element-admin\package.json 删 ...
vue动态切换css文件_vue在线动态切换主题色方案
主要原理是利用webpack插件webpack-theme-color-replacer提取相关颜色css然后根据配置动态生成替换的css 具体实现步骤如下: 1.添加webpack插件,新建文件we ...
一键换肤--动态更换主题颜色风格
基于前一段时间项目具有换肤需求的功能,几经预研学习换肤功能效果,网上的资源很多,最初看到是网易换肤的酷炫效果,今天得空打算写一篇关于换肤功能的文章,项目无需重启Activity的就可以实现无缝换肤切换 ...
vue动态发布到线上_vue在线动态切换主题色方案
主要原理是利用webpack插件webpack-theme-color-replacer提取相关颜色css然后根据配置动态生成替换的css 具体实现步骤如下: 1.添加webpack插件,新建文件we ...
vue在线动态切换主题色方案
主要原理是利用webpack插件webpack-theme-color-replacer提取相关颜色css然后根据配置动态生成替换的css,具体实现步骤如下: 1.添加webpack插件,新建文件we ...
element-plus 更换主题色
element-plus 更换主题色场景: 简单的定制主题色,并不需要有按钮切换主题色. 实现: 在项目中新建你的theme.scss,代码如下: // style/element/index.sc ...

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

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

最新文章

热门文章