如何让网站记住用户的深色模式（Dark Mode）选择？

核心思路 #

用localStorage保存用户的深色模式选择（它会在同域名下的所有页面共享，刷新/跳转后不会丢失），页面加载时读取保存的状态并自动应用。

步骤1：修改切换函数，保存状态 #

更新你的toggleDarkMode1函数，每次切换后把当前状态存入localStorage：

function toggleDarkMode1() {
  var element = document.body;
  element.classList.toggle("dark-mode");
  var test1 = document.getElementById("changeMe1");
  test1.classList.toggle("dark-mode");
  var test2 = document.getElementById("change2");
  test2.classList.toggle("dark-mode-header");
  var test3 = document.getElementById("changeMe3");
  test3.classList.toggle("dark-mode");

  // 保存当前深色模式状态到localStorage
  const isDarkMode = element.classList.contains('dark-mode');
  localStorage.setItem('darkModeEnabled', isDarkMode.toString());
}

步骤2：添加页面加载时的状态恢复逻辑 #

新增一个函数，在页面加载完成后自动读取保存的状态并应用，同时同步开关的勾选状态：

function applySavedDarkMode() {
  // 读取保存的状态，默认关闭深色模式
  const savedDarkMode = localStorage.getItem('darkModeEnabled') === 'true';
  const darkModeSwitch = document.getElementById('darkmode');

  if (savedDarkMode) {
    // 开启深色模式：添加对应的类
    document.body.classList.add('dark-mode');
    document.getElementById("changeMe1").classList.add('dark-mode');
    document.getElementById("change2").classList.add('dark-mode-header');
    document.getElementById("changeMe3").classList.add('dark-mode');
    // 同步开关为勾选状态
    darkModeSwitch.checked = true;
  } else {
    // 关闭深色模式：移除对应的类（确保默认状态正确）
    document.body.classList.remove('dark-mode');
    document.getElementById("changeMe1").classList.remove('dark-mode');
    document.getElementById("change2").classList.remove('dark-mode-header');
    document.getElementById("changeMe3").classList.remove('dark-mode');
    // 同步开关为未勾选状态
    darkModeSwitch.checked = false;
  }
}

// 页面元素加载完成后执行恢复操作
document.addEventListener('DOMContentLoaded', applySavedDarkMode);

步骤3：复用代码到所有页面 #

把上面两段JavaScript代码保存到一个单独的文件（比如darkMode.js），然后在你的3个页面的<head>或<body>末尾引入这个文件：

<script src="./path/to/darkMode.js"></script>

（注意替换path/to/为实际的文件路径，比如如果文件和页面在同一目录，就写./darkMode.js）

关键说明 #

• localStorage是浏览器提供的本地存储，数据会永久保存（除非用户手动清除浏览器缓存），且同域名下的所有页面都能访问。
• DOMContentLoaded事件确保页面所有元素加载完成后再执行状态恢复，避免出现找不到元素的错误。
• 开关的checked状态会和深色模式同步，用户切换后再打开页面能看到一致的开关状态。

内容的提问来源于stack exchange，提问作者green-seen