黑暗入侵，H5适配暗黑模式（Dark Mode）从入门到深入

2024-02-14 02:56:41

在当今数字化的时代，我们每天都要花费大量的时间与电子设备打交道。无论是手机、电脑还是平板电脑，这些设备都会发出刺眼的光线，对我们的眼睛造成伤害。暗黑模式的出现，为我们提供了一种有效的解决方案。

所谓暗黑模式，就是将原本明亮的界面改为以黑色或深色为背景，辅以浅色或低亮度文本的显示模式。这种模式可以有效地降低屏幕亮度，减轻眼睛的负担。

对于H5页面来说，适配暗黑模式并不是一件难事。我们可以通过CSS和JavaScript两种方式来实现。

1. CSS 实现

CSS是最简单的方法。我们可以通过修改background-color属性来改变页面的背景颜色。例如，我们可以将背景色设置为#000（黑色）或#333（深灰色）。

body {
  background-color: #000;
  color: #fff;
}

2. JavaScript 实现

JavaScript实现相对复杂，但功能更强大。我们可以通过window.matchMedia() API来检测用户是否启用了暗黑模式。如果启用了暗黑模式，我们就将页面切换为暗黑模式。

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
  if (e.matches) {
    // 用户启用了暗黑模式
    document.body.classList.add('dark');
  } else {
    // 用户没有启用暗黑模式
    document.body.classList.remove('dark');
  }
});