如何实现全站生效且刷新保留的明暗模式切换按钮（支持jQuery）

问题描述 #

我用HTML和CSS搭建的网站默认是暗色模式，想要实现一个明暗模式切换按钮，要求点击后全站页面切换为对应模式，且刷新页面后仍保留用户的模式设置。目前我采用逐个元素切换类的方式实现样式变化，但刷新后会恢复默认暗色模式，且代码繁琐，请问如何优化实现？

当前使用的jQuery代码：

$(document).ready(function() {
    $("#light-mode").click(function() {
        $("body").toggleClass("light-mode-bgr");
        $("h1").toggleClass("light-mode-text");
        $(".message-disc p").toggleClass("light-p");
        $("p").toggleClass("light-mode-text");
        $(".img-rad label p.maybe").toggleClass("light-mode-btn");
        $(".buttons button[type='next']").toggleClass("light", "disabled");
        $(".buttons button[type='button']").toggleClass("light-ret");
        $("input[type=radio]:checked+label>p").toggleClass("light-radio");
        $("input[type=text]").toggleClass("light-inp");
        $("input[type=tel]").toggleClass("light-inp");
        $("input[type=num]").toggleClass("light-inp");
        $("input[type=number]").toggleClass("light-inp");
        $("textarea").toggleClass("light-inp");
        console.log("clicked");
    });
});

优化实现方案（jQuery版本） #

1. 重构CSS结构，基于body类控制全站样式 #

不用给每个元素单独定义亮色类，只需给body添加一个light-mode类，通过CSS后代选择器统一控制所有元素的明暗样式，大幅简化代码：

/* 暗色模式默认样式 */
body {
  background-color: #1a1a1a;
  color: #ffffff;
}
input, textarea, button {
  background-color: #333333;
  color: #ffffff;
  border: 1px solid #555555;
}
h1 {
  color: #eeeeee;
}
.message-disc p {
  color: #dddddd;
}

/* 亮色模式样式，通过body的light-mode类触发 */
body.light-mode {
  background-color: #ffffff;
  color: #1a1a1a;
}
body.light-mode input,
body.light-mode textarea,
body.light-mode button {
  background-color: #f5f5f5;
  color: #1a1a1a;
  border-color: #cccccc;
}
body.light-mode h1 {
  color: #222222;
}
body.light-mode .message-disc p {
  color: #333333;
}
/* 其他需要调整的元素继续用body.light-mode作为父选择器扩展 */

2. 结合localStorage实现模式持久化 #

使用localStorage存储用户选择的模式，页面加载时读取并应用，同时简化切换逻辑：

$(document).ready(function() {
  // 页面初始化时，读取本地存储的模式设置并应用
  const savedTheme = localStorage.getItem('siteTheme');
  if (savedTheme === 'light') {
    $('body').addClass('light-mode');
  }

  // 切换按钮点击事件
  $("#light-mode").on('click', function() {
    // 切换body的light-mode类，并判断当前模式
    const isLight = $('body').toggleClass('light-mode').hasClass('light-mode');
    // 将当前模式存入localStorage，实现持久化
    localStorage.setItem('siteTheme', isLight ? 'light' : 'dark');
  });
});

3. 核心优势 #

• 全站生效：仅通过控制body的类就能批量切换所有元素样式，无需逐个操作DOM元素，代码更简洁易维护。
• 刷新保留设置：localStorage会将用户的模式选择存储在浏览器中，页面重新加载时自动读取并应用。
• 兼容性：localStorage支持所有现代浏览器，jQuery写法也能兼容绝大多数场景。

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