换肤功能

常见的主要有两种形式:

一、提供具体的可供选择的颜色/主题颜色,进行切换选择。(主要介绍)

二、需要自定义色值,通过取色版取色,根据主颜色切换整个主题。

附:自定义色值 可参考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 提供的 modifyVars 的方式进行覆盖变量来实现。)

官网介绍:

https://lesscss.org/usage/#using-less-in-the-browser-modify-variables

当启用Less变量的运行时修改。当用新值调用Less文件时,将重新编译而不重新加载。

 

主要思路:使用modifyVars()方法, 基于 less 在浏览器中的编译来实现。在引入less文件的时候需要通过link方式引入,通过js传参改变对应颜色。示例:

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

 

 

(待完善.....)

posted @ 2022-07-22 16:41  SonderJie  阅读(187)  评论(0)    收藏  举报