一、背景
隨著 iOS 13 的發布，深色模式（Dark Mode）越來越多地出現在大眾的視野中，支持深色模式已經成為現代移動應用和網站的一個潮流，前段時間更是因為微信的適配再度引起熱議。深色模式不僅可以大幅減少電量的消耗，減弱強光對比,還能 提供更好的可視性和沉浸感。
如何切換深色模式
- iOS：“設置”–“顯示與亮度”–“外觀”，選擇“深色”
- Android：“系統設置”–“顯示”–“深色模式”。
二、問題
如果系統設置了深色模式，H5頁面不做相應的處理，會出現背景色沖突、深色文字顯示異常，深色圖標顯示異常等一些顯示上的問題。
所以，需要對深色模式進行一些適配。
我嘗試了一些方案：
三、H5項目適配深色模式方案
1.聲明 color-scheme
color-scheme
有兩種方式。
1.1meta
在head中聲明<meta name="color-scheme" content="light dark"> ，聲明當前頁面支持 light 和 dark 兩種模式，系統切換到深色模式時，瀏覽器默認樣式也會切換到深色；
1.2CSS
下面的 css 同樣可以實現上面 meta 聲明的效果
:root {
color-scheme: light dark;
}
注意：此聲明并非為頁面做自動適配，只影響瀏覽器默認樣式
更多信息可查閱 W3C 文檔 《CSS Color Adjustment Module Level 1》
2.通過 CSS 媒體查詢
prefers-color-scheme
CSS 媒體特性用于檢測用戶是否有將系統的主題色設置為亮色或者暗色。
no-preference
表示系統未得知用戶在這方面的選項。在布爾值上下文中，其執行結果為 false。
light
表示用戶已告知系統他們選擇使用淺色主題的界面。
dark
表示用戶已告知系統他們選擇使用暗色主題的界面。
:root {
color-scheme: light dark;
background: white;
color: black;
}
@media (prefers-color-scheme: dark) {
:root {
background: black;
color: white;
}
}
//顏色較多的情況，建議使用CSS變量對顏色值進行管理
3.圖片適配
利用picture+source標簽，設置不同模式下的圖片 url。
HTML <picture>元素通過包含零或多個 <source> 元素和一個 <img> 元素來為不同的顯示/設備場景提供圖像版本。
瀏覽器會選擇最匹配的子 <source> 元素，如果沒有匹配的，就選擇 <img> 元素的 src 屬性中的URL。然后，所選圖像呈現在<img>元素占據的空間中。
<picture>
<!-- 深色模式下的圖片 -->
<source srcset="dark.jpg" media="(prefers-color-scheme: dark)" />
<!-- 默認模式下的圖片 -->
<img src="light.jpg"/>
</picture>
4. JavaScript中判斷當前模式&監聽模式變化
4.1matchMedia
Window 的matchMedia() 方法返回一個新的MediaQueryList 對象，表示指定的媒體查詢 (en-US)字符串解析后的結果。返回的MediaQueryList 可被用于判定Document是否匹配媒體查詢，或者監控一個document 來判定它匹配了或者停止匹配了此媒體查詢。
4.2addListener()
MediaQueryList接口的addListener()方法向MediaQueryListener添加一個偵聽器，該偵聽器將運行自定義回調函數以響應媒體查詢狀態的更改。
JavaScript監聽判斷
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
function darkModeHandler() {
if (mediaQuery.matches) {
console.log('現在是深色模式')
} else {
console.log('現在是淺色模式')
}
}
// 判斷當前模式
darkModeHandler()
// 監聽模式變化
mediaQuery.addListener(darkModeHandler)
到此這篇關于詳解Html5項目適配系統深色模式方案總結的文章就介紹到這了,更多相關Html5深色模式內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
