Html頁面支持暗黑模式的實現

作者：Eve Cole 更新時間：2025-04-11 07:16:01

自19年開始，Android和IOS平台，都開始玩暗黑模式。當然這沒什麼不好，但是當我們的頁面被用戶在暗黑模式打開之後，會被那傳統大白色瞬間閃瞎雙眼。

下面會簡單的說一下如何讓頁面支持暗黑模式。

準備

其實，我們只是需要使用到css中的prefers-color-scheme 媒體查詢。

no-preference 表示用戶未制定操作系統主題。作為布爾值時，為false 輸出。
light 表示用戶的操作系統是淺色主題。
dark 表示用戶的操作系統是深色主題。

說明

這篇文章發布的時候，微信還無法拿到prefers-color-scheme 參數，所以當我們在微信中打開頁面目前不支持暗黑模式。
此方法只是一個簡單demo，可以使用該方法拓展出其他實現方式。
prefers-color-scheme說明
DEMO地址

HTML

 <!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no> <title>頁面適應黑暗模式</title></head><body class=back><div class=models><h1>測試文字</h1></div></body></html>

CSS

 .back {background: white; color: #555;text-align: center}@media (prefers-color-scheme: dark) { .back {background: #333; color: white;} .models {border:solid 1px #00ff00}}@media (prefers-color-scheme: light) { .back {background: white; color: #555;} .models {border:solid 1px #2b85e4}}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。