如何使用JavaScript檢測暗模式

使用JavaScript來檢測暗模式及檢測模式變更

使用CSS，我們可以使用prefers-color-scheme媒體查詢檢測暗模式。

但是… 如果我們必須使用JavaScript呢？最近我遇到了這個問題，因為我有一些JavaScript代碼，該代碼會將圖像添加到頁面上，但我想根據亮/暗模式顯示不同的圖像。

以下是我們可以實現的方法。

首先，檢測matchMedia對象是否存在（否則瀏覽器不支持暗模式，您可以回退到亮模式）。

然後，使用以下代碼檢查是否為暗模式：

window.matchMedia('(prefers-color-scheme: dark)').matches

如果啟用了暗模式，它將返回true。

以下是一個完整的示例，如果為暗模式則反轉圖像的顏色：

const img = document.querySelector('#myimage')
if (window.matchMedia &&
 window.matchMedia('(prefers-color-scheme: dark)').matches) {
 img.style.filter="invert(100%)";
}

然而，還存在一個問題：如果使用者在使用我們的網站時更改了模式該怎麼辦？

我們可以使用事件監聽器來檢測模式的變更，像這樣：

window.matchMedia('(prefers-color-scheme: dark)')
 .addEventListener('change', event => {
 if (event.matches) {
 //暗模式
 } else {
 //亮模式
 }
})