如何为阅读类网站实现晚7点至早6点自动夜间模式？

嘿，这个需求太贴合阅读类网站的用户体验了！我来给你一步步拆解实现方法，分CSS样式定义和JavaScript逻辑控制两部分，简单易上手：

推荐用CSS变量来统一管理颜色，这样切换模式时只需要修改变量值，代码更简洁易维护，还能加平滑过渡提升体验：

/* 基础浅色模式的颜色变量 */
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --link-color: #0066cc;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  /* 切换时的平滑过渡动画 */
  transition: background-color 0.3s ease, color 0.3s ease;
}

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

/* 深色模式的颜色覆盖 */
body.dark {
  --bg-color: #1a1a1a;
  --text-color: #e0e0e0;
  --link-color: #66b3ff;
}

接下来写JavaScript代码，核心是判断当前时间是否在晚7点到早6点之间，然后给body添加/移除dark类。还要处理页面加载时的初始化，以及定时检查避免时间临界点没切换：

// 判断当前是否处于夜间时段（19:00 - 06:00）
function isNightTime() {
  const now = new Date();
  const currentHour = now.getHours();
  // 晚7点及以后，或者早6点以前
  return currentHour >= 19 || currentHour < 6;
}

// 切换深色/浅色模式
function toggleDarkMode(enableDark) {
  if (enableDark) {
    document.body.classList.add('dark');
  } else {
    document.body.classList.remove('dark');
  }
}

// 页面加载时初始化模式，并且定时检查更新
function initAutoDarkMode() {
  // 页面刚加载就判断一次
  toggleDarkMode(isNightTime());
  
  // 每小时检查一次（3600000毫秒=1小时），确保时间到点自动切换
  setInterval(() => {
    toggleDarkMode(isNightTime());
  }, 3600000);
}

// 等页面DOM加载完成后执行初始化
document.addEventListener('DOMContentLoaded', initAutoDarkMode);

如果想让用户能手动覆盖自动模式（比如白天也想切深色），可以结合localStorage保存用户偏好，优先使用用户的选择：

// 读取用户手动设置的模式
function getUserPreferredMode() {
  return localStorage.getItem('darkMode');
}

// 保存用户手动设置的模式
function setUserPreferredMode(mode) {
  localStorage.setItem('darkMode', mode);
}

// 改进后的初始化函数
function initDarkMode() {
  const userMode = getUserPreferredMode();
  if (userMode !== null) {
    // 优先使用用户手动设置的模式
    toggleDarkMode(userMode === 'enabled');
  } else {
    // 没有用户设置时，自动按时间判断
    toggleDarkMode(isNightTime());
  }
  
  // 定时检查，但只在用户没有手动设置时生效
  setInterval(() => {
    if (getUserPreferredMode() === null) {
      toggleDarkMode(isNightTime());
    }
  }, 3600000);
}

// 给手动切换按钮加事件监听（假设按钮id是darkModeToggle）
document.getElementById('darkModeToggle')?.addEventListener('click', () => {
  const isDark = document.body.classList.contains('dark');
  toggleDarkMode(!isDark);
  setUserPreferredMode(!isDark ? 'enabled' : 'disabled');
});

如果想进一步优化体验，可以结合系统的深色模式偏好（比如用户系统设置了深色模式），在CSS里加个媒体查询：

/* 如果系统设置了深色模式，且没有手动切换为浅色时，自动用深色 */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --bg-color: #1a1a1a;
    --text-color: #e0e0e0;
    --link-color: #66b3ff;
  }
}

这样一套下来，你的阅读网站就能在每天晚7点自动切换到深色背景，早6点切回浅色，同时还能兼顾用户的手动选择和系统偏好，完美适配阅读场景～

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