Html頁(yè)面支持暗黑模式的實(shí)現(xiàn)

2024-08-26 00:14:00

字體：大中小

供稿：網(wǎng)友

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

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

準(zhǔn)備

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

no-preference 表示用戶(hù)未制定操作系統(tǒng)主題。作為布爾值時(shí)，為 false 輸出。
light 表示用戶(hù)的操作系統(tǒng)是淺色主題。
dark 表示用戶(hù)的操作系統(tǒng)是深色主題。

說(shuō)明

這篇文章發(fā)布的時(shí)候，微信還無(wú)法拿到 prefers-color-scheme 參數(shù)，所以當(dāng)我們?cè)谖⑿胖写蜷_(kāi)頁(yè)面目前不支持暗黑模式。
此方法只是一個(gè)簡(jiǎn)單demo，可以使用該方法拓展出其他實(shí)現(xiàn)方式。
prefers-color-scheme說(shuō)明
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>頁(yè)面適應(yīng)黑暗模式</title></head><body class="back"><div class="models"><h1>測(cè)試文字</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}}

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

上一篇：HTMl頁(yè)面中返回頂部的幾種實(shí)現(xiàn)小結(jié)

下一篇：HTML常用meta大全(推薦)