在 JavaScript 中检测深色模式

随着 Windows 和 macOS 等操作系统中深色模式的广泛采用，开发人员需要一种方法相应地调整他们的网络应用程序。当根据系统的首选配色方案动态自定义用户界面和样式元素时，就会出现此任务。

一种方法涉及使用 CSS 媒体查询来定位暗模式首选项。但是，在处理 JavaScript 样式的元素（例如使用 Stripe Elements API 创建的元素）时，需要更全面的解决方案。

要在 JavaScript 中以编程方式确定操作系统的配色方案，请利用以下技术：

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // Dark mode is active
}

登录后复制

此方法检查浏览器是否支持 window.matchMedia() API，然后使用媒体查询来验证系统的首选配色方案是否为dark。

要监视颜色方案首选项的更改，请使用以下代码：

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
    const newColorScheme = event.matches ? "dark" : "light";
});

登录后复制

此侦听器函数监视媒体查询中的任何修改，并提供指示新颜色的事件对象方案。然后，开发人员可以动态更新其应用程序以匹配当前的系统设置。

通过实施此技术，Web 应用程序可以无缝适应暗模式，为用户在不同系统和操作条件下提供一致且具有视觉吸引力的体验。

以上是如何在 JavaScript 中检测深色模式？的详细内容。更多信息请关注PHP中文网其他相关文章！