css主题切换今天我们来实现一个主题切换的功能效果是这样的首先把基础代码写好现在效果是这样的要想实现多主题切换

视频地址：点此查看

今天我们来实现一个主题切换的功能

效果是这样的

首先把基础代码写好

<label><input type="radio" name="theme" value="dark">暗夜主题</label>
<label><input type="radio" name="theme" value="default">日间主题</label>

<div class="box"></div>

*{margin: 0;padding: 0;transition: .1s;}
body{background-color: #eee;color: #111;}
.box{background-color: #f00;width: 100px;height: 100px;border-radius: 10px;margin: 30px auto;}

现在效果是这样的

要想实现多主题切换

我们的思路是

通过改变body元素的class来改变页面元素的颜色

而body元素的class则是我们的主题名称

这里定义了两种主题

暗夜主题和日间主题

对应body元素的class为dark和default

然后我们来定义这两个主题下的颜色

这里用到了css变量

.default{
  --bgColor:#eee;
  --boxColor:red;
  --textColor:#111;
}
.dark{
  --bgColor:#0d142c;
  --boxColor:#eee;
  --textColor:#fff;
}

前面说了default和dark分别为body元素的class

冒号前面以双横线开头的为css变量名

冒号后面为变量值

而这个变量作用在指定的class范围内

要想通过仅仅改变class来改变页面元素

所以可变的只有class名称

不同class下的变量名需要保持一致

主题定义完成之后

需要将这些主题定义的颜色作用于页面

也就是使用我们的css变量

body{background-color: var(--bgColor);color: var(--textColor);}
.box{background-color:var(--boxColor);...}

定义css变量以双横线开头

通过var函数来使用css变量

函数内参数为css变量名

最后一步我们需要通过js来监听当前选择的是哪个主题

// 首先我们遍历所有的radio标签
document.querySelectorAll("input[name='theme']").forEach(function(dom){
  // 然后分别监听change事件
  dom.addEventListener("change",function(){
    	// 将被选中的radio元素的value设置给body元素的class
      document.body.className = document.querySelectorAll("input[name='theme']:checked")[0].value;
  })
})

最后我们来看一下效果在这段JS代码中

首先

我们遍历了所有的主题元素

也就是我们的radio标签

然后分别添加change事件

通过change事件来监听当前选择的是哪个主题

然后为我们的body元素添加class

class名称为我们radio标签的value值

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <style>
    *{margin: 0;padding: 0;transition: .1s;}

    .default{
      --bgColor:#eee;
      --boxColor:red;
      --textColor:#111;
    }
    .dark{
      --bgColor:#0d142c;
      --boxColor:#eee;
      --textColor:#fff;
    }

    body{background-color: var(--bgColor);color: var(--textColor);}
    .box{background-color:var(--boxColor);width: 100px;height: 100px;border-radius: 10px;margin: 30px auto;}
  </style>
  <body class="default">
    <label><input type="radio" name="theme" value="dark">暗夜主题</label>
    <label><input type="radio" name="theme" value="default">日间主题</label>

    <div class="box"></div>

    <script>
      document.querySelectorAll("input[name='theme']").forEach(function(dom){
        dom.addEventListener("click",function(){
          document.body.className = document.querySelectorAll("input[name='theme']:checked")[0].value;
        })
      })
    </script>
  </body>
</html>