换肤功能
常见的主要有两种形式:
一、提供具体的可供选择的颜色/主题颜色,进行切换选择。(主要介绍)
二、需要自定义色值,通过取色版取色,根据主颜色切换整个主题。
附:自定义色值 可参考element-ui的切换主题色
线上地址
https://elementui.github.io/theme-preview/#/zh-CN
源码地址
https://github.com/ElemeFE/element
一、对于可供选择的颜色/主题样式换肤的实现原理
1.全局class样式切换
主要思路:切换class名称控制样式 最外层的父级切换类名,每一个类名对应一套css文件
优点:简单易理解
缺点:复杂冗余
总结:不推荐
2.less的 modifyVars()方法
(Ant Design 的更换主题色功能是用 less 提供的
官网介绍:
https://lesscss.org/usage/#using-less-in-the-browser-modify-variables
当启用Less变量的运行时修改。当用新值调用Less文件时,将重新编译而不重新加载。
https://blog.csdn.net/weixin_39856066/article/details/117369228?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-1-117369228-blog-115670270.pc_relevant_multi_platform_whitelistv1&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-1-117369228-blog-115670270.pc_relevant_multi_platform_whitelistv1&utm_relevant_index=2
优点:个人认为没有
缺点:切换不及时,运行时编译、需要额外引入less.main.js、样式文件需要通过link方式引入
总结:不推荐
3.scss的@mixin @each和@include函数(scss为sass的升级版本)
(element-ui使用这种方式修改)
主要原理:修改html的data-theme属性来修改主题参数,配合使用@mixin @each和@include函数
指令简单介绍:
1)定义混合指令@mixin,使用 @include指令引用混合样式,格式是在其后添加混合名称,以及需要的参数(可选)
2)@each指令的格式是 $var in <list>
, $var
可以是任何变量名,比如 $length
或者 $name
,而 <list>
是一连串的值,也就是值列表。
sass官网
https://sass-lang.com/documentation/at-rules/mixin
示例代码:
https://www.jianshu.com/p/1faf4977b825
4.css的root 变量换肤
主要原理:使用css变量来进行主题色的修改,替换主题色变量,然后用setProperty来进行动态修改
修改主题色:
document.body.style.setProperty('--themeColor', '#ff0000');
优点:只需一套CSS文件;换肤不需要延迟等候;对浏览器性能要求低;可自动适配多种主题色
缺点:不兼容IE
总结:推荐
5.HTML rel属性的alternate属性值实现
主要原理及示例代码:
https://www.zhangxinxu.com/wordpress/2019/02/link-rel-alternate-website-skin/
较为官方的介绍
https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets
二、全局修改原理
1.localstorage
(配合root)
示例代码:
// 全局定义css变量 :root { --BackColor: #ffffff; --borderBtm: #3459a3; --cardColor: #f7f8fa; }
//页面调用
.title{ font-size: 20px; color: var(--cardColor); }
//动态修改
document.documentElement.style.setProperty(`--cardColor`, 'red');
//本地存储修改的颜色示例
const title = document.getElementsByClassName("title")[0] title.onclick = function() { document.documentElement.style.setProperty(`--cardColor`, 'blue'); window.localStorage.setItem('style', 'blue') } window.onload = function() { const style = window.localStorage.getItem('style') if(style) { document.documentElement.style.setProperty(`--cardColor`, style); }else { document.documentElement.style.setProperty(`--cardColor`, 'red'); } }
2.直接用link挂载 修改href
https://blog.csdn.net/w405722907/article/details/105552610?spm=1001.2101.3001.6650.3&utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-3-105552610-blog-123985595.pc_relevant_multi_platform_whitelistv1_exp2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-3-105552610-blog-123985595.pc_relevant_multi_platform_whitelistv1_exp2&utm_relevant_index=4
(待完善.....)