首頁 >web前端 >html教學 >html如何實現暗黑模式

html如何實現暗黑模式

王林
王林轉載
2020-04-05 15:30:473994瀏覽

html如何實現暗黑模式

下面會為大家簡單的說一下如何讓頁面支援暗黑模式。

準備

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

no-preference 表示使用者未制定作業系統主題。作為布林值時,為 false 輸出。

light 表示使用者的作業系統是淺色主題。

dark 表示使用者的作業系統是深色主題。

(推薦教學:html教學

說明

#這篇文章發佈的時候,微信還無法拿到 prefers-color -scheme 參數,所以當我們在微信中開啟頁面目前不支援暗黑模式。

此方法只是一個簡單demo,可以使用該方法拓展其他實作方式。

prefers-color-scheme說明

DEMO位址

HTML

<!DOCTYPE html>
<html>
<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>
<div><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}
}

相關影片教學推薦:html影片教學

以上是html如何實現暗黑模式的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:jb51.net。如有侵權,請聯絡admin@php.cn刪除