自19年開始，Android和IOS平臺(tái)，都開始玩暗黑模式。當(dāng)然這沒什么不好，但是當(dāng)我們的頁面被用戶在暗黑模式打開之后，會(huì)被那傳統(tǒng)大白色瞬間閃瞎雙眼。

下面會(huì)簡(jiǎn)單的說一下如何讓頁面支持暗黑模式。

準(zhǔn)備

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

no-preference 表示用戶未制定操作系統(tǒng)主題。作為布爾值時(shí)，為?false 輸出。

light 表示用戶的操作系統(tǒng)是淺色主題。

dark 表示用戶的操作系統(tǒng)是深色主題。

說明

這篇文章發(fā)布的時(shí)候，微信還無法拿到?prefers-color-scheme 參數(shù)，所以當(dāng)我們?cè)谖⑿胖写蜷_頁面目前不支持暗黑模式。

此方法只是一個(gè)簡(jiǎn)單demo，可以使用該方法拓展出其他實(shí)現(xiàn)方式。

HTML

頁面適應(yīng)黑暗模式

測(cè)試文字

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}

}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

總結(jié)

以上是生活随笔為你收集整理的藏青色在html页面怎么写,Html页面支持暗黑模式的实现的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。