一、背景

隨著 iOS 13 的發(fā)布，深色模式（Dark Mode）越來(lái)越多地出現(xiàn)在大眾的視野中，支持深色模式已經(jīng)成為現(xiàn)代移動(dòng)應(yīng)用和網(wǎng)站的一個(gè)潮流，前段時(shí)間更是因?yàn)槲⑿诺倪m配再度引起熱議。深色模式不僅可以大幅減少電量的消耗，減弱強(qiáng)光對(duì)比,還能 提供更好的可視性和沉浸感。

如何切換深色模式

• iOS：“設(shè)置”–“顯示與亮度”–“外觀”，選擇“深色”
• Android：“系統(tǒng)設(shè)置”–“顯示”–“深色模式”。

二、問(wèn)題

如果系統(tǒng)設(shè)置了深色模式，H5頁(yè)面不做相應(yīng)的處理，會(huì)出現(xiàn)背景色沖突、深色文字顯示異常，深色圖標(biāo)顯示異常等一些顯示上的問(wèn)題。

所以，需要對(duì)深色模式進(jìn)行一些適配。

我嘗試了一些方案：

三、H5項(xiàng)目適配深色模式方案

1.聲明 color-scheme

color-scheme

有兩種方式。

1.1meta

在head中聲明<meta name="color-scheme" content="light dark"> ，聲明當(dāng)前頁(yè)面支持 light 和 dark 兩種模式，系統(tǒng)切換到深色模式時(shí)，瀏覽器默認(rèn)樣式也會(huì)切換到深色；

1.2CSS

下面的 css 同樣可以實(shí)現(xiàn)上面 meta 聲明的效果

:root {
    color-scheme: light dark;
}

注意：此聲明并非為頁(yè)面做自動(dòng)適配，只影響瀏覽器默認(rèn)樣式

更多信息可查閱 W3C 文檔 《CSS Color Adjustment Module Level 1》

2.通過(guò) CSS 媒體查詢

prefers-color-scheme

CSS 媒體特性用于檢測(cè)用戶是否有將系統(tǒng)的主題色設(shè)置為亮色或者暗色。

no-preference
表示系統(tǒng)未得知用戶在這方面的選項(xiàng)。在布爾值上下文中，其執(zhí)行結(jié)果為 false。

light
表示用戶已告知系統(tǒng)他們選擇使用淺色主題的界面。

dark
表示用戶已告知系統(tǒng)他們選擇使用暗色主題的界面。

:root {
    color-scheme: light dark;
    background: white;
    color: black;
}

@media (prefers-color-scheme: dark) {
    :root {
        background: black;
        color: white;
    }
}
//顏色較多的情況，建議使用CSS變量對(duì)顏色值進(jìn)行管理

3.圖片適配

利用picture+source標(biāo)簽，設(shè)置不同模式下的圖片 url。

HTML <picture>元素通過(guò)包含零或多個(gè) <source> 元素和一個(gè) <img> 元素來(lái)為不同的顯示/設(shè)備場(chǎng)景提供圖像版本。
瀏覽器會(huì)選擇最匹配的子 <source> 元素，如果沒(méi)有匹配的，就選擇 <img> 元素的 src 屬性中的URL。然后，所選圖像呈現(xiàn)在<img>元素占據(jù)的空間中。

<picture>
    <!-- 深色模式下的圖片 -->
    <source srcset="dark.jpg" media="(prefers-color-scheme: dark)" />
    <!-- 默認(rèn)模式下的圖片 -->
    <img src="light.jpg"/>
</picture>

4. JavaScript中判斷當(dāng)前模式&監(jiān)聽(tīng)模式變化

4.1matchMedia

Window 的matchMedia() 方法返回一個(gè)新的MediaQueryList 對(duì)象，表示指定的媒體查詢 (en-US)字符串解析后的結(jié)果。返回的MediaQueryList 可被用于判定Document是否匹配媒體查詢，或者監(jiān)控一個(gè)document 來(lái)判定它匹配了或者停止匹配了此媒體查詢。

4.2addListener()
MediaQueryList接口的addListener()方法向MediaQueryListener添加一個(gè)偵聽(tīng)器，該偵聽(tīng)器將運(yùn)行自定義回調(diào)函數(shù)以響應(yīng)媒體查詢狀態(tài)的更改。

JavaScript監(jiān)聽(tīng)判斷

const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')

function darkModeHandler() {
    if (mediaQuery.matches) {
        console.log('現(xiàn)在是深色模式')
    } else {
        console.log('現(xiàn)在是淺色模式')
    }
}

// 判斷當(dāng)前模式
darkModeHandler()
// 監(jiān)聽(tīng)模式變化
mediaQuery.addListener(darkModeHandler)

到此這篇關(guān)于詳解Html5項(xiàng)目適配系統(tǒng)深色模式方案總結(jié)的文章就介紹到這了,更多相關(guān)Html5深色模式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論