简介：CSS中的var（变量）是CSS3中的新特性，用于定义可重用的值，类似于编程语言中的变量。它允许您在整个CSS文件中定义一个值，并在需要时使用该值。这样可以使CSS更加灵活和易于维护。而classList.toggle()方法，下面有使用详细说明。
这里使用var变量和classList.toggle()方法来实现一个切换主题背景的功能，
效果如下：
一、首先定义html元素，并设置样式；
<body> <div class="index_box"> <div class="btn_circle"></div> </div> </body> html, body { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } //这里使用css的var定义变量: --dark-plum-bg ， white是默认值 body { background-color: var(--dark-plum-bg, white); } //这里定义一个类名，然后给变量--dark-plum-bg赋值 //哪个元素有该类名且调用了该类名下的自定义属性，哪个元素效果就会生效 .dom-style { --dark-pink-bg: pink; --dark-plum-bg: plum; } //拥有这个类名，元素就会向右移动40px（按钮里面的圆） .mode-switch-off { transform: translate(40px); } .index_box { width: 90px; height: 40px; line-height: 40px; background-image: linear-gradient(to right, yellowgreen, #8080ff); border-radius: 20px; display: flex; align-items: center; box-sizing: border-box; padding: 0px 10px; box-shadow: 0px 0px 12px silver; .btn_circle { width: 30px; height: 30px; background-color: white; border-radius: 20px; transition: all 0.3s linear; } }
二、准备好文本和样式后，然后使用JS控制按钮和主题色变化；
//这里获取到按钮元素后，添加一个点击事件 document.querySelector(".index_box").addEventListener("click", function () { //这里获取按钮里面的白色元素， //通过classList.toggle()方法判断该元素是否有mode-switch-off这个类名， //如果有就移除，没有就就添加 this.querySelector(".btn_circle").classList.toggle("mode-switch-off"); //最后还是通过classList.toggle()方法判断body元素是否有dom-style类名， //有的话自然就会变成该元素下的背景色 document.body.classList.toggle("dom-style"); })
三、这里的classList.toggle()方法大家可能比较陌生，这里介绍一下该方法的含义和使用详细；
classList.toggle() 方法，介绍：
1、classList.toggle() 是 JavaScript 中用于切换 HTML 元素类名的方法。
2、它可以添加类名，删除类名或者在类名存在时删除它，不存在时添加它，通俗点讲就是，使用该方法时，元素有该类名就移除，没有就添加。
这里举个简单的实例，使用方法如下：
实例1：
1、首先，获取需要操作的 HTML 元素：
let element = document.getElementById("example");
2、然后，使用 toggle() 方法来切换类名：
element.classList.toggle("active");
3、这将在类名 "active" 存在时删除它，在不存在时添加它。
实例2：
1、这里假设我们有一个按钮，点击它时可以切换它的样式。首先，我们需要在 CSS 中定义两个类名，一个是默认样式，一个是激活样式：
CSS: .btn { background-color: #ccc; color: #000; } .btn.active { background-color: #000; color: #fff; }
2、然后，我们需要在 HTML 中添加一个按钮：
HTML: <button id="myBtn" class="btn">Toggle</button>
3、最后，在 JavaScript 中添加事件监听器，当按钮被点击时调用 toggle() 方法来切换类名：
JS: let btn = document.getElementById("myBtn"); btn.addEventListener("click", function() { this.classList.toggle("active"); });
4、现在，每次点击按钮时，它的样式都会切换。
实例2效果：
说到这，我们再回到上面通过var变量切换背景的案例，这样就比较容易理解。
