如何使用JavaScript根据用户时间自动切换浅色/深色主题？

我们可以在原有手动切换的基础上，添加时间自动判断逻辑，同时保留用户手动选择的优先级（即用户手动切换后，优先使用用户设置的主题；未手动设置时，才根据时间自动切换）。以下是修改后的完整实现：

1. 核心逻辑说明 #

• 自定义深色模式的时间段（示例为18:00 - 次日6:00，可按需调整）
• 页面初始化时，优先读取用户手动保存的主题；无保存记录时，根据当前时间自动设置
• 可选定时检查机制：每小时自动校验时间，更新主题（仅当用户未手动设置时生效）
• 保留原手动切换功能，用户切换后将覆盖自动设置逻辑

2. 修改后的JavaScript代码 #

// 设定主题的核心函数（保留原有逻辑）
function setTheme(themeName) {
  localStorage.setItem('theme', themeName);
  document.documentElement.className = themeName;
}

// 根据当前时间判断应使用的主题
function getThemeByTime() {
  const currentHour = new Date().getHours();
  // 自定义深色模式时间段：18点到次日6点
  return currentHour >= 18 || currentHour < 6 ? 'theme-dark' : 'theme-light';
}

// 手动切换主题函数（保留原有逻辑）
function toggleTheme() {
  if (localStorage.getItem('theme') === 'theme-dark') {
    setTheme('theme-light');
  } else {
    setTheme('theme-dark');
  }
}

// 页面初始化时设置主题
(function () {
  const savedTheme = localStorage.getItem('theme');
  if (savedTheme) {
    // 优先使用用户手动保存的主题
    setTheme(savedTheme);
    document.getElementById('dark-light-mode').checked = savedTheme === 'theme-light';
  } else {
    // 无保存记录时，根据时间自动设置
    const autoTheme = getThemeByTime();
    setTheme(autoTheme);
    document.getElementById('dark-light-mode').checked = autoTheme === 'theme-light';
  }
})();

// 定时检查时间，自动更新主题（仅当用户未手动设置时）
function autoUpdateTheme() {
  const savedTheme = localStorage.getItem('theme');
  if (!savedTheme) {
    const currentTheme = document.documentElement.className;
    const targetTheme = getThemeByTime();
    if (currentTheme !== targetTheme) {
      setTheme(targetTheme);
      document.getElementById('dark-light-mode').checked = targetTheme === 'theme-light';
    }
  }
}
// 每小时执行一次检查（3600000毫秒 = 1小时）
setInterval(autoUpdateTheme, 3600000);

3. HTML控件（无需修改） #

<label id="switch" class="switch">
  <input type="checkbox" onchange="toggleTheme()" id="dark-light-mode">
  <span class="slider round"></span>
</label>

关键细节调整 #

• 深色模式时间段可修改getThemeByTime函数中的时间阈值，比如改成currentHour >= 20 || currentHour < 7
• 定时检查间隔可自行调整，比如每30分钟检查一次（将3600000改为1800000）
• 用户手动切换主题后，localStorage会保存选择记录，后续页面加载将优先使用该记录，直到用户再次切换或清除本地存储

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