概述

深色模式（Dark Mode）又稱為暗色模式，是與日常使用過(guò)程中的淺色模式（Light Mode）相對(duì)應(yīng)的一種UI主題。深色模式最早來(lái)源于人機(jī)交互領(lǐng)域的研究和實(shí)踐，該模式并非簡(jiǎn)單地將頁(yè)面背景變?yōu)楹谏⑽淖謨?nèi)容變?yōu)榘咨?，而是提供一整套適配該模式的應(yīng)用配色主題。相較于淺色模式，深色模式視覺效果更加柔和，能有效降低屏幕亮度對(duì)眼睛造成的刺激和疲勞。此外，深色模式還能通過(guò)降低像素亮度減少設(shè)備能耗，從而提升續(xù)航表現(xiàn)。

在應(yīng)用深色模式適配時(shí)，需遵循UX基礎(chǔ)設(shè)計(jì)原則，保障頁(yè)面內(nèi)容的易讀性、舒適性與視覺一致性，具體可參照專業(yè)深色模式設(shè)計(jì)規(guī)范。適配過(guò)程主要涉及三方面：字體顏色、元素背景色等顏色資源調(diào)整；圖片圖標(biāo)等媒體素材的明暗對(duì)比優(yōu)化；系統(tǒng)狀態(tài)欄的適配處理。此外，還需針對(duì)使用Web組件加載的網(wǎng)頁(yè)等特殊場(chǎng)景進(jìn)行專項(xiàng)適配。

本文主要將介紹深色模式的適配過(guò)程，同時(shí)會(huì)列舉出適配過(guò)程中的常見問(wèn)題及解決方案。

實(shí)現(xiàn)原理

當(dāng)系統(tǒng)切換到深色模式后，應(yīng)用內(nèi)可能會(huì)出現(xiàn)部分內(nèi)容切換到深色主題的情況，例如狀態(tài)欄、彈窗背景色、系統(tǒng)控件等，會(huì)導(dǎo)致應(yīng)用內(nèi)頁(yè)面效果錯(cuò)亂。

為應(yīng)對(duì)上述情況，需要對(duì)應(yīng)用進(jìn)行深色模式下的內(nèi)容適配，目前該適配主要依靠資源目錄。當(dāng)系統(tǒng)對(duì)應(yīng)的設(shè)置項(xiàng)發(fā)生變化后（如系統(tǒng)語(yǔ)言、深淺色模式等），應(yīng)用會(huì)自動(dòng)加載對(duì)應(yīng)資源目錄下的資源文件。

系統(tǒng)為深色模式預(yù)留了dark目錄，該目錄在應(yīng)用創(chuàng)建時(shí)默認(rèn)不存在，在進(jìn)行深色模式適配時(shí)，需要開發(fā)者在src/main/resources中手動(dòng)地創(chuàng)建出dark目錄，將深色模式所需的資源放置到該目錄下。對(duì)于淺色模式所需的資源，可以放入默認(rèn)存在的src/main/resources/base目錄下。

在進(jìn)行資源定義時(shí)，需要在base目錄與dark目錄中定義同名的資源。例如在base/element/color.json文件中定義text_color為黑色，在dark/element/color.json文件中定義text_color為白色，那么當(dāng)深淺色切換時(shí)，應(yīng)用內(nèi)使用了$('app.color.text_color ')作為顏色值的元素會(huì)自動(dòng)切換到對(duì)應(yīng)的顏色，而無(wú)需使用其他邏輯判斷進(jìn)行控制。

一般情況下深淺色模式切換不會(huì)導(dǎo)致應(yīng)用界面產(chǎn)生結(jié)構(gòu)上的變化，而是頁(yè)面結(jié)構(gòu)一致但是采用不同的主題配色、配圖等，使得整個(gè)應(yīng)用在切換到深色模式后依然保持自然美觀，以下為深色模式適配的UX示例。

從上圖中可以看到，在應(yīng)用進(jìn)行深色模式適配過(guò)程中主要的適配項(xiàng)有顏色資源適配、媒體資源適配、狀態(tài)欄適配，除此之外若應(yīng)用內(nèi)使用了Web組件加載了Web內(nèi)容，那么還需對(duì)Web頁(yè)面適配深色模式，具體適配方案可點(diǎn)擊對(duì)應(yīng)鏈接跳轉(zhuǎn)到具體章節(jié)查看。

目前業(yè)內(nèi)應(yīng)用向用戶提供的深淺色模式切換有以下兩種常見方式。

應(yīng)用跟隨系統(tǒng)深淺色模式切換

實(shí)現(xiàn)上，需要開發(fā)者使用setColorMode()方法將ColorMode設(shè)置為COLOR_MODE_NOT_SET（未設(shè)置顏色模式），然后應(yīng)用在運(yùn)行過(guò)程中就可以自動(dòng)感知到系統(tǒng)顏色模式切換，若應(yīng)用完成了深淺色模式適配，將自動(dòng)切換到對(duì)應(yīng)的顏色模式。

應(yīng)用內(nèi)提供手動(dòng)控制深淺色的開關(guān)供用戶自行選擇

實(shí)現(xiàn)上，切換深色模式需要調(diào)用setColorMode()方法將ColorMode設(shè)置為COLOR_MODE_DARK（深色模式），切換淺色模式需要將ColorMode設(shè)置為COLOR_MODE_LIGHT（淺色模式），這樣就可以完成對(duì)應(yīng)用深淺色的手動(dòng)控制。

綜上分析，深色模式適配內(nèi)容如下表所示。

深色模式適配

顏色資源適配

顏色資源適配是將頁(yè)面元素的顏色抽離到限定詞目錄中，讓應(yīng)用在不同的深淺色模式下使用不同限定詞目錄中的顏色值，從而達(dá)成應(yīng)用頁(yè)面元素在深淺色下不同的顏色表現(xiàn)。若應(yīng)用適配代碼存在錯(cuò)誤，那么在切換到深色模式后，頁(yè)面元素會(huì)由于對(duì)比度過(guò)低導(dǎo)致用戶識(shí)別困難，以下為顏色資源適配錯(cuò)誤的效果示例。

上述頁(yè)面效果在淺色模式下顯示正常，但是當(dāng)切換到深色模式后 ，彈窗內(nèi)文字與彈窗背景色不滿足背景色對(duì)比度不低于5:1，用戶識(shí)別彈窗內(nèi)容困難。上述效果的關(guān)鍵問(wèn)題在于使用自定義彈窗時(shí)，若未手動(dòng)指定彈窗背景色，系統(tǒng)默認(rèn)對(duì)彈窗背景色做了深淺色適配，但是彈窗內(nèi)的具體內(nèi)容特別是開發(fā)者的自定義內(nèi)容無(wú)法自動(dòng)適配深色模式，于是當(dāng)系統(tǒng)切換到深色模式下，彈窗背景色自動(dòng)深色，而彈窗內(nèi)容保持與淺色模式一致的顏色，導(dǎo)致內(nèi)容無(wú)法看清，該類問(wèn)題對(duì)應(yīng)解決方案有以下兩種。

方式一：使用系統(tǒng)資源（優(yōu)先建議）。使用受支持的系統(tǒng)資源會(huì)自動(dòng)適配深色模式，開發(fā)者可查看系統(tǒng)資源獲取受支持的系統(tǒng)資源。

方式二：使用自定義主題，若開發(fā)者需要定制在深淺色模式下不同的顏色表現(xiàn)，就需要使用自定義主題。

媒體資源適配

媒體資源適配即在深淺模式下采用不同顏色表現(xiàn)的圖片或圖標(biāo)等媒體資源，從而達(dá)成更好的用戶體驗(yàn)，以下為應(yīng)用內(nèi)的圖標(biāo)未適配深色模式的效果示例，未適配內(nèi)容以黃虛線框出。

上述錯(cuò)誤示例效果的關(guān)鍵問(wèn)題在于對(duì)于應(yīng)用內(nèi)的圖標(biāo)并未做深色模式下的適配，于是圖標(biāo)的顏色與應(yīng)用淺色時(shí)一致，而兩者對(duì)比度過(guò)低，導(dǎo)致切換到深色模式后應(yīng)用內(nèi)圖標(biāo)無(wú)法看清，媒體資源的適配有以下兩種方式。

方式一：若適配簡(jiǎn)單圖標(biāo)并且圖標(biāo)格式為SVG類型，那么只需要結(jié)合顏色資源適配并使用Image組件的fillColor屬性（若使用Symbol則使用SymbolGlyph的fontColor屬性），在不同的深淺色下設(shè)置為不同的填充色即可完成深色模式的適配。

方式二：若需要適配圖片或適配圖標(biāo)但圖標(biāo)不為SVG類型，那么就需要使用資源目錄的方式進(jìn)行深色模式的適配。

狀態(tài)欄適配

狀態(tài)欄適配即在深淺色模式下，采用不同的狀態(tài)欄背景色與字體顏色。若應(yīng)用未啟用沉浸式，那么默認(rèn)情況下，淺色模式下狀態(tài)欄為白底黑字，深色模式下狀態(tài)欄為黑底白字。當(dāng)應(yīng)用啟用了沉浸式，狀態(tài)欄背景色與應(yīng)用背景色保持一致，而狀態(tài)欄文字會(huì)默認(rèn)在淺色模式下保持黑色，而在深色模式下保持白色，若應(yīng)用在淺色模式下設(shè)置了深色背景或在深色模式下設(shè)置了淺色背景，都會(huì)導(dǎo)致狀態(tài)欄背景色與狀態(tài)欄字體顏色對(duì)比度過(guò)低，導(dǎo)致顯示異常。錯(cuò)誤效果示例如下圖，應(yīng)用設(shè)置了沉浸式并在淺色模式下具有純黑色的背景色，導(dǎo)致狀態(tài)欄的日期電量等文本內(nèi)容無(wú)法看清。

上述錯(cuò)誤效果的主要問(wèn)題在于頁(yè)面的背景色固定為黑色，當(dāng)系統(tǒng)切換到淺色模式后，狀態(tài)欄文字默認(rèn)切換到黑色，此時(shí)狀態(tài)欄背景色與文字顏色一致，于是狀態(tài)欄中的文字就不可見了，此類問(wèn)題修改方案有以下兩種。

若可以將背景色做深淺色適配，則采用顏色資源適配的方案對(duì)應(yīng)用背景色進(jìn)行適配，背景色適配時(shí)需考慮到狀態(tài)欄文字在深淺色模式下的默認(rèn)表現(xiàn)。

若背景色無(wú)法做深淺色適配，或做了深淺色適配，但是沉浸式顏色與默認(rèn)的狀態(tài)欄文字顏色對(duì)比度較低，這種情況下需要獲取當(dāng)前的深淺色并動(dòng)態(tài)設(shè)置狀態(tài)欄字體顏色。

Web頁(yè)面適配深色模式

Web頁(yè)面的內(nèi)容不會(huì)自動(dòng)跟隨系統(tǒng)顏色模式進(jìn)行切換。

若需要Web內(nèi)容進(jìn)行深淺色適配，就需要在Web頁(yè)面內(nèi)通過(guò)媒體查詢的方式單獨(dú)設(shè)置深色模式下的頁(yè)面樣式，并通過(guò)Web組件的darkMode()屬性來(lái)控制Web頁(yè)面是否啟用深色模式。

具體實(shí)現(xiàn)開發(fā)者可參考：Web組件設(shè)置深色模式。

總結(jié)

本文系統(tǒng)解析了深色模式適配的技術(shù)原理，并詳細(xì)闡述了適配實(shí)施過(guò)程中的關(guān)鍵調(diào)整項(xiàng)，通過(guò)差異化的適配策略對(duì)界面元素進(jìn)行針對(duì)性處理，即可實(shí)現(xiàn)完整的深淺色主題切換。