主要原理是利用 css 变量设置颜色，用 js 动态修改变量，使颜色变化，兼容性如下；
实现换肤之前先要了解一下伪类选择器 :root ，还有css的 var() 函数和 setProperty() 函数
:root 是一个伪类，表示文档根元素，非 IE 及 IE8 及以上浏览器都支持，在 :root 中声明相当于全局属性，只要当前页面引用了 :root 所在的文件，都可以使用css var() 函数来引用；
语法
var() 函数，可以代替元素中，任何属性中的值的任何部分； var() 函数不能作为属性名、选择器或者其他除了属性值之外的值，这样做通常会产生无效的语法或者一个没有关联到变量的值；
语法
setProperty() 方法用于设置一个新的 css 属性，同时也可以修改 css 声明块中已存在的属性，兼容性如下；
语法
如果看了觉得有帮助的，我是@ 鹏多多11997110103 ，欢迎 点赞 关注 评论；END
往期文章
个人主页
HTML、 CSS、 JavaScript三者的关系
网页主要由三部分组成： 结构（ Structure） 、 表现（ Presentation） 和行为（ Behavior）
HTML —— 结构， 决定网页的结构和内容（ “是什么”）
CSS —— 表现（ 样式） ， 设定网页的表现样式（ “什么样子”）
JavaScript（ JS） —— 行为， 控制网页的行为（ “做什么”）
一、 HTML语言
1.1什么是HTML语言（ HTML概述）
英文全称： Hyper Text Markup Language
中文全称： 超文本标记语言
HTML 语言是制作网页的最基本语言， 并且只能通过web浏览器显示出来。
Hyper（ 超） ：
用HTML制作的网页可以通过其中的链接从一个网页“跳转”至另一个网页。
Text（ 文本） ：
HTML是一种文本解释性的程序语言， 即它的源代码将不经过编译而直接在浏览器中运行时被“翻译”。
Markup（ 标记） ：
HTML的基本规则就是用“标记语言” ---- 成对尖括号组成的标签元素来描述网页内容是如何在浏览器中显示的。
1.2 HTML文档结构
HTML文档一般由两部分组成：
1. 文档所要表达的内容信息（ 文字、 图片等） ；
2. 一系列的HTML标签；
1.3 HTML标签
1.3.1 什么是HTML标签
1. HTML标签是用 <>所括住的指令， 主要分为：
单标签： <起始标签/>
双标签： <起始标签></结束标签>
例如：
<br/>
<div></div>
2. 通常使用的是双标签。 有一个起始标签就对应有一个结束标签。 标签内容写在起始标签和结束标签之间。
<div>标签内容</div>
3. 在元素的起始标签中， 还可以包含“属性”来设置元素的其他特性。 一个标签可以有多个属性,每个属性之间用空格隔开。
<div 属性名="属性值"></div>
例如：
<div class="wrap" id="wrap"></div>
4. 每一对双标签之间可以嵌套， 但不能交叉。
正确示例：
<div>
<p></p>
</div>
错误示例：
<div>
<p>
</div>
</p>
1.4 编码器
1.4.1 WebStorm源码主体标签含义
<!DOCTYPE>：
是一个声明不是 HTML 标签； 它是用来告诉 web 浏览器要使用哪个 HTML 版本来对页面进行编写。
<html>：
<html>是文档标识符， 它是成对出现的， 首标签<html>和尾标签</html>分别位于 HTML 文档的最前面和最后面， 明确地表示文档是以超文本标识语
言（ html)编写的。 该标签不带有任何的属性。
<head>：
<head>标签用于定义文档的头部， 它是所有头部元素的容器。 <head>中的元素可以引用脚本、 指示浏览器在哪里找到样式表、 提供元信息等等。
<meta>：
<meta>标签位于文档的头部， 用于定义文件信息， 对网页文件进行说明。 其中name属性主要用于描述网页， 与之对应的属性值为content， content中
的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<body>：
<body>标签用于定义文档的主体， 即在浏览器上看到的网页内容。
javascript和css的区别：
css为网页表现、JS为网页行为。
css对网页进行静态修饰，可以使页面以一定的布局方式显示出来。
css是将样式信息与网页内容分离的一种标记语言，我们使用css为每个元素定义样式；它主要用于美化HTML页面。
而js对页面的各种动态效果进行处理，可用来实现网页和人交互的功能，如进行图片的替换，图片的滚动，层的显示与隐藏，快捷键的处理等等。
扩展资料：
CSS（Cascading Style Sheet）层叠样式表单
表现（presentation）——设计网页的表现样式，即“如何显示有关内容”。
CSS是将样式信息与网页内容分离的一种标记语言，我们使用css为每个元素定义样式；它主要用于美化HTML页面。
语法为：selector {property：value} (选择符 {属性：值})。
通过设置对应的样式属性可以修改html文档内各元素的显示、位置等样式；如修改颜色、字体、字号、宽高、位置、背景等
JS（JavaScript）一种动态脚本语言
行为（behavior）——控制网页的行为（效果），即“内容应该如何对事件做出反应”。
使用JavaScript代码可以让前台变的有交互(点击事件)，常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
