暗模式

使用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 { //亮模式 } })