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中文網其他相關文章！
