css变量实现主题切换

gnip2023-10-09 11:29

概述

最近项目中，遇到了关于同一个项目要部署到不同的环境，各个环境要适配不同的主题方案，这里简单记录一期关于主题切换的实现方案。

实现

关键单在意css变量var函数的使用，他可以动态的使用变量来作为css值，因此我们可以用来做主题切换。

代码

html 复制代码

<!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>
    <style>
      .dark-box {
        --background-color: #000;
        --text-color: #fff;
      }
      .red-box {
        --background-color: red;
        --text-color: #000;
      }
      .default-box {
        --background-color: pink;
        --text-color: #000;
      }
      .box {
        width: 100px;
        height: 100px;
        background-color: var(--background-color,pink);
        color: var(--text-color,#000);
      }
    </style>
  </head>
  <body>
    <div class="box">测试盒子</div>
    <button id="btn1">切换黑色主题</button>
    <button id="btn2">切换红色主题</button>
    <script>
      let box = document.getElementsByClassName("box")[0];
      let btn1 = document.getElementById("btn1");
      let btn2 = document.getElementById("btn2");
      btn1.addEventListener("click", () => {
        box.classList.add("dark-box");
        box.classList.remove("red-box");
      });
      btn2.addEventListener("click", () => {
        box.classList.add("red-box");
        box.classList.remove("dark-box");
      });
    </script>
  </body>
</html>

总结

需要样式动态变化的css属性，我们可以提取成css变量，后期主题切换，我们样式就会跟随变化了。