实现站点明暗模式本地存储时localStorage应放置在代码的什么位置？

你的整体实现思路没有问题，只需要补充两处localStorage相关逻辑即可实现状态持久化：

• 主题切换时把最新状态写入localStorage存储
• 页面初始化时读取存储的状态，同步页面主题和开关的选中状态

修改后的完整代码如下：

const checkbox = document.getElementById('checkbox');

// 页面初始化阶段读取本地存储的主题配置
const savedTheme = localStorage.getItem('siteTheme');
// 有存储的配置就直接应用，没有的话默认用亮色模式
if (savedTheme === 'dark') {
  document.body.classList.add('dark');
  checkbox.checked = true;
}

checkbox.addEventListener('change',()=> {
  // 切换主题类，返回值表示当前是否为暗色模式
  const isDark = document.body.classList.toggle('dark');
  // 把最新状态存入localStorage
  localStorage.setItem('siteTheme', isDark ? 'dark' : 'light');
});

如果需要在用户没有手动切换过主题时，默认匹配系统的暗色模式偏好，可以把初始化逻辑调整为：

const savedTheme = localStorage.getItem('siteTheme');
const prefersSystemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (savedTheme === 'dark' || (!savedTheme && prefersSystemDark)) {
  document.body.classList.add('dark');
  checkbox.checked = true;
}

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