如何使用jQuery或JavaScript实现夜间自动开启深色模式？

实现思路 #

1. 用户手动设置优先：如果用户之前手动切换过主题，直接使用localStorage中保存的设置，忽略自动时段规则
2. 自动时段判断：无用户设置时，根据当前时间自动切换：
   • 18:00 到次日 06:00 启用深色模式
   • 06:00 到 18:00 启用浅色模式
3. 页面加载即生效：页面初始化时自动应用对应主题
4. 定时自动更新（可选）：如果用户长时间打开页面，定时检查时间并切换主题（仅当无手动设置时）

修改后的完整代码 #

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js' type='text/javascript'></script>

<style>
:root{
--mmm-bg-color: #EADE5A;
--body:  #fff;
--text: #000; /* 补充默认文本颜色，避免浅色模式下文字不可见 */
}
html.is-dark{
--mmm-bg-color:#0057AF;
--body:  #000;
--text:  #fff;
}
body{
background-color: var(--body);
color: var(--text);  
}
.mmmcard {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 16px;
  text-align: center;
  background-color: var(--mmm-bg-color);
}
</style>

<a class='darkmode-toggle' href='javascript:;' role='button'> DARK / LIGHT </a>

<div class="mmmcard">
<h3>Card 1</h3></div>
<p style="font-size:15px; margin-top: 25px;"> 
This is an example of Dark Mode. I want to take it next level.
</p>

<script type='text/javascript'>
$(function() {
  const $html = $('html');
  const toggleBtn = $('.darkmode-toggle');

  // 判断当前是否应该启用深色模式（时段规则）
  function shouldUseDarkMode() {
    const hour = new Date().getHours();
    // 18点到次日6点启用深色
    return hour >= 18 || hour < 6;
  }

  // 应用主题
  function applyTheme(theme) {
    if (theme === 'dark') {
      $html.addClass('is-dark');
    } else {
      $html.removeClass('is-dark');
    }
  }

  // 初始化主题
  function initTheme() {
    const savedTheme = localStorage.themeColor;
    if (savedTheme) {
      // 优先使用用户手动设置的主题
      applyTheme(savedTheme);
    } else {
      // 无用户设置时，根据时间自动应用
      applyTheme(shouldUseDarkMode() ? 'dark' : 'light');
    }
  }

  // 手动切换主题
  toggleBtn.on('click', function() {
    const currentTheme = localStorage.themeColor;
    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
    localStorage.themeColor = newTheme;
    applyTheme(newTheme);
  });

  // 初始化主题
  initTheme();

  // 可选：每30分钟检查一次时间，自动切换（仅当无用户手动设置时）
  setInterval(() => {
    if (!localStorage.themeColor) {
      applyTheme(shouldUseDarkMode() ? 'dark' : 'light');
    }
  }, 30 * 60 * 1000);
});
</script>

关键代码说明 #

• shouldUseDarkMode()：通过new Date().getHours()获取当前小时，判断是否处于深色时段
• initTheme()：页面加载时先读取localStorage，有用户设置则用设置，无则自动判断
• 手动切换逻辑：点击按钮时切换主题并更新localStorage，确保下次加载时保留用户选择
• 定时检查：每30分钟检查一次时间，仅当用户未手动设置时自动切换，避免长时间打开页面未更新主题

额外优化 #

• 补充了:root中的默认--text颜色，避免浅色模式下文字颜色缺失
• 简化了原代码中的冗余变量判断，逻辑更清晰

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