主题切换

方法一，切换html的data-theme属性,设置不同主题下的变量值

页面中使用变量即可

html

<!DOCTYPE html>
<html lang="en" data-theme="theme1">
  <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>
  <body>
    <p>测试文本</p>
    <button onclick="a()"></button>
  </body>
  <style>
    [data-theme="theme1"] p {
      --color: red;
    }
    [data-theme="theme2"] p {
      --color: blue;
    }
  </style>
  <script>
    function a() {
      window.document.documentElement.setAttribute("data-theme", "theme2")
    }
  </script>
</html>

<!DOCTYPE html>
<html lang="en" data-theme="theme1">
  <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>
  <body>
    <p>测试文本</p>
    <button onclick="a()"></button>
  </body>
  <style>
    [data-theme="theme1"] p {
      --color: red;
    }
    [data-theme="theme2"] p {
      --color: blue;
    }
  </style>
  <script>
    function a() {
      window.document.documentElement.setAttribute("data-theme", "theme2")
    }
  </script>
</html>

主题切换 #

主题切换