macOS、Windows 10 等现代操作系统允许用户选择他们希望在所有应用程序中看到的外观。

以下屏幕截图取自 macOS 的常规设置：

在 macOS 中设置暗模式

可以通过查看 prefers-color-scheme 媒体查询来检测该选项。

它可以是以下值之一：

  • light：用户希望以浅色模式查看页面
  • dark：用户希望在黑暗模式下查看页面
  • no-preference：系统不知道用户的偏好

通过检查此媒体查询值，我们可以确定用户是否喜欢 drak 模式：

const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches