让你的网站穿上夜晚的华服：夜间模式开关组件

2024-02-13 06:17:51

夜间模式的魅力

对于在光线较暗的环境中浏览的用户来说，夜间模式提供了许多好处：

减少眼睛疲劳： 通过降低屏幕亮度，夜间模式可以减轻眼睛在长时间盯着屏幕时产生的压力。
提高可读性： 夜间模式通常使用深色背景和浅色文本，这可以提高文本的可读性，特别是对于患有视觉障碍的人。
改善睡眠质量： 研究表明，接触蓝光会抑制褪黑激素的产生，而褪黑激素是帮助我们入睡的激素。夜间模式通过减少蓝光照射，可以改善睡眠质量。

CSS解决方案：简单而优雅

实现夜间模式的最简单方法是使用CSS。以下代码演示了如何使用媒体查询在夜间模式和白天模式之间切换：

/* 白天模式 */
body {
  background-color: #ffffff;
  color: #000000;
}

/* 夜间模式 */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #000000;
    color: #ffffff;
  }
}

这种方法的优点是简单易行，但它依赖于浏览器的支持，并且无法提供切换夜间模式的按钮。

JavaScript + CSS：灵活且强大

通过将JavaScript与CSS结合使用，您可以创建更灵活且可定制的夜间模式组件。以下代码演示了如何使用JavaScript在用户点击按钮时切换夜间模式：

<button id="night-mode-toggle">切换夜间模式</button>

<script>
  const toggleButton = document.getElementById('night-mode-toggle');

  toggleButton.addEventListener('click', () => {
    document.body.classList.toggle('night-mode');
  });
</script>

<style>
  body {
    transition: background-color 0.5s, color 0.5s;
  }

  .night-mode {
    background-color: #000000;
    color: #ffffff;
  }
</style>