公眾號(hào)已進(jìn)入暗黑模式時(shí)代，蘋果用戶已經(jīng)可以進(jìn)入暗黑模式，而安卓手機(jī)的適配也即將完成。

但暗黑模式下，90% 的公眾號(hào)頁面都會(huì)出現(xiàn)適配問題，給運(yùn)營(yíng)帶來極大的困擾。

下面小楊就來講一下暗黑模式的適配方法。

無彩色                      有彩色

對(duì)于有彩色和無彩色，微信算法的處理方法是不同的。

夜間模式下，文章背景的底色被設(shè)置為 RGB（36,36,36），即86%濃度的黑，這種色彩相較于純黑色更加柔和，夜間閱讀會(huì)更加舒適。

對(duì)于亮色，蘋果控制在屏幕最亮的白色為 RGB（230,230,230）,即89%濃度的白色，相較于純白色，這種顏色更加舒適，能減弱深夜強(qiáng)光對(duì)眼睛的刺激。

在「有彩色」的處理上，其基本原理為，在保證對(duì)比關(guān)系不變的前提下，盡量還原色彩原本的顏色，但是，這個(gè)算法并不能覆蓋到所有的顏色，仍有一定缺陷。

如圖，公眾號(hào)圖文中絕大多數(shù)圖片都存在白邊，白邊在淺色模式下與白色背景融為一體，但在暗黑模式下，白邊就會(huì)顯得十分突兀。

上傳無白邊的 PNG 格式圖片

較小的無白邊 PNG 圖片可以直接上傳，較大的無白邊 PNG 圖片上傳方法請(qǐng)劃至文末查看附錄。

問題1. 識(shí)別性問題

如圖，同種顏色的文字在不同的背景下識(shí)別效果有很大差別，純藍(lán)色字在白色背景下易于閱讀，但在深色背景下難以辨認(rèn)。

在暗黑模式下檢查

我們的圖文也可能出現(xiàn)文字在暗黑模式下看不清的情況，發(fā)布之前一定要在暗黑模式下檢查一遍，不合適的配色要進(jìn)行修改。

問題2. 色彩顯示差異

如圖，同樣的顏色在不同背景下顯示效果不同，圖中的兩個(gè)「藍(lán)」字使用的是同一種顏色RGB（0,0,255），但在不同背景下仿佛是兩種的顏色。

盡量使用低飽和度顏色

鮮艷色彩在不同背景下展示效果差別很大，且深色背景下鮮艷的色彩會(huì)非常突兀，因此請(qǐng)盡量使用低飽和度色彩。

許多頭部大號(hào)，如Apple、寶馬中國等都喜歡采用黑科技排版，但越是黑科技排版越容易出現(xiàn)適配問題。

問題1. SVG 與背景的色差

微信會(huì)對(duì)所有使用 CSS 定義的顏色重新映射，但不改變 SVG 中定義的顏色，因此導(dǎo)致 SVG 與背景出現(xiàn)色差。

一圖流與 SVG 混排

由于微信不改變圖片和 SVG 的色值，因此一圖流與 SVG 混排的黑科技排版不會(huì)出現(xiàn)色差。

問題2. SVG 難以辨識(shí)

微信不對(duì) SVG 進(jìn)行色彩反轉(zhuǎn)，因此暗黑模式下 SVG 中的深色部分會(huì)難以辨識(shí)。

將 fill 設(shè)置為 currentColor

Isle of Chaos 在《一首寫給逆行者的歌》中最早解決了這個(gè)問題，他將 fill 的值設(shè)置為 currentColor ，使 SVG 可以繼承暗黑模式下反轉(zhuǎn)的色值。

微信會(huì)將圖文中的陰影顏色反轉(zhuǎn)，即將黑色的影子反轉(zhuǎn)為白色，這顯然違反常識(shí)。

不建議對(duì)模塊添加陰影

Google在「深色設(shè)計(jì)規(guī)范」中明確指出——“不要使用亮色代替黑色陰影來表示高度，因?yàn)樗鼈儾荒軠?zhǔn)確地表示投影的高度。

適配暗黑模式非常困難。運(yùn)營(yíng)人只能開發(fā)一套顏色，深色由算法自動(dòng)合成，設(shè)計(jì)頁面時(shí)要處處配合算法。

但微信的暗黑模式算法其實(shí)是不合格的，它僅僅達(dá)到了「能看清，能閱讀」的程度，距離「美觀，好看」的標(biāo)準(zhǔn)還差的很遠(yuǎn)。

因此，我建議引入蘋果暗黑設(shè)計(jì)規(guī)范中的「語義色彩」。

語義色彩允許給一種顏色在淺色模式和深色模式下分別定義兩個(gè)色值。

只有分別在深色和淺色下手動(dòng)設(shè)置合適的顏色，才能保證頁面足夠美觀。

目前的微信規(guī)則下，較小的無白邊圖片可以直接上傳，而較大的無白邊圖片需要經(jīng)過以下步驟上傳。

(部分舊版本蘋果和安卓設(shè)備可能無法顯示)

1.摳圖

若圖片素材存在白邊，可以在 PS 里將白邊扣除。

首先在 PS 軟件中打開圖片，解鎖該圖片的圖層鎖定；然后找到「魔術(shù)橡皮擦」工具；點(diǎn)擊圖片中的白色部分，就可以將白色部分轉(zhuǎn)變?yōu)橥该?，隨后將圖片導(dǎo)出為 PNG 格式。

2.上傳 PNG 圖片

微信的壓縮算法會(huì)導(dǎo)致 PNG 圖片的透明部分會(huì)被強(qiáng)制填充一層白底，因此直接上傳 PNG 圖片是行不通的。

我們可以采用「圖床替換」的方法，解決這個(gè)問題。

打開QQ空間的相冊(cè)工具，點(diǎn)擊「上傳圖片」。

將 PNG 圖片上傳到「相冊(cè)」

隨后點(diǎn)擊「分享按鈕」，保存「本圖地址」

3.撰寫 HTML 代碼

<svg viewBox="0 0 1133 1714">
<image overflow="visible"
width="1133" height="1714"
href="此處插入圖片鏈接">
</image></svg>

找到剛剛保存的圖片地址，刪除圖片地址末端的「&t=5」，隨后用圖片地址替換「此處插入圖片鏈接」，然后將代碼中標(biāo)注的寬度與高度設(shè)置為圖片的寬和高。

4.開發(fā)者模式導(dǎo)入公眾號(hào)

在Windows設(shè)備里面按Ctrl+Shift+C，在Mac設(shè)備中按Command+Shift+C進(jìn)入開發(fā)者模式。

鼠標(biāo)移動(dòng)到空白行，空白行會(huì)出現(xiàn)一個(gè)藍(lán)色選區(qū)，同時(shí)找到代碼欄下對(duì)應(yīng)的藍(lán)色選區(qū)，先點(diǎn)鼠標(biāo)右鍵然后選擇「Edit as Html」，將代碼粘貼到此處，并點(diǎn)擊保存。

經(jīng)過以上四步你就可以在公眾號(hào)中上傳一張無白邊的圖片了。

1.暗黑模式下背景亮度較低，適當(dāng)增加字號(hào)可以讓文字更容易看清。

2.鮮艷的色彩在暗黑模式下效果不好，建議使用低飽和度的配色。

3.使用 PNG 格式圖片可以避免圖片出現(xiàn)白邊。

4.簡(jiǎn)潔的樣式在暗黑模式下效果更好。

5.發(fā)布前請(qǐng)一定使用暗黑模式進(jìn)行預(yù)覽。

福利時(shí)刻-免費(fèi)領(lǐng)取7天135編輯器VIP會(huì)員】

點(diǎn)擊http://d1167.cn/users/invite/ddb12a17ce400c35fe041d275a578351，注冊(cè)135編輯器，即可獲得7天VIP會(huì)員