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中文网其他相关文章！
