如何在 JavaScript 中偵測暗模式？

在JavaScript 中偵測深色模式

許多現代作業系統（例如Windows 和macOS）都提供深色模式作為選項，以增強使用者體驗並減少低光環境下的眼睛疲勞。作為開發人員，能夠檢測使用者作業系統的首選配色方案以提供無縫的使用者體驗是有益的。

深色模式的 CSS 媒體查詢

對於 CSS，@ media (prefers-dark-interface) 媒體查詢可用於應用專門針對暗模式的樣式。但是，當使用像 Stripe Elements 這樣利用 JavaScript 進行樣式設定的 API 時，需要採用不同的方法。

JavaScript 解決方案

要確定JavaScript 中作業系統的首選配色方案，您可以使用以下程式碼code:

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

此程式碼利用window.matchMedia() API 檢查使用者的瀏覽器是否支援媒體查詢以及「(prefers-color-scheme: dark)」媒體查詢是否符合。如果查詢匹配，則表示使用者在其作業系統上啟用了深色模式。

監控配色方案更改

如果您需要回應使用者配色方案首選項的更改，您可以使用 addEventListener() 方法來監聽媒體查詢上的事件。以下程式碼新增了一個事件監聽器，每當配色方案發生變化時，該事件監聽器都會觸發回調函數：

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

透過利用這些技術，您可以有效地偵測並回應使用者首選的配色方案，從而確保一致且一致的配色方案。無論使用者使用淺色模式或深色模式，都優化了使用者體驗。

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