【css】前端换肤功能方案调研 css变量换肤实践
场景：应用要做深浅两套主题，内嵌h5页面要根据用户当前选择的主题渲染对应的主题样式。
技术栈：vue-cli3 + less + Vant
接到需求后，上网调研了几种方案：切换className、切换css文件、使用预处理器（less/sass）变量、css变量等，最终选择的是css变量方案。
1. 利用class 命名空间
根据主题设置不同的类名，在类名下设置不同样式。
优点
- 实现简单，易理解
- 兼容性好
缺点
- 易产生css优先级问题，造成代码混乱
- 代码冗余
- 不适用于用户自定义主题的场景
demo：codepen.io
2. 准备多套CSS主题
生成多套主题css文件，根据需要切换css文件href。
- 优点
- 易实现
- 缺点
- 代码冗余
- 下载css需要额外时间，用户体验不佳
3. 使用 less modifyVars
antd主页 & antd pro使用的方案，实现优雅简单，与antd适配性好。原理上是使用 less 提供的 modifyVars 的方式进行覆盖变量，对 less-loader 的 options 属性进行相应配置。
// webpack.config.js
module.exports = {rules: [{test: /\.less$/,use: [{loader: 'style-loader',}, {loader: 'css-loader', // translates CSS into CommonJS}, {loader: 'less-loader', // compiles Less to CSS
+ options: {+ lessOptions: { // 如果使用less-loader@5，请移除 lessOptions 这一级直接配置选项。
+ modifyVars: {+ 'primary-color': '#1DA57A',
+ 'link-color': '#1DA57A',
+ 'border-radius-base': '2px',
+ },
+ javascriptEnabled: true,
+ },
+ },}],// ...other rules}],// ...other config
}
具体可以参考antd官网：https://ant.design/docs/react/customize-theme-cn
但是在实现的时候，发现这种方案并不能满足我的需求：
webpack无法异步配置，因此我不能异步获取用户主题后再加载less变量；（或许可以但我不知道？【css】前端换肤功能方案调研 css变量换肤实践相关推荐
- php实现的证件照换底色功能示例【人像抠图/换背景图】
<?php //背景图和原图需要保持宽高要保持一样,这里的示例原图用的是蓝色背景 init(); function init(){$old = '1.png';$new = '2.png';// ...
- Android 换肤功能的实现（Apk插件方式）
一.概述 由于Android 没有提供一套统一的换肤机制,我猜可能是因为国外更注重功能和体验的原因 所以国内如果要做一个漂亮的换肤方案,需要自己去实现. 目前换肤的方法大概有三种方案: (1)把皮肤资 ...
- Eclispse 换主题、皮肤、配色，换黑色主题护眼
Eclipse写android代码时,默认的文本和框架都是白色,长时间使用,显得过于刺眼.这里介绍三种方法换黑色护眼配色. 1.系统设置里更改 2.从Eclipse Marketplace里下载主题 ...
- 使用 css/less 动态更换主题色（换肤功能）
前言 说起换肤功能,前端应该是非常熟悉了? 一般来说换肤的需求分为几种: 1. 纯前端,直接在页面前端通过点击自由切换限定的几种主题色,切换之后主题色变量存到本地浏览器 2. 在后台配置好色值,传到前 ...
- [css] 如何实现换肤功能？
[css] 如何实现换肤功能? css 换肤常见方案 是通过 less/sass/postcss 等css 预处理器,通过它们自身的变量用法,设置不同变量,生成不同的主题样式,但是这些样式都是会被打包 ...
- JavaScript+Css+Html实现网页换皮肤功能
描述:JavaScript+Css+Html实现网页换皮肤功能 原理:使用不同网页背景保存在不同CSS里面,当点击切换的时候通过JavaScript将原来的样式表改为新的CSS就可以完成换肤功能 代码 ...
- html前端页面的基本骨架是,web前端入门到实战：css实现的骨架屏方案
web前端入门到实战:css实现的骨架屏方案 发布时间:2020-08-04 01:32:03 来源:51CTO 阅读:152 作者:前端向南 优点 简单,不需要工程,不用puppeteer生成骨架d ...
- html css实现静态换肤,简单的JS+CSS实现网页自定义换肤
1,实现效果 效果图 2,实现原理 主要原理是利用css变量设置颜色,用js动态修改变量,使颜色变化,兼容性如下: 兼容性 3,实现过程 实现换肤之前先要了解一下伪类选择器 :root ,还有css的 ...
- android换肤的实现方案,Android应用开发之Android一键换肤功能实现
本文将带你了解Android应用开发之Android一键换肤功能实现,希望本文对大家学Android有所帮助. < 市面上对数的App都提供换肤功能,这里暂且不讲白天和夜间模式 下图是网易云音乐 ...
最新文章
- python comprehensions_python 列表生成式 List Comprehensions
- RIP 数据包类型 路由中毒
- scrollview背景
- QWidget: Must construct a QApplication before a QPaintDevice
- 目前看的图神经网络(GNN)论文的一些总结
- 智能关机软件 c语言,智能关机软件
- python生成的词云没有图案_Python如何生成词云的方法
- Oracle远程连接
- cad vba编程从入门到精通_【CAD教程】CAD2020零基础入门到精通全套视频教程
- 深入理解分布式事务（XA及rocketmq事务）
- 《极客时间：代码精进之路》学习笔记
- 城市数字孪生解决方案
- python构造icmp数据包_Python原始套接字未接收ICMP数据包
- Linux 各种网卡信息查询方法
- kali linux 标题栏 显示 网速、CPU 内存使用
- 苹果cms修改服务器,购买m1938工作室制作的苹果cms模板如何安装修改苹果cms页面说明...
- 脑机接口的过去、现在与未来
- 图片的旋转,缩放和拖拽
- 外媒：朝鲜导弹发射失败或因美国网络攻击所致
- excel和python建模_如何用Python提高办公（Excel）效率？
热门文章
- php实现的证件照换底色功能示例【人像抠图/换背景图】