如何避免页面重载时CSS主题重置？

嘿，这个问题我碰到过好多次了——本质上就是要把用户的主题选择持久化存储，这样页面刷新、重载甚至关闭再打开时，都能记住用户的偏好。咱们用localStorage就能轻松搞定，它是浏览器提供的本地存储方案，数据会一直保留在用户设备上（除非主动清除）。

下面是具体实现步骤：

1. 调整HTML的CSS链接结构 #

首先给你的主题CSS链接加个唯一ID，方便JavaScript获取和修改它的href属性：

<!-- 默认加载浅色主题 -->
<link id="theme-style" rel="stylesheet" href="light.css">

<!-- 切换按钮 -->
<button id="light-btn">浅色主题</button>
<button id="dark-btn">深色主题</button>

2. 编写主题切换的JavaScript逻辑 #

我们需要做两件事：一是点击按钮时切换主题并保存选择，二是页面加载时读取保存的偏好并应用。

// 获取主题样式标签和按钮元素
const themeStyle = document.getElementById('theme-style');
const lightBtn = document.getElementById('light-btn');
const darkBtn = document.getElementById('dark-btn');

// 切换到浅色主题的函数
function setLightTheme() {
  themeStyle.href = 'light.css';
  localStorage.setItem('selectedTheme', 'light'); // 把选择存在本地存储
}

// 切换到深色主题的函数
function setDarkTheme() {
  themeStyle.href = 'dark.css';
  localStorage.setItem('selectedTheme', 'dark');
}

// 给按钮绑定点击事件
lightBtn.addEventListener('click', setLightTheme);
darkBtn.addEventListener('click', setDarkTheme);

// 页面加载时，读取本地存储的主题偏好并应用
window.addEventListener('DOMContentLoaded', () => {
  const savedTheme = localStorage.getItem('selectedTheme');
  // 如果有保存的主题，就应用它；没有就用默认的浅色
  if (savedTheme === 'dark') {
    setDarkTheme();
  } else {
    setLightTheme();
  }
});

3. 额外优化：适配系统主题偏好（可选） #

如果用户还没手动切换过主题，你可以检测系统的深色模式偏好，自动适配：

window.addEventListener('DOMContentLoaded', () => {
  const savedTheme = localStorage.getItem('selectedTheme');
  // 优先使用用户手动选择的主题
  if (savedTheme) {
    savedTheme === 'dark' ? setDarkTheme() : setLightTheme();
  } else {
    // 检测系统是否偏好深色模式
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    prefersDark ? setDarkTheme() : setLightTheme();
  }
});

这样处理后，不管用户刷新页面、返回还是重新打开网站，都会保持他们最后选择的主题啦。

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