如何在 JavaScript 中偵測深色模式以設定條紋元素樣式？

在JavaScript 中偵測深色模式以與Stripe Elements API 一起使用

Windows 和macOS 現在提供深色模式，允許使用者調整介面顏色根據他們的喜好制定計劃。對於 CSS 樣式，@media (prefers-dark-interface) 可用於套用暗模式的特定規則。但是，這種方法不會直接影響使用 JavaScript 設計樣式的元件，例如使用 Stripe Elements API 建立的元件。

要在JavaScript 中偵測作業系統的首選配色方案，可以使用window.matchMedia 方法：

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

如果使用者在其係統上啟用了暗模式，此檢查將傳回true 。然後，您可以使用此資訊將自訂樣式動態套用到您的 Stripe Elements，確保與使用者首選的介面主題保持一致。

例如，如果您想在深色模式下將Stripe Elements 的文字顏色設定為白色啟用後，您可以使用以下程式碼片段：

const stripeElementStyles = {
  base: {
    color: window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? COLORS.white : COLORS.darkGrey,
    // ... other styles
  }
}

此外，如果您想要監視使用者配色方案首選項的變化，您可以使用addEventListener方法：

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
    const newColorScheme = event.matches ? 'dark' : 'light';
    // Update styles based on the new color scheme
});

透過實作這些技術，您可以確保您的Stripe Elements 無縫適應用戶首選的配色方案，無論其作業系統或裝置設定如何，都能提供一致且視覺上令人愉悅的體驗。

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