晚上十一點(diǎn)我關(guān)掉房間大燈打開(kāi)筆記本準(zhǔn)備看點(diǎn)技術(shù)文章。屏幕白花花一片刺過(guò)來(lái)眼睛瞬間發(fā)酸。我熟練地按了三下快捷鍵把 Edge 的頁(yè)面整體切成黑底白字——這不是截圖是網(wǎng)頁(yè)被強(qiáng)制改成了純黑色。這些年我用同樣的方法處理 Chrome被不少朋友問(wèn)過(guò)“你電腦是不是壞了”。其實(shí)這是一套很成熟的方案組合只是大多數(shù)人只聽(tīng)說(shuō)過(guò)“深色模式”不知道瀏覽器里還藏著更徹底的三條路。這篇就圍繞一個(gè)問(wèn)題講透Edge 和 Chrome 里怎么把網(wǎng)頁(yè)顯示改成真正的純黑背景。適合嫌系統(tǒng)深色模式不夠黑、看 OLED 屏刺眼、夜間重度閱讀、以及想給公司電腦批量統(tǒng)一深色外觀(guān)的朋友。我會(huì)把瀏覽器自帶的強(qiáng)制開(kāi)關(guān)、擴(kuò)展工具的調(diào)節(jié)原理、網(wǎng)頁(yè)開(kāi)發(fā)者應(yīng)該怎么寫(xiě)深色適配以及實(shí)測(cè)中遇到的各種怪異現(xiàn)象都過(guò)一遍。不廢話(huà)直接進(jìn)正題。1. “純黑”和“深灰”之間隔著一塊 OLED 屏先說(shuō)清楚一個(gè)容易混淆的概念瀏覽器變黑不等于網(wǎng)頁(yè)變黑。Windows 或 macOS 開(kāi)了深色模式只是把瀏覽器窗口邊框、菜單、右鍵彈層這些外圍界面變成深色網(wǎng)頁(yè)內(nèi)容仍然由網(wǎng)頁(yè)本身的 CSS 決定。絕大多數(shù)網(wǎng)站默認(rèn)是白底所以你在系統(tǒng)里怎么切網(wǎng)頁(yè)大概率還是白的。這就是為什么很多人抱怨“深色模式開(kāi)了個(gè)寂寞”?！凹兒凇焙汀吧罨摇币膊皇且换厥隆Ｆ胀?LCD 屏上兩者觀(guān)感差不多頂多是深灰柔和一點(diǎn)但在 OLED 屏上黑色像素是直接熄滅的省電、不發(fā)光、沒(méi)有背光漏光問(wèn)題黑得徹底夜間看東西眼睛壓力小很多。iPhone、新款 iPad Pro、大量 Windows 輕薄本都用 OLED 面板這也是為什么“把網(wǎng)頁(yè)改成純黑”這件事會(huì)被人反復(fù)拿出來(lái)研究。而多數(shù)深色主題默認(rèn)用的是 #1e1e1e、#202020 這類(lèi)深灰不是 #000000 純黑離“熄屏式體驗(yàn)”差著一截。更關(guān)鍵的一點(diǎn)純黑背景在普通 LCD 上反而可能更刺眼。LCD 的背光始終全開(kāi)純黑區(qū)域只是液晶分子遮光遮不住會(huì)發(fā)生漏光換成深灰反而均勻。所以你在選擇方案前先判斷自己的屏幕類(lèi)型。我自己的體驗(yàn)是OLED 屏適合純黑定制IPS 屏用瀏覽器默認(rèn)深灰就夠不必刻意追求 #000000?，F(xiàn)在把“讓網(wǎng)頁(yè)變黑”這件事拆成三條路線(xiàn)路線(xiàn)原理適合人群瀏覽器自帶強(qiáng)制深色瀏覽器內(nèi)核把頁(yè)面顏色整體反轉(zhuǎn)替換不想裝擴(kuò)展、圖省事深色擴(kuò)展如 Dark Reader實(shí)時(shí)分析 CSS 并重寫(xiě)顏色值對(duì)顏色、對(duì)比度有要求網(wǎng)頁(yè)開(kāi)發(fā)者適配頁(yè)面主動(dòng)監(jiān)聽(tīng)系統(tǒng)深色狀態(tài)并切換樣式自己維護(hù)網(wǎng)頁(yè)的人三條路線(xiàn)都可以逼近純黑但細(xì)節(jié)差別很大。下面每一章的坑都是我實(shí)際用出來(lái)的。2. 先把自帶的開(kāi)關(guān)翻出來(lái)Edge 與 Chrome 的強(qiáng)制深色標(biāo)志如果你不想裝任何東西瀏覽器確實(shí)留了后門(mén)。這類(lèi)功能在 Chromium 系瀏覽器里叫Auto Dark Mode for Web Contents前端里更常見(jiàn)的叫法是 force-dark。2.1 Chrome 的 force-dark 參數(shù)到底怎么填在 Chrome 地址欄輸入chrome://flags/#enable-force-dark回車(chē)會(huì)看到“Auto Dark Mode for Web Contents”這一項(xiàng)。下拉選項(xiàng)通常有幾個(gè)Enabled對(duì)所有頁(yè)面強(qiáng)制深色包括圖片、視頻之外的所有可見(jiàn)元素。背景會(huì)被壓成深灰文字反白。Enabled with selective inversion of non-image elements選擇性反轉(zhuǎn)非圖片元素。白色區(qū)域變深色但圖片保持原樣這個(gè)模式對(duì)圖片密集的頁(yè)面更友好。Enabled with selective inversion of everything對(duì)頁(yè)面所有元素做選擇性反轉(zhuǎn)包括圖片但算法會(huì)盡量保留深色區(qū)域不被反轉(zhuǎn)。Enabled with simple HSL-based inversion把顏色做簡(jiǎn)單的 HSL 反轉(zhuǎn)顏色失真比較重但性能好老機(jī)器上更流暢。我的經(jīng)驗(yàn)是日常閱讀網(wǎng)站選第二個(gè)selective non-image看視頻網(wǎng)站選第一個(gè)或第三個(gè)。但這里有個(gè)很多人不知道的細(xì)節(jié)——flag 開(kāi)啟后瀏覽器會(huì)尊重網(wǎng)頁(yè)自身的color-scheme和prefers-color-scheme設(shè)置。也就是說(shuō)如果一個(gè)網(wǎng)站主動(dòng)聲明了支持深色模式瀏覽器會(huì)優(yōu)先用網(wǎng)頁(yè)自己的深色樣式而不是強(qiáng)制反轉(zhuǎn)。啟用后需要重啟瀏覽器。重啟完打開(kāi)一個(gè)新聞?wù)净蛘呶臋n站你會(huì)看到白底消失頁(yè)面變成深灰底淺色字。但注意默認(rèn)的“深灰”通常是#141414到#1a1a1a這個(gè)區(qū)間不是純黑。想進(jìn)一步壓成純黑光靠這個(gè) flag 做不到要配合下面的擴(kuò)展。2.2 Edge 的自動(dòng)深色設(shè)置比 Chrome 多在哪Edge 的情況稍有不同。它也在 flags 里提供了同名能力edge://flags/#edge-auto-dark-mode-for-web-content。但 Edge 同時(shí)在設(shè)置界面放了一個(gè)開(kāi)關(guān)路徑是“設(shè)置 → 外觀(guān) → 深色模式或叫‘將深色主題應(yīng)用于網(wǎng)頁(yè)’”新版 Edge 可能默認(rèn)開(kāi)啟。如果你用過(guò)就會(huì)發(fā)現(xiàn)這個(gè)開(kāi)關(guān)的效果和 Chrome 的 flag 幾乎一樣都是整體反轉(zhuǎn)。不過(guò) Edge 有個(gè)額外選項(xiàng)讓我覺(jué)得比 Chrome 好用開(kāi)啟深色主題后地址欄、標(biāo)簽欄、右鍵菜單會(huì)一并變黑而且性能損耗明顯比 Chrome 的 flag 低一些。這可能是微軟自己調(diào)整過(guò)的原因?qū)崪y(cè)在低配上網(wǎng)本上Edge 開(kāi)啟強(qiáng)制深色的滾動(dòng)流暢度比 Chrome 同參數(shù)好一檔。但 Edge 也有一個(gè)讓人抓狂的問(wèn)題部分版本里開(kāi)啟自動(dòng)深色后某些頁(yè)面底色沒(méi)變但文字變成淺灰導(dǎo)致整屏看不清。這不是故障是網(wǎng)頁(yè)沒(méi)有聲明color-scheme瀏覽器反轉(zhuǎn)算法不確定該按“淺色頁(yè)面”還是“深色頁(yè)面”處理結(jié)果做成“半吊子”。我遇到這種情況會(huì)直接給該域名加進(jìn)擴(kuò)展的排除列表用定制方案代替。2.3 命令行參數(shù)給便攜版、企業(yè)批量部署用如果你的使用場(chǎng)景不是個(gè)人電腦而是公司統(tǒng)一配發(fā)的電腦、或者你用的是綠色便攜版 Chrome/Edge那 flags 配置不會(huì)跟著配置文件走全最靠譜的辦法是命令行參數(shù)。我常寫(xiě)的啟動(dòng)參數(shù)是這樣# Chrome chrome.exe --enable-featuresWebContentsForceDark # Edge msedge.exe --enable-featuresmsEdgeAutoDarkModeForWebContent注意 Chrome 和 Edge 的功能開(kāi)關(guān)名不一樣親測(cè)不能互相套用。還有一個(gè)更粗糙的參數(shù)--force-dark-mode它控制的是瀏覽器界面變黑不是網(wǎng)頁(yè)內(nèi)容變黑很多教程把兩者混為一談你用了之后如果發(fā)現(xiàn)網(wǎng)頁(yè)沒(méi)變說(shuō)明被誤導(dǎo)了。命令行參數(shù)適合做成快捷方式比如把目標(biāo)改成C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe --enable-featuresmsEdgeAutoDarkModeForWebContent這樣雙擊快捷方式啟動(dòng)的 Edge 就是默認(rèn)強(qiáng)制深色不影響系統(tǒng)設(shè)置也比進(jìn) flags 改參數(shù)更隱蔽穩(wěn)定。缺點(diǎn)是以后每次啟動(dòng)都要走這個(gè)快捷方式從其他地方喚醒 Edge 不會(huì)生效適合作為“夜間專(zhuān)用快捷方式”留在任務(wù)欄。2.4 自帶方案的真實(shí)短板不是不認(rèn)識(shí)“純黑”自帶的強(qiáng)制深色為什么最終效果離“純黑”還有距離你可以把它的算法理解為讀一遍網(wǎng)頁(yè)的背景色和前景色把明度反轉(zhuǎn)。白底反成深灰深灰底反成淺灰原本是深藍(lán)的按鈕也會(huì)被反轉(zhuǎn)成淺藍(lán)。它不會(huì)像設(shè)計(jì)師那樣去理解“這里應(yīng)該用黑色”只會(huì)機(jī)械地翻轉(zhuǎn)明暗所以出現(xiàn)奇怪的中間色是常態(tài)。我實(shí)測(cè)了幾個(gè)常見(jiàn)網(wǎng)站的最終背景色網(wǎng)站類(lèi)型自帶強(qiáng)制深色后的背景色是否純黑新聞資訊類(lèi)#161616否文檔類(lèi)#141414否技術(shù)博客白底#141414否論壇淺色藍(lán)白#1a1a1a否更要命的是如果網(wǎng)頁(yè)里有很多用背景圖做底色的地方反轉(zhuǎn)后背景圖會(huì)跟著變暗或產(chǎn)生奇怪的反相色閱讀體驗(yàn)很差。所以自帶的強(qiáng)制深色只能當(dāng)“應(yīng)急”真正追求純黑的玩家?guī)缀醵紩?huì)轉(zhuǎn)到擴(kuò)展方案。3. 擴(kuò)展方案把“強(qiáng)制黑”控制權(quán)拿回自己手里如果你對(duì)“網(wǎng)頁(yè)純黑”的要求是精準(zhǔn)、可控、顏色不跑偏那必須引入擴(kuò)展。我主力用的是 Dark Reader偶爾配合 Stylus 做補(bǔ)救。這一章講清楚它們的原理和實(shí)際操作。3.1 Dark Reader 的“純黑”是怎么實(shí)現(xiàn)的Dark Reader 不是簡(jiǎn)單地把整頁(yè)反色它做的事情是先創(chuàng)建一份用戶(hù)配置然后對(duì)網(wǎng)頁(yè)里的每一個(gè)顏色計(jì)算映射關(guān)系。比如白色#ffffff會(huì)被映射到你設(shè)定的背景色黑色文字#000000會(huì)被映射到你設(shè)定的文字色但中間有一條智能差分曲線(xiàn)避免所有顏色都糊成一團(tuán)。這套機(jī)制的優(yōu)秀之處在于保護(hù)了圖片和視頻。默認(rèn)情況下圖片區(qū)域不參與顏色替換所以你不會(huì)看到一張自拍變成負(fù)片效果。這也是 Dark Reader 比瀏覽器自帶 force-dark 更“聰明”的核心理由它能識(shí)別“哪些是內(nèi)容、哪些是裝飾背景”然后區(qū)別對(duì)待。3.2 從默認(rèn)深灰到真純黑的調(diào)參過(guò)程Dark Reader 安裝后默認(rèn)是“動(dòng)態(tài)”模式背景色一般會(huì)給到類(lèi)似#181a1b的深灰。要改成純黑按這個(gè)步驟走點(diǎn)擊擴(kuò)展圖標(biāo)進(jìn)入設(shè)置面板。找到“主題”區(qū)域把“背景色”直接填#000000?！拔淖诸伾苯ㄗh填#d0d0d0或#e6e6e6不要填純白#ffffff。純白文字在純黑背景上對(duì)比度是 21:1這個(gè)值太高了長(zhǎng)時(shí)間閱讀反而會(huì)晃眼文字邊緣也會(huì)有刺眼的發(fā)光感。#d0d0d0的對(duì)比度大約是 14:1 左右同樣足夠清晰但柔和很多。“亮度”“對(duì)比度”這兩個(gè)滑塊建議分別設(shè)為 100% 和 90%或者手動(dòng)微調(diào)。很多人忽略的是“亮度”滑塊默認(rèn)不是 100它會(huì)影響“純黑”的純凈度把它推到 100% 才能保證背景從灰變成純黑。關(guān)掉“棕褐色濾鏡”這是為了護(hù)眼用的暖色效果會(huì)污染你看到的顏色色準(zhǔn)黨必須關(guān)掉。調(diào)完之后刷新頁(yè)面你會(huì)發(fā)現(xiàn)背景已經(jīng)黑得像關(guān)了屏幕一樣。如果某些網(wǎng)站還殘留白色區(qū)域多半是它有特殊元素的 CSS 寫(xiě)死阻止了替換這時(shí)候需要用 Stylus 針對(duì)性修補(bǔ)后面會(huì)細(xì)說(shuō)。3.3 圖片、視頻、iframe 的單獨(dú)處理Dark Reader 處理圖片的策略有幾個(gè)選項(xiàng)在擴(kuò)展面板的“圖片濾鏡”區(qū)域不處理圖片保持原樣視頻畫(huà)面不受影響適合所有場(chǎng)景的默認(rèn)選擇。降低亮度給圖片疊加一層壓光適合夜間看文檔里插圖但視頻網(wǎng)頁(yè)不推薦畫(huà)面會(huì)變暗。如果你用的是 OLED 屏夜間看網(wǎng)頁(yè)最難受的其實(shí)是大的白色圖片比如新聞網(wǎng)站的圖片配白底、電商的商品圖。我的習(xí)慣是啟用“降低亮度”把亮度調(diào)到 70% 左右這樣圖片區(qū)域的白色背景會(huì)變成淺灰不至于在暗室內(nèi)“閃一下”。iframe 是個(gè)大坑。部分網(wǎng)頁(yè)嵌入了第三方評(píng)論區(qū)、地圖模塊它們的顏色不歸主頁(yè)面管。Dark Reader 默認(rèn)會(huì)嘗試處理 iframe 里的內(nèi)容但經(jīng)常失敗。我遇到地圖類(lèi) iframe 會(huì)把它加入“忽略名單”否則地圖上所有色塊都會(huì)被反相成亂七八糟的顏色沒(méi)法用。3.4 排除名單與站點(diǎn)例外如果你只是想“大部分網(wǎng)站黑個(gè)別網(wǎng)站保持原樣”Dark Reader 右上角的“站點(diǎn)”開(kāi)關(guān)可以直接控制當(dāng)前網(wǎng)址。比如銀行網(wǎng)站、網(wǎng)銀、有些政務(wù)系統(tǒng)它們的驗(yàn)證碼、滑塊校驗(yàn)對(duì)顏色處理很敏感深色模式下容易出問(wèn)題我就把這類(lèi)站點(diǎn)加入排除名單。操作方法打開(kāi)擴(kuò)展面板 → 點(diǎn)擊“站點(diǎn)” → 選擇“不在這些網(wǎng)站上運(yùn)行”然后訪(fǎng)問(wèn)目標(biāo)站點(diǎn)點(diǎn)一下按鈕即可。名單是按域名記錄的對(duì)子路徑也生效會(huì)記住你每次的選擇。還有一個(gè)更精細(xì)的模式變成“亮色模式”。Dark Reader 可以在深色和亮色之間切換有些網(wǎng)站是淺色更好看但你又不想完全關(guān)掉擴(kuò)展就單獨(dú)給它設(shè)置成“亮色”而不是“不運(yùn)行”這樣擴(kuò)展還是能對(duì)字體做處理只是背景保持白。3.5 終極補(bǔ)救Stylus 強(qiáng)制壓黑某些頑固元素比如登錄彈窗的白底、按鈕的背景漸變、position: fixed的頭部導(dǎo)航Dark Reader 偶爾會(huì)漏掉。這種時(shí)候我會(huì)打開(kāi)一個(gè)叫 Stylus 的擴(kuò)展給站點(diǎn)寫(xiě)一條自定義 CSShtml, body, .modal, .popup, header, footer { background-color: #000 !important; border-color: #222 !important; color: #ddd !important; }這只是最基礎(chǔ)的寫(xiě)法實(shí)際需要逐個(gè)類(lèi)名排查。注意不要用* { background: #000 !important }這種全局規(guī)則會(huì)把網(wǎng)頁(yè)里所有區(qū)塊都變成黑色文字也可能隔著黑底看不見(jiàn)整個(gè)布局徹底廢掉。Stylus 的價(jià)值是“精準(zhǔn)打擊”不是“無(wú)差別轟炸”。4. 網(wǎng)頁(yè)開(kāi)發(fā)者的自我修養(yǎng)讓頁(yè)面主動(dòng)變黑前面講的是使用者視角。但如果你自己維護(hù)網(wǎng)站想讓頁(yè)面在用戶(hù)開(kāi)啟深色模式時(shí)自動(dòng)變成純黑那又是另一套玩法。這節(jié)從開(kāi)發(fā)角度說(shuō)一下因?yàn)槲以诟捻?yè)面深色適配時(shí)踩過(guò)不少反色的坑。4.1 prefers-color-scheme 與 color-scheme 配合使用現(xiàn)代瀏覽器里網(wǎng)頁(yè)通過(guò) CSS 媒體查詢(xún)感知系統(tǒng)深色狀態(tài):root { background-color: #fff; color: #111; color-scheme: light; } media (prefers-color-scheme: dark) { :root { background-color: #000; color: #e6e6e6; color-scheme: dark; } }color-scheme: dark這一行很多人會(huì)漏掉但它的作用很關(guān)鍵告訴瀏覽器這個(gè)頁(yè)面能正確處理深色表單控件、滾動(dòng)條、輸入框的默認(rèn)樣式。沒(méi)有這行你會(huì)發(fā)現(xiàn)頁(yè)面背景確實(shí)變黑了但表單下拉列表、日期選擇器還是白底滾動(dòng)條也保持淺灰色一眼看去特別割裂。媒體查詢(xún)只是第一步真正完整深色適配要把頁(yè)面中的組件級(jí)顏色全部拆成 CSS 變量然后在暗色模式下?lián)Q一組值。我推薦的做法是定義變量集:root { --bg: #ffffff; --text: #1f1f1f; --card: #f5f5f5; --border: #e0e0e0; --accent: #0066cc; } media (prefers-color-scheme: dark) { :root { --bg: #000000; --text: #e6e6e6; --card: #0d0d0d; --border: #2a2a2a; --accent: #58a6ff; } }所有組件寫(xiě)成background: var(--bg); color: var(--text);這樣的形式后續(xù)想換主題就只改變量不用到處找顏色值。4.2 純黑背景下的文字對(duì)比度與渲染細(xì)節(jié)如果你真的把背景做成純黑文字顏色不能隨便選因?yàn)榧兒诘紫碌土炼鹊幕疑淖謺?huì)發(fā)虛。原因是 LCD 的像素點(diǎn)無(wú)法完全關(guān)閉灰字在接近黑底時(shí)伽馬曲線(xiàn)拉開(kāi)得很慢細(xì)筆畫(huà)會(huì)顯得不清晰。OLED 屏情況好一些但仍有邊緣對(duì)比度問(wèn)題。我自己定的最低標(biāo)準(zhǔn)是正文用#d0d0d0以上亮度鏈接用#6aa9ff往上提一個(gè)亮度檔輔助說(shuō)明文字不要低于#9a9a9a。用 WCAG 官方換算出來(lái)#9a9a9a在純黑底上的對(duì)比度大約 9:1已經(jīng)遠(yuǎn)超 AA 標(biāo)準(zhǔn)的 4.5:1但實(shí)際肉眼觀(guān)感仍然偏暗。這就是純黑設(shè)計(jì)的一個(gè)反直覺(jué)點(diǎn)數(shù)學(xué)上對(duì)比度達(dá)標(biāo)不代表看著舒服還得靠人眼微調(diào)。關(guān)于抗鋸齒也值得說(shuō)一句。純黑背景 白字文字邊緣在部分屏幕上會(huì)出現(xiàn)彩色邊這是子像素渲染和黑色背景不兼容導(dǎo)致的。Chrome 在 Windows 上默認(rèn)用 ClearType 渲染黑背景下字體可能出現(xiàn)紅綠雜邊。遇到這種情況給文字加一個(gè)非常輕微的text-shadow: 0 0 1px rgba(255,255,255,0.1)可以緩解但最好不要在全局用性能開(kāi)銷(xiāo)無(wú)所謂主要是視覺(jué)效果要測(cè)試。4.3 Filter 反轉(zhuǎn)為什么不適合直接全局用網(wǎng)上常見(jiàn)的“網(wǎng)頁(yè)深色代碼”長(zhǎng)這樣html { filter: invert(1) hue-rotate(180deg); }這行代碼確實(shí)能把白底變黑底副作用是圖片也一起反色出來(lái)的效果是“照片變成底片”。如果非要只用這一行代碼解決補(bǔ)救辦法是給所有圖片再加一層反反轉(zhuǎn)img, video { filter: invert(1) hue-rotate(180deg); }這樣兩層反轉(zhuǎn)疊加圖片恢復(fù)正常背景保持黑色?？雌饋?lái)是條捷徑但實(shí)際項(xiàng)目里凡是設(shè)置了背景色漸變、陰影、半透明遮罩的元素都會(huì)被反轉(zhuǎn)得亂七八糟。比如一個(gè)深藍(lán)漸變的按鈕反轉(zhuǎn)后變成了橙色漸變品牌色完全跑偏。所以我強(qiáng)烈不建議用全局 filter 做生產(chǎn)環(huán)境的深色適配只適合個(gè)人臨時(shí)調(diào)試。4.4 一個(gè)完整的正文頁(yè)面示例如果只寫(xiě)一個(gè)最簡(jiǎn)單的文章頁(yè)我通常這樣組織!DOCTYPE html html langzh-CN head meta namecolor-scheme contentlight dark title示例文章/title style :root { --bg: #fafafa; --text: #151515; color-scheme: light; } media (prefers-color-scheme: dark) { :root { --bg: #000; --text: #d8d8d8; color-scheme: dark; } } body { background: var(--bg); color: var(--text); font-family: system-ui, sans-serif; line-height: 1.8; max-width: 720px; margin: 0 auto; padding: 24px; transition: background 0.3s ease, color 0.3s ease; } /style /head body h1網(wǎng)頁(yè)深色適配示例/h1 p這段文字會(huì)隨著系統(tǒng)深色模式自動(dòng)切換為淺色字。/p /body /html把這段文件拖進(jìn) Edge 和 Chrome然后在系統(tǒng)設(shè)置里切換深色淺色你能看到頁(yè)面即時(shí)響應(yīng)。注意meta[namecolor-scheme]和 CSS 里的color-scheme雙保險(xiǎn)是為了讓瀏覽器在頁(yè)面加載初期就確定控件配色避免先白后黑閃一下。5. 實(shí)測(cè)對(duì)比與幾個(gè)典型的異常場(chǎng)景理論講完把三條路線(xiàn)放在同一批頁(yè)面上跑一遍你才能知道差異在哪。我用同一臺(tái) OLED 屏 Windows 筆記本把 Chrome 的 force-dark flag、Dark Reader 純黑模式、開(kāi)發(fā)者適配的純黑頁(yè)面放在一起比。5.1 三條路線(xiàn)放在同一批頁(yè)面上的對(duì)比對(duì)比維度Chrome force-darkDark Reader 純黑開(kāi)發(fā)者適配自己寫(xiě)頁(yè)面背景色#141414~#1a1a1a可精確到 #000可由開(kāi)發(fā)者自由指定圖片處理容易反色默認(rèn)保留原樣可壓亮度需要自己用媒體查詢(xún)處理表單控件偶爾出現(xiàn)白底基本能處理可以用 color-scheme 一并適配操作成本改一次 flag 全局生效每個(gè)細(xì)節(jié)挨個(gè)調(diào)開(kāi)發(fā)工作量后續(xù)維護(hù)性能損耗低中高復(fù)雜網(wǎng)站掉幀無(wú)損耗純 CSS看這個(gè)表就知道沒(méi)有全能的選項(xiàng)。作為日常主力我個(gè)人是Dark Reader 排除名單因?yàn)樗目刂坪瓦€原度最好系統(tǒng)里再留一個(gè)啟用 force-dark 的 Chrome 快捷鍵配置當(dāng)應(yīng)急方案用。5.2 頁(yè)面發(fā)灰、光標(biāo)變白、截圖異常的問(wèn)題排查深色模式下最常出現(xiàn)的怪象我按遇到頻率列一下。頁(yè)面整體發(fā)灰而不是黑色。多半是瀏覽器自帶的 flag 和 Dark Reader 同時(shí)生效了兩個(gè)反轉(zhuǎn)疊加導(dǎo)致顏色漂移。解決方式是只保留一個(gè)方案要么關(guān)掉 flag要么關(guān)掉擴(kuò)展二選一。光標(biāo)變成白色或透明。這個(gè)問(wèn)題 Chromium 內(nèi)核曾經(jīng)集體出現(xiàn)過(guò)特別是在開(kāi)啟硬件加速后。光標(biāo)是系統(tǒng)層繪制的頁(yè)面深色不影響它但如果你把 GP 加速關(guān)閉再打開(kāi)光標(biāo)顏色會(huì)異常。這里的關(guān)鍵是別把光標(biāo)問(wèn)題歸因給深色模式本身。我實(shí)測(cè)過(guò)即使頁(yè)面全白光標(biāo)也可能因?yàn)橛布铀黉秩韭窂阶兓儼滋幚矸椒ㄊ侨hrome://settings/system里把“使用硬件加速當(dāng)可用時(shí)”關(guān)掉再重新打開(kāi)。這個(gè)問(wèn)題反復(fù)出現(xiàn)建議直接記住這條排錯(cuò)路徑。截圖亮度異常。開(kāi)著 Dark Reader 時(shí)用系統(tǒng)截圖工具截出來(lái)的圖有時(shí)會(huì)比屏幕暗一截尤其截圖工具的預(yù)覽窗口和頁(yè)面重疊時(shí)。原因在于 Dark Reader 是實(shí)時(shí)計(jì)算的截圖工具會(huì)把渲染后的顏色再疊一層濾鏡視覺(jué)明暗就被改變了。想要截圖顏色不偏要么臨時(shí)關(guān)掉擴(kuò)展要么用瀏覽器內(nèi)置的截圖功能它對(duì)頁(yè)面內(nèi)渲染狀態(tài)的同步更好。5.3 IE 兼容模式與強(qiáng)制深色的沖突熱詞里經(jīng)常有人問(wèn) “Edge 兼容模式 IE11 改成 IE7”。這里提醒一下如果你在 Edge 里用 IE 模式打開(kāi)了某個(gè)舊系統(tǒng)頁(yè)面任何 force-dark 和深色擴(kuò)展都不會(huì)生效。因?yàn)?IE 模式走的是傳統(tǒng)排版引擎根本不識(shí)別 Chromium 的樣式覆蓋手段。我嘗試過(guò)給 IE 模式的頁(yè)面加 Dark Reader結(jié)果頁(yè)面紋絲不動(dòng)這屬于引擎隔離導(dǎo)致的不是你配置錯(cuò)誤。遇到只能靠 IE 模式打開(kāi)的頁(yè)面又非要深色的情況唯一勉強(qiáng)可用的方案是 Windows 系統(tǒng)層面降低屏幕亮度 開(kāi)啟夜間模式色溫調(diào)節(jié)對(duì)網(wǎng)頁(yè)內(nèi)容本身沒(méi)有任何辦法。這條要寫(xiě)進(jìn)來(lái)是因?yàn)樘嗳嗽谡搲飭?wèn)“怎么 Edge 里 IE 模式不黑”本質(zhì)是引擎不支持說(shuō)清楚能省很多排查時(shí)間。5.4 登錄狀態(tài)丟失、Cookie 被清問(wèn)題在哪有段時(shí)間我開(kāi)了強(qiáng)制深色后發(fā)現(xiàn)每次重啟 Chrome很多網(wǎng)站都要重新登錄。排查半天真相和深色模式?jīng)]有直接關(guān)系而是瀏覽器版本自動(dòng)更新把隱私設(shè)置重置了。但深色模式下確實(shí)有一個(gè)間接影響Dark Reader 的“動(dòng)態(tài)主題”會(huì)在頁(yè)面加載時(shí)注入大量樣式某些安全等級(jí)高的站點(diǎn)會(huì)把這個(gè)當(dāng)成異常腳本環(huán)境觸發(fā)了風(fēng)控。這屬于小概率事件如果你的網(wǎng)站在剛開(kāi)啟深色擴(kuò)展的一兩次內(nèi)要求重新驗(yàn)證碼先不要慌把該站點(diǎn)加入 Dark Reader 的“不運(yùn)行”名單刷新頁(yè)面看是否恢復(fù)正常。我實(shí)測(cè)過(guò)幾個(gè)銀行的網(wǎng)銀頁(yè)面就是這么處理的。記住深色擴(kuò)展本質(zhì)上是在頁(yè)面運(yùn)行時(shí)注入樣式它絕對(duì)沒(méi)有權(quán)限讀取或修改 Cookie但敏感頁(yè)面為了避免環(huán)境特征異?？赡苓x擇不信任注入環(huán)境這才是真正的機(jī)制。6. 一些實(shí)操經(jīng)驗(yàn)寫(xiě)在最后和強(qiáng)制深色、純黑頁(yè)面這些東西打交道三年多沉淀下來(lái)幾條我認(rèn)為最有價(jià)值的經(jīng)驗(yàn)。第一不要追求“全站純黑”。深色模式下真正適合純黑的場(chǎng)景是 OLED 屏幕的夜間閱讀、代碼高亮、純文檔頁(yè)面。對(duì)電商、圖片社交、地圖這類(lèi)顏色本身就是信息的網(wǎng)站保留深灰或者讓圖片正常顯示比追求#000000重要得多。第二一定要維護(hù)一份排除名單。我的 Dark Reader 排除名單里躺著網(wǎng)銀、地圖、編輯器后臺(tái)這些站點(diǎn)在深色下功能會(huì)明顯受損與其跟顏色死磕不如直接讓它們保持原樣。擴(kuò)展的意義在于幫你選擇不是幫你做決定。第三系統(tǒng)級(jí)的 flag 和擴(kuò)展不要同時(shí)開(kāi)。前面已經(jīng)踩過(guò)這個(gè)坑兩個(gè)方案疊加的最終效果不是更黑而是更偏。我現(xiàn)在的配置是Edge 保持系統(tǒng)深色外觀(guān)網(wǎng)頁(yè)內(nèi)容交給 Dark ReaderChrome 保留一個(gè)啟用 force-dark 的獨(dú)立快捷方式用于不帶擴(kuò)展的極簡(jiǎn)閱讀場(chǎng)景。最后再說(shuō)個(gè)細(xì)節(jié)。Dark Reader 的“動(dòng)態(tài)”模式性能開(kāi)銷(xiāo)在復(fù)雜網(wǎng)站上是肉眼可感知的如果電腦配置不高可以把模式從“動(dòng)態(tài)”切成“靜態(tài)”頁(yè)面配色一次性生成滾動(dòng)時(shí)不再實(shí)時(shí)計(jì)算。犧牲的是圖片顏色的實(shí)時(shí)適配換來(lái)的是流暢度提升對(duì)舊機(jī)器效果很明顯。這算是我最近最常用的一條優(yōu)化如果你的網(wǎng)頁(yè)深色體驗(yàn)拖累了日常使用值得先試這一步。