如何在 JavaScript 中偵測深色模式？

在JavaScript 中偵測深色模式

隨著Windows 和macOS 等作業系統中深色模式的廣泛採用，開發人員需要一種方法來相應地調整他們的網頁應用程式。當根據系統的首選配色方案動態自訂使用者介面和樣式元素時，就會出現此任務。

一種方法涉及使用 CSS 媒體查詢來定位暗模式首選項。但是，在處理 JavaScript 樣式的元素（例如使用 Stripe Elements API 建立的元素）時，需要更全面的解決方案。

要在JavaScript 中以程式設計方式確定作業系統的配色方案，請利用以下技術：

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

此方法檢查瀏覽器是否支援window.matchMedia() API，然後使用媒體查詢來驗證系統的首選配色方案是否為dark。

要監視顏色方案首選項的更改，請使用以下程式碼：

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

此偵聽器函數監視媒體查詢中的任何修改，並提供指示新顏色的事件對象方案。然後，開發人員可以動態更新其應用程式以符合目前的系統設定。

透過實施此技術，Web 應用程式可以無縫適應暗模式，為使用者在不同系統和操作條件下提供一致且具有視覺吸引力的體驗。

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