Detect the dark mode【检测黑暗模式】

Modern operating systems such as macOS, Windows 10 allow users to choose the appearance they would like to see in all applications.

【现代操作系统如macOS和Windows 10都允许用户选择他们希望在所有应用程序中看到的外观】

The following screenshot is taken from the General setting pane in macOS:

【以下截图来自macOS中的“常规”设置窗格】

Set the dark mode in macOS

The option can be detected by looking at the prefers-color-scheme media query.

It can be one of the following values:

• light: User would like to see the page in the light mode
• dark: User would like to see the page in the dark mode
• no-preference: The system doesn't know about the user preferences

【通过查看prefers-color-scheme媒体查询可以检测到该选项。
它可以是以下值之一：
“light”：用户希望在浅色模式下查看页面
“dark”：用户希望在黑暗模式下查看页面
“无偏好”：系统不知道用户的偏好

】

By checking against this media query value, we can determine if the user prefers the dark mode or not:

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

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