背景

暗黑主題下，用戶可以選擇采用深色的系統(tǒng)范圍外觀而不是淺色外觀。在暗黑模式下，系統(tǒng)對所有窗口，視圖，菜單和控件采用較暗的調(diào)色板。谷歌的 Gmail 和 Chrome 瀏覽器、聊天工具 slack、telegram、Edge 瀏覽器和 Office 移動(dòng)版 App 都陸續(xù)支持 darkmode 了。

?暗黑模式的優(yōu)勢

• 可大幅減少耗電量(具體取決于設(shè)備的屏幕技術(shù))。

• 為弱視以及對強(qiáng)光敏感的用戶提高可視性。

• 讓所有人都可以在光線較暗的環(huán)境中更輕松地使用設(shè)備。

系統(tǒng)兼容情況

• macOS 10.14 引入了 darkmode

• ios13 2019 年 3 月發(fā)布的 ios13 版本加入了 darkmode

• Android 10 (API 級別 29) 及更高版本中提供深色主題背景

• window10 2018.10.10

h5 適配暗黑模式

先看一下暗黑模式和非暗黑的模式對比圖：

那么如何來實(shí)現(xiàn)暗黑呢？01使用js動(dòng)態(tài)控制css類

暗黑的需求其實(shí)可以分為兩個(gè)部分：初始化和切換系統(tǒng)暗黑模式，兩種情況都是前端和webview側(cè)直接交互，初始化時(shí)前端調(diào)用方法主動(dòng)獲取當(dāng)前的暗黑狀態(tài)，切換系統(tǒng)暗黑模式時(shí)，webview調(diào)用前端的一個(gè)方法，當(dāng)用戶將收銀臺切到后臺，更改系統(tǒng)的深色淺色模式(暗黑模式)再回到收銀臺的時(shí)候，頁面也會(huì)隨之變化，所以這就要求我們在頁面不刷新的情況下實(shí)時(shí)的更改頁面樣式。

• 如何在頁面不刷新的情況下實(shí)時(shí)更改頁面樣式？

其實(shí)無非就是更改 css，使用js進(jìn)行css變換！！！用戶切換系統(tǒng)深色淺色模式的時(shí)候客戶端會(huì)調(diào)用我們的一個(gè)方法，這個(gè)方法當(dāng)用戶切換系統(tǒng)暗黑模式的時(shí)候就會(huì)調(diào)用，因此可能會(huì)被調(diào)用很多次，我們可以在這個(gè)方法里面進(jìn)行操作，去動(dòng)態(tài)更改css。?

Eg: // 準(zhǔn)備回調(diào)用的函數(shù) _iosCallBack:function() { window.getDarkInfo = function(jsonString) { // 根據(jù)jsonString ，do something ……… }; } // 初始化 _initFinishDarkModel: function() { var params = { "routerURL":"router://JDWebViewBusinessModule/getJDAppearanceState", "callBackName":"getDarkInfo",//h5自定義的函數(shù)名稱，optional,可選參數(shù) "callBackId":"finish"//h5自定義的參數(shù)，用于區(qū)分同一個(gè)頁面，optional,可選參數(shù) } if(window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.JDAppUnite && window.webkit.messageHandlers.JDAppUnite.postMessage) { window.webkit.messageHandlers.JDAppUnite.postMessage({ 'method': 'callSyncRouterModuleWithParams', 'params': JSON.stringify(params) }); } }, // ios用戶切換系統(tǒng)暗黑模式，只有用戶手動(dòng)切換的時(shí)候會(huì)調(diào)用 _changeSystemDarkSkin: function() { window.jdAppearanceDidChangedNotification = function(state) { if (state == 1) { // 系統(tǒng)暗黑模式 // do something…….. }else{ // 系統(tǒng)明亮模式 // do something…….. } }; },

實(shí)際上無論初始化時(shí)還是動(dòng)態(tài)切換系統(tǒng)暗黑模式我們都使用js動(dòng)態(tài)添加css類的方式控制暗黑與否就可以完美的解決問題。當(dāng)然我們完全可以將對暗黑的操作抽出一個(gè)darkModal()的方法出來，這樣只要是需要設(shè)置暗黑我們調(diào)用該方法就可以了。

02媒體查詢

通過媒體查詢@media(prefers-color-scheme: dark)來適配

? ? Eg:

• prefers-color-scheme

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

1、語法：

? ? no-preference

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

? ? light

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

? ? dark

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

Eg: .day { background: #eee; color: black; } .night { background: #333; color: white; } @media (prefers-color-scheme: dark) { .day.dark-scheme { background: #333; color: white; } .night.dark-scheme { background: black; color: #ddd; } } @media (prefers-color-scheme: light) { .day.light-scheme { background: white; color: #555; } .night.light-scheme { background: #eee; color: black; } } .day, .night { display: inline-block; padding: 1em; width: 7em; height: 2em; vertical-align: middle; }

2、兼容性(can I use)

注意：prefers-color-scheme 在 W3C 規(guī)范上處于 level5 的草案，在生產(chǎn)環(huán)境還需要針對不同瀏覽器做一些向下兼容處理。

3、瀏覽器支持檢測

Window.matchMedia()：Window 的matchMedia() 方法返回一個(gè)新的MediaQueryList 對象，表示指定的媒體查詢字符串解析后的結(jié)果。返回的MediaQueryList 可被用于判定Document是否匹配媒體查詢，或者監(jiān)控一個(gè)document 來判定它匹配了或者停止匹配了此媒體查詢, 該方法接受一個(gè)被用于媒體查詢解析的字符串作為參數(shù)。

Eg: if ( window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ) { // dark mode do something }

注意：可以在can I use上檢測一下該方法的兼容性

4、擴(kuò)展

更多的媒體查詢適配！

根據(jù)Specification [drafts.csswg.org]W3C 草案中的說明，通過媒體查詢和 js matchMedia Api 不僅可以用來適配 darkmode。還可以通過下面的 key 來適配更多的場景：

• inverted-colors：反轉(zhuǎn)色

• prefers-reduced-motion：減少動(dòng)畫

• prefers-reduced-transparency：透明度

• prefers-contrast：對比度

• forced-colors：指定顏色

這些屬性都可以通過媒體查詢來做一定的兼容。

總結(jié)

無論哪種方式，殊途同歸，都是要對css“手術(shù)”， 并且尤其要關(guān)注到iphoneX安全區(qū)域的問題，暗黑設(shè)置樣式的時(shí)候要對body進(jìn)行處理，否則底部會(huì)有空白的區(qū)域。實(shí)際開發(fā)中的場景會(huì)更復(fù)雜，會(huì)有更多的業(yè)務(wù)邏輯耦合進(jìn)來，收銀臺H5在實(shí)現(xiàn)暗黑模式使用的方案一，也就是js動(dòng)態(tài)控制css類，沒有任何兼容性問題，方案二的話存在兼容性問題，后面還是有很大的發(fā)展空間的，或者可以嘗試將兩者結(jié)合，或許也是一個(gè)不錯(cuò)的方案。

總結(jié)

以上是生活随笔為你收集整理的chrome切换前端模式_H5暗黑模式在京东收银台中的实践的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。