Chrome 76增加了對偏好配色方案媒體查詢的支持(又名“黑暗模式”)。

但是，我怎樣才能輕松地在兩種配色方案下測試我的網頁，而不用打開和關閉系統黑暗模式呢？

火狐也有同樣的問題，但我在Chrome & ampChrome DevTools。

從Chrome版本79開始，你可以在渲染面板中的首選配色方案:深色和首選配色方案:淺色之間切換

打開開發者工具(否則下面的組合鍵會打開打印對話框) 打開命令控件:Ctrl+Shift+P或Command+Shift+P (Mac) 鍵入& quot顯示渲染& quot 將模擬CSS媒體功能的prefers-color-scheme設置為要調試的值

如何在Chrome上模擬/激活首選配色方案(桌面):

按F12鍵(或在Mac上按Command+Shift+C) 單擊樹點符號(自定義和控制開發工具) 將鼠標指向更多工具選項，然后單擊渲染選項。 選項模擬CSS媒體功能偏好-配色方案接近尾聲，這是你的目的地！如何在Chrome上模擬/激活首選配色方案(手機版):

單擊樹點符號。 點擊設置。 點擊主題。 選擇你想要的選項！ 耶！！！

編輯6月22日:如果你想對任何網站強制使用深色，你可以瀏覽chrome://flags/并啟用標志:網頁內容的自動深色模式(基于顏色反轉)

這是一個在crbug.com/977243被追蹤的Chrome DevTools功能請求(啟動bug或CC: yourself以獲得進度通知)。與此同時，它已經可以在Safari的Web Inspector中使用，參見蘋果博客文章中的標題調試黑暗模式。

作為替代，如果您想自動化整個過程，我已經編寫了一個在黑暗和光明模式下截取屏幕截圖的木偶師腳本，它也可以集成到您的CI測試中。

現在你可以在DevTools & gt元素& gt樣式& gt右上角的畫筆圖標:

在Android版Chrome上，73版增加了一個標志，為黑暗主題添加了一個設置面板，并在瀏覽器菜單中添加了一個復選框。chrome://flags/#變暗-網站-主題中的復選框-設置