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