介紹

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

了解暗模式檢測

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

它是如何運作的

matchMedia API

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

// Check if the user prefers dark mode
function isDarkMode() {
    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
}

實際實施

index.html

    
Hello, World!

    
    

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

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

在 GitHub 上關注我 Avinash Tare