Web 开发者看过来：如何适配深色模式？

2023-10-29 01:55:30

深色模式在 Web 端的适配方案

随着 Mac OS、iOS 系统发布了深色外观，手机 APP 的深色模式开始出现在了大众视野，越来越多的原生 APP 为增强体验去适配 Dark Mode 深色模式。起点读书 APP 也在近期进行了适配，包括原生页面以及内嵌Web 端的页面。

那我们应该如何适配，才能满足既要适配深色模式又要保证代码的简洁可读性呢？

首先，我们需要知道深色模式下的颜色是怎么样的，一般来说，深色模式下的颜色都是以黑色或深灰色为背景色，而文字颜色则是白色或浅灰色。

基于这个原理，我们可以使用 CSS 来适配深色模式。

我们可以通过 prefers-color-scheme 媒体查询来检测用户当前是否启用了深色模式，然后根据用户的选择来加载不同的 CSS 样式。

@media (prefers-color-scheme: dark) {
  body {
    background-color: #000;
    color: #fff;
  }
}

这样，当用户启用深色模式时，我们的网站就会自动切换到深色模式的样式。

当然，我们也可以使用 JavaScript 来适配深色模式。

我们可以通过 matchMedia() 方法来检测用户当前是否启用了深色模式，然后根据用户的选择来更改网站的样式。

const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');

mediaQuery.addEventListener('change', () => {
  if (mediaQuery.matches) {
    document.body.classList.add('dark-mode');
  } else {
    document.body.classList.remove('dark-mode');
  }
});

这样，当用户启用深色模式时，我们的网站就会自动切换到深色模式的样式。

除了使用 CSS 和 JavaScript 来适配深色模式外，我们还可以使用一些第三方库来帮助我们实现深色模式的适配。

例如，我们可以使用 darkmode-js 库来实现深色模式的适配。