html如何實現暗黑模式
- 王林轉載
- 2020-04-05 15:30:473948瀏覽
下面會為大家簡單的說一下如何讓頁面支援暗黑模式。
準備
其實，我們只是需要使用到css中的 prefers-color-scheme 媒體查詢。
no-preference 表示使用者未制定作業系統主題。作為布林值時，為 false 輸出。
light 表示使用者的作業系統是淺色主題。
dark 表示使用者的作業系統是深色主題。
（推薦教學：html教學）
說明
#這篇文章發佈的時候，微信還無法拿到 prefers-color -scheme 參數，所以當我們在微信中開啟頁面目前不支援暗黑模式。
此方法只是一個簡單demo，可以使用該方法拓展其他實作方式。
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刪除
上一篇：html中的空連結有什麼用下一篇：html中的空連結有什麼用