如何保存暗黑模式切换设置？解决页面刷新/跳转后恢复默认问题

数据老陈

2026-8-5

解决暗黑模式设置持久化的前端方案

不用折腾数据库，前端用localStorage就能轻松保存用户的主题偏好，页面刷新或跳转后也不会丢失。具体修改如下：

1. 修改切换按钮逻辑，同步保存状态

把你原来的点击事件代码改成这样，每次切换主题时，将当前状态存入localStorage：

const body = document.querySelector('body');
const toggleBtn = document.querySelector('#你的按钮选择器'); // 替换成你实际的按钮选择器

toggleBtn.onclick = function() {
  // 切换主题类
  body.classList.toggle('dark-layout');
  // 将当前主题状态存入localStorage
  localStorage.setItem('darkMode', body.classList.contains('dark-layout'));
};

2. 页面加载时自动恢复主题设置

在页面初始化阶段（比如放在脚本最开头，或绑定DOM加载完成事件），读取localStorage里的状态，自动应用对应主题：

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  const body = document.querySelector('body');
  // 读取存储的主题设置，默认是浅色模式
  const isDarkMode = localStorage.getItem('darkMode') === 'true';
  
  if (isDarkMode) {
    body.classList.add('dark-layout');
  }

  // 可选优化：首次访问时自动跟随系统主题
  if (!localStorage.getItem('darkMode')) {
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    if (prefersDark) {
      body.classList.add('dark-layout');
      localStorage.setItem('darkMode', 'true');
    }
  }
});