使用 JavaScript 检测系统主题偏好变化

JavaScript和 CSS 允许用户使用 CSS 的prefers-color-scheme媒体查询来检测用户主题偏好。如今，使用该偏好在给定网站上显示深色或浅色主题已成为标准。但是，如果用户在使用您的应用程序时改变了他们的偏好怎么办？

要使用 JavaScript 检测系统主题偏好更改，您需要结合matchMedia 、 prefers prefers-color-scheme和事件监听器：

 window.matchMedia('(prefers-color-scheme: dark)')       .addEventListener('change',({ 匹配 }) => {   如果（匹配）{     console.log("更改为暗模式！")   } 别的 {     console.log("更改为灯光模式！")   } }) 

当系统偏好发生变化时， matchMedia API 的change事件会通知您。您可以使用此事件实时自动更新站点的显示。

我喜欢这个 API 允许在系统级别检测用户偏好。满足用户需求是创造出色网络体验的重要部分！

使用 JavaScript 检测系统主题偏好更改的帖子首先出现在David Walsh 博客上。

原文： https://davidwalsh.name/detect-system-theme-preference-change-using-javascript