[Chrome DevTools] 透過開發者工具動態切換暗黑模式

Dark mode (暗黑模式) 已經逐漸成為現代網頁開發的主流,很多網站也都逐漸加入的對 dark mode 的支援,讓網站預設也可以跟著作業系統的深色或淺色模式自動切換

雖然顏色偏好讓使用者體驗更好,但也確實增加了網站開發時期的負擔,我們必須同時測試兩種顏色模式的顯示效果,如果每次測試都要主動切換系統的模式,也未免太辛苦了!還好 Chrome DevTools 內建了主題切換,讓我們可以直接在開發工具切換目前網頁的顯示模式,大幅度的節省時間,今天就來看看如何在深色和淺色模式之間自由的切換!

切換深色/淺色測模式

Emulate CSS media

在 Chrome 的開發工具中,我們可以模擬各種不同的 CSS media 狀態,除了深色/淺色模式外,甚至也可以模擬在列印模式下的顯示,非常方便。

打開 Rendering 視窗

在打開 DevTools 後,我們可以點選左邊直接從 More Tools 下選擇 Rendering

另外也可以直接用 Command Pelette 開啟 Rendering 視窗

Ctrl + Shift + P -> Show Rendering

設定 prefers-color-sheme

開啟 Rendering 視窗後,在下面就會有一個「Emulate CSS media feature prefers-color-scheme」,在這裡就可以切換深色/淺色模式啦!

Rendering 下還有很多功能,有興趣都可以試試看

當然,不一定要開啟 Rendering 視窗才可以設定,我們也可以直接用 Command Pelette 快速切換

相關資源

如果您覺得我的文章有幫助,歡迎免費成為 LikeCoin 會員,幫我的文章拍手 5 次表示支持!
按照日期
[Angular 大師之路] 透過 DI 容器修正第三方元件的 bug
使用 Client Credentials 來取得具有 Azure REST API 權限的 Access Token

有任何問題或建議嗎?歡迎留言給我