使用JavaScript处理页面：解决网站主题跨页重置问题

嘿，这个问题我太熟了——不少刚开始做主题切换的开发者都会踩这个坑！核心原因就是你现在的主题切换只修改了当前页面的样式，但没有把用户的选择持久化存储下来，所以一刷新或者跳转到新页面，浏览器就“失忆”了，自动回到默认主题。

下面给你一套完整的解决方案，用最常用的localStorage就能搞定，步骤很清晰：

1. 切换主题时保存用户选择到localStorage #

当用户点击主题切换按钮时，除了切换当前页面的主题样式，还要把选中的主题值存到浏览器的localStorage里，这样即使页面刷新或跳转，这个值也不会丢失。

示例代码：

// 给主题切换按钮绑定点击事件
document.getElementById('theme-toggle-btn').addEventListener('click', function() {
  // 获取当前页面的主题（假设你用data-theme属性存在根元素上）
  const currentTheme = document.documentElement.getAttribute('data-theme');
  // 切换主题（比如light和dark互转）
  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
  
  // 应用新主题到当前页面
  document.documentElement.setAttribute('data-theme', newTheme);
  // 把新主题保存到localStorage
  localStorage.setItem('user-selected-theme', newTheme);
});

2. 页面加载时自动读取并应用保存的主题 #

每个页面加载完成后，先检查localStorage里有没有用户之前保存的主题，如果有就直接应用；如果没有，就用默认主题。

示例代码：

// 页面DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 从localStorage获取保存的主题，没有的话用默认值（比如'light'）
  const savedTheme = localStorage.getItem('user-selected-theme') || 'light';
  // 应用主题到当前页面
  document.documentElement.setAttribute('data-theme', savedTheme);
});

3. 配合CSS实现主题样式切换 #

确保你的CSS是通过data-theme属性来区分不同主题的，这样JS修改属性后样式会自动切换：

/* 默认light主题的变量 */
:root {
  --background-color: #ffffff;
  --text-color: #333333;
  --link-color: #2563eb;
}

/* dark主题的变量 */
:root[data-theme="dark"] {
  --background-color: #1f2937;
  --text-color: #f9fafb;
  --link-color: #60a5fa;
}

/* 全局样式使用变量 */
body {
  background-color: var(--background-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s; /* 加上过渡动画更流畅 */
}

a {
  color: var(--link-color);
}

可选补充：适配系统主题偏好 #

如果你想更友好，可以先检查用户的系统主题偏好，再用localStorage的设置覆盖它，比如：

document.addEventListener('DOMContentLoaded', function() {
  // 先检查localStorage有没有保存的主题
  const savedTheme = localStorage.getItem('user-selected-theme');
  // 如果没有，检查系统偏好的主题
  const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
  // 最终使用的主题：保存的优先，否则用系统偏好，再否则用默认
  const finalTheme = savedTheme || systemTheme || 'light';
  
  document.documentElement.setAttribute('data-theme', finalTheme);
});

其他可选方案 #

• 如果希望用户关闭浏览器后主题重置，可以用sessionStorage代替localStorage，用法完全一样，只是存储时效不同。
• 如果需要和后端同步主题（比如用户登录后所有设备同步），可以把主题选择存在cookie里，后端读取后在渲染页面时直接设置主题属性。

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