原生html换皮最简示例原生html换皮最简示例原生html换皮最简示例原生html换皮最简示例原生html换皮最简示例

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>暗色模式示例</title>

    <style>
      :root {
        --bg-color-0: #ffffff;
        --text-color: #333333;
      }

      html.dark {
        --bg-color-0: #16161a;
        --text-color: #ffffff;
      }

      body {
        background-color: var(--bg-color-0);
        color: var(--text-color);
        transition: background-color 0.3s, color 0.3s;
      }
    </style>
  </head>
  <body>
    <h1>🌗 暗色模式示例</h1>
    <p>点击下面按钮切换主题：</p>
    <button id="toggleTheme">切换主题</button>

    <script>
      const html = document.documentElement;
      const btn = document.getElementById("toggleTheme");

      // 初始化
      if (localStorage.getItem("theme") === "dark") {
        html.classList.add("dark");
      }

      btn.addEventListener("click", () => {
        html.classList.toggle("dark");
        localStorage.setItem(
          "theme",
          html.classList.contains("dark") ? "dark" : "light"
        );
      });
    </script>
  </body>
</html>