JavaScript 如何检测并将深色模式应用于条纹元素？

在 JavaScript 中检测深色模式

Windows 和 macOS 等现代操作系统提供深色模式选项。虽然 CSS 提供了一种使用 @media (prefers-dark-interface) 检测深色模式偏好的方法，但 JavaScript 开发人员需要替代解决方案。

JavaScript 检测

检测JavaScript 中的首选配色方案，您可以使用 window.matchMedia() API。以下代码检查深色模式：

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

观察更改

您还可以监听首选配色方案的更改：

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

应用于条纹元素

应用此检测到 Stripe Elements，根据首选配色方案动态修改 stripeElementStyles 对象。例如：

if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    stripeElementStyles.base.color = COLORS.lightGrey;
} else {
    stripeElementStyles.base.color = COLORS.darkGrey;
}

这可确保您的 Stripe Elements 根据用户的操作系统偏好设置适合深色模式或浅色模式的样式。

以上是JavaScript 如何检测并将深色模式应用于条纹元素？的详细内容。更多信息请关注PHP中文网其他相关文章！