js檢測瀏覽器夜晚/黑暗（dark）模式方法
更新時間：2022年10月15日 15:55:11 投稿：wdc
這篇文章主要介紹了js檢測瀏覽器夜晚（dark）模式方法,需要的朋友可以參考下
使用CSS，我們可以使用preferreds-color-scheme媒體查詢來檢測暗模式。
但是..如果我們必須使用JavaScript怎么辦？ 我最近偶然發(fā)現(xiàn)了這個問題，因為我有一些JavaScript代碼向頁面添加了圖像，但是我想基于明暗模式顯示不同的圖像。
這是俺的解決辦法。
首先，檢測matchMedia對象是否存在（否則瀏覽器不支持夜晚模式（dark mode），您可以退回到白天模式（light mode））。
使用以下命令檢查其是否為夜晚模式（dark mode）：
window.matchMedia('(prefers-color-scheme: dark)').matches如果啟用了暗模式，則將返回true。
這是一個完整的示例，如果圖像為夜晚模式（dark mode），我將反轉(zhuǎn)圖像的顏色：
const img = document.querySelector('#myimage')
if (window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches) {
img.style.filter="invert(100%)";
}但是，存在一個小問題：如果用戶在使用我們的網(wǎng)站時更改了模式怎么辦？
我們可以使用事件偵聽器檢測模式更改，實現(xiàn)代碼如下所示：
window.matchMedia('(prefers-color-scheme: dark)')
.addEventListener('change', event => {
if (event.matches) {
//dark mode
} else {
//light mode
}
})更多關(guān)于js檢測瀏覽器夜晚（dark）模式方法請查看下面的相關(guān)鏈接
相關(guān)文章
JavaScript中的prototype.bind()方法介紹
在JavaScript中，我們經(jīng)常用到函數(shù)綁定，而當你需要在另一個函數(shù)中保持this上下文時，使用Function.prototype.bind()會很方便2014-04-04
Three.js是一個偉大的開源WebGL庫,WebGL允許JavaScript操作GPU，在瀏覽器端實現(xiàn)真正意義的3D,本文介紹下THREE.JS基礎(chǔ)/瀏覽器支持/設(shè)置場景/構(gòu)建網(wǎng)格表面/材質(zhì)/光/渲染循環(huán)/通用的對象屬性等等，感興趣的朋友可以了解下哦2013-01-01
這篇文章主要介紹了JavaScript高級之詞法作用域和作用域鏈，有需要的朋友可以參考一下2013-12-12
JavaScript中指定函數(shù)名稱的相關(guān)方法
這篇文章主要介紹了JavaScript中指定函數(shù)名稱的相關(guān)方法,是JS入門學習中的基礎(chǔ)知識,需要的朋友可以參考下2015-06-06
javascript學習筆記之Date 日期類型介紹，需要的朋友可以參考下2012-06-06
JavaScript_object基礎(chǔ)入門(必看篇)
下面小編就為大家?guī)硪黄狫avaScript_object基礎(chǔ)入門(必看篇)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
本文是學習筆記系列的第一篇，跟以前一樣，介紹些基礎(chǔ)知識，包括js基本概念、 JScript 的變量、js的數(shù)據(jù)類型、3.JScript 的運算符、js流程控制、js函數(shù)。有需要的朋友可以參考下2014-09-09
JavaScript中isPrototypeOf、instanceof和hasOwnProperty函數(shù)的用法詳解
本文詳細講解了JavaScript中isPrototypeOf、instanceof和hasOwnProperty函數(shù)的用法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
一篇文章帶你搞懂JavaScript的變量與數(shù)據(jù)類型
這篇文章主要為大家介紹了JavaScript的變量與數(shù)據(jù)類型，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
本文通過介紹WiFi無線技術(shù)來達成一種網(wǎng)絡(luò)延申目的，具體知識點請看下文2021-08-08