Js中如何偵測使用者是否處於深色模式

介紹

您有沒有想過網站如何根據您的喜好在淺色和深色模式之間無縫切換？這不是魔法，而是現代網路技術的巧妙運用。在這篇文章中，我將揭示檢測用戶是否喜歡深色模式背後的簡單而強大的技術，以及如何使用這些資訊來增強網站上的用戶體驗。

了解暗模式檢測

隨著深色模式的流行，許多網站和應用程式現在都提供符合使用者係統偏好的主題。此功能是使用 JavaScript 中的 matchMedia API 實現的，它允許 Web 應用程式回應媒體查詢的變化，例如使用者的配色方案偏好。

它是如何運作的

matchMedia API

window.matchMedia 方法提供了一種評估媒體查詢並根據使用者偏好調整網站外觀的方法。若要檢查是否啟用了暗模式，您可以使用下列 JavaScript 函數：

雷雷

實際實施

index.html

雷雷

• updateTheme 函數：此函數檢查深色模式偏好並相應地更新類別。 即時更新：matchMedia 新增事件監聽器，用於偵測配色方案首選項的變化，並呼叫更新主題來即時調整外觀。

當您更改系統的配色方案時，網站將自動適應以反映您的偏好，而無需刷新頁面。

在 GitHub 上關注我 Avinash Tare

以上是Js中如何偵測使用者是否處於深色模式的詳細內容。更多資訊請關注PHP中文網其他相關文章！