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