如何基于时间自动开启暗黑模式？附现有手动切换方案

针对你的需求，这里提供两种适配现有主题切换代码的实现方案：

方案一：基于时间段自动切换（夜间自动启用暗黑模式） #

该方案会根据当前系统时间自动切换主题，同时保留手动切换的交互功能，适合模拟“日间/夜间模式”的场景。

修改后的JavaScript代码 #

const themeToggler = document.getElementById('theme-toggler');

// 统一处理主题切换逻辑
function switchTheme(enableLightMode) {
  if (enableLightMode) {
    themeToggler.classList.add('fa-sun');
    document.body.classList.add('active');
  } else {
    themeToggler.classList.remove('fa-sun');
    document.body.classList.remove('active');
  }
}

// 根据当前时间判断并设置主题
function setThemeByCurrentTime() {
  const currentHour = new Date().getHours();
  // 自定义时间段：例如下午7点到次日早7点启用暗黑模式
  const isNightTime = currentHour >= 19 || currentHour < 7;
  switchTheme(!isNightTime);
}

// 页面加载时立即根据时间设置主题
document.addEventListener('DOMContentLoaded', setThemeByCurrentTime);

// 保留手动切换按钮功能
themeToggler.addEventListener('click', () => {
  const isLightMode = !themeToggler.classList.contains('fa-sun');
  switchTheme(isLightMode);
});

// 可选：每小时检查一次时间，避免跨时段后主题未自动更新
setInterval(setThemeByCurrentTime, 3600000);

方案二：基于定时器循环切换（固定间隔自动切换） #

如果需要按固定时间间隔循环切换主题（比如每5分钟切换一次），可以使用定时器实现：

修改后的JavaScript代码 #

const themeToggler = document.getElementById('theme-toggler');

// 切换主题的通用函数
function toggleTheme() {
  themeToggler.classList.toggle('fa-sun');
  document.body.classList.toggle('active');
}

// 页面初始化时设置默认主题（此处保持原有暗黑模式）
document.addEventListener('DOMContentLoaded', () => {
  toggleTheme(false);
});

// 保留手动切换功能
themeToggler.addEventListener('click', toggleTheme);

// 设置自动切换定时器：每5分钟（300000毫秒）切换一次
setInterval(toggleTheme, 300000);

原有基础代码（无需修改） #

CSS样式 #

body.active {
  --backgound: #f6f6f6;
  --backgound-overlay: rgba(255, 255, 255, 0.4);
  --font-colour: #202020
}
:root {
  --backgound: #202020;
  --backgound-overlay: rgba(32, 32, 32, 0.8);
  --font-colour: #ecbf1d
}
html {
  background: var(--backgound);
}
body {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
}

HTML结构 #

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet"/>

<button type="button" id="theme-toggler" class="fas fa-moon "></button>

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