换肤功能

常见的主要有两种形式：

一、提供具体的可供选择的颜色/主题颜色，进行切换选择。（主要介绍）

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

附：自定义色值 可参考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

 

 

（待完善.....）