如何让点击按钮切换背景色的JavaScript代码在全站页面生效？

你的问题在于当前代码只修改了当前页面的body样式，没有保存这个状态，跳转或刷新其他页面时就会恢复默认。要实现全站生效，需要用localStorage存储主题偏好，每个页面加载时读取并应用这个设置。

修改后的代码实现 #

1. JavaScript 逻辑（所有页面都要引入该JS文件） #

// 设置主题样式并存储状态
function setDarkTheme(isDark) {
  const body = document.getElementsByTagName("body")[0];
  if (isDark) {
    body.style.background = "black";
    localStorage.setItem("darkTheme", "true");
  } else {
    body.style.background = "white";
    localStorage.setItem("darkTheme", "false");
  }
}

// 页面加载时自动读取存储的主题设置并应用
window.addEventListener("load", function() {
  const isDark = localStorage.getItem("darkTheme") === "true";
  setDarkTheme(isDark);
});

// 按钮点击触发主题切换
function myFunction() {
  const currentIsDark = localStorage.getItem("darkTheme") === "true";
  setDarkTheme(!currentIsDark);
}

2. 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>
    <link rel="stylesheet" href="style.css">
    <style>
      body {
        background: white;
       }
    </style>
    <!-- 引入上述JS文件 -->
    <script src="theme.js"></script>
</head>
<body>
    <button id="button" onclick="myFunction()">切换深色主题</button>
</body>
</html>

核心原理说明 #

• localStorage会将主题偏好保存在用户浏览器中，除非手动清除缓存，否则设置会持久保留。
• 每个页面加载时通过window.load事件读取存储的状态，自动同步对应的背景色。
• 点击按钮时切换状态并更新存储，确保全站所有页面加载时都能读取到最新的主题设置。

内容的提问来源于stack exchange，提问作者Canofeggs 5410