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 元素

要將此檢測應用於Stripe 元素，請根據首選配色方案動態修改stripeElementStyles 物件。例如：

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

這可確保您的 Stripe Elements 根據使用者的作業系統偏好設定適合深色模式或淺色模式的樣式。

以上是JavaScript 如何偵測並將深色模式應用於條紋元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！