H5項目適配系統深色模式方案

1、背景

隨着 iOS 13 的發佈，深色模式（Dark Mode）愈來愈多地出如今大衆的視野中，支持深色模式已經成爲現代移動應用和網站的一個潮流，前段時間更是由於微信的適配再度引發熱議。深色模式不只能夠大幅減小電量的消耗，減弱強光對比,還能 提供更好的可視性和沉浸感。

如何切換深色模式

• iOS：「設置」--「顯示與亮度」--「外觀」，選擇「深色」

• Android：「系統設置」--「顯示」--「深色模式」。

2、問題

若是系統設置了深色模式，H5頁面不作相應的處理，會出現背景色衝突、深色文字顯示異常，深色圖標顯示異常等一些顯示上的問題。

因此，須要對深色模式進行一些適配。

我嘗試了一些方案：

3、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)
複製代碼

嵌入app的H5頁面

若是是嵌入app中的H5頁面，還得相應的WebView提供支持，否則利用媒體查詢可能會獲取不到正確的結果。