背景

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

?暗黑模式的優勢

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

• 為弱視以及對強光敏感的用戶提高可視性。

• 讓所有人都可以在光線較暗的環境中更輕松地使用設備。

系統兼容情況

• macOS 10.14 引入了 darkmode

• ios13 2019 年 3 月發布的 ios13 版本加入了 darkmode

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

• window10 2018.10.10

h5 適配暗黑模式

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

那么如何來實現暗黑呢？01使用js動態控制css類

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

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

其實無非就是更改 css，使用js進行css變換！！！用戶切換系統深色淺色模式的時候客戶端會調用我們的一個方法，這個方法當用戶切換系統暗黑模式的時候就會調用，因此可能會被調用很多次，我們可以在這個方法里面進行操作，去動態更改css。?

Eg: // 準備回調用的函數 _iosCallBack:function() { window.getDarkInfo = function(jsonString) { // 根據jsonString ，do something ……… }; } // 初始化 _initFinishDarkModel: function() { var params = { "routerURL":"router://JDWebViewBusinessModule/getJDAppearanceState", "callBackName":"getDarkInfo",//h5自定義的函數名稱，optional,可選參數 "callBackId":"finish"//h5自定義的參數，用于區分同一個頁面，optional,可選參數 } 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用戶切換系統暗黑模式，只有用戶手動切換的時候會調用 _changeSystemDarkSkin: function() { window.jdAppearanceDidChangedNotification = function(state) { if (state == 1) { // 系統暗黑模式 // do something…….. }else{ // 系統明亮模式 // do something…….. } }; },

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

02媒體查詢

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

? ? Eg:

• prefers-color-scheme

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

1、語法：

? ? no-preference

? ? 表示系統未得知用戶在這方面的選項。在布爾值上下文中，其執行結果為 false。

? ? light

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

? ? dark

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

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 規范上處于 level5 的草案，在生產環境還需要針對不同瀏覽器做一些向下兼容處理。

3、瀏覽器支持檢測

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

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

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

4、擴展

更多的媒體查詢適配！

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

• inverted-colors：反轉色

• prefers-reduced-motion：減少動畫

• prefers-reduced-transparency：透明度

• prefers-contrast：對比度

• forced-colors：指定顏色

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

總結

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。