如何在 JavaScript 中检测暗模式？

在 JavaScript 中检测深色模式

随着 Windows 和 macOS 中深色模式的引入，开发人员面临着适应 CSS 和 JavaScript 样式的挑战以匹配用户偏好的配色方案。本问题探讨了如何在 JavaScript 中检测深色模式，从而实现响应式配色方案调整。

媒体查询方法

对于 CSS，媒体查询提供了一个简单的解决方案：

@media (prefers-dark-interface) {
  color: white; background: black 
}

JavaScript 检测

用于创建支付元素的 Stripe Elements API 需要 JavaScript 中的颜色规范。要在此上下文中检测暗模式，需要利用 JavaScript API：

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

此查询检查是否支持 window.matchMedia API 并评估媒体查询字符串。如果为 true，则系统更喜欢深色模式。

监视配色方案变化

要处理配色方案的动态变化，可以订阅更改事件：

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

这可以根据用户偏好进行实时调整。

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