站長(zhǎng)資訊網(wǎng)
下面會(huì)為大家簡(jiǎn)單的說一下如何讓頁面支持暗黑模式。
準(zhǔn)備
其實(shí)，我們只是需要使用到css中的 prefers-color-scheme 媒體查詢。
no-preference 表示用戶未制定操作系統(tǒng)主題。作為布爾值時(shí)，為 false 輸出。
light 表示用戶的操作系統(tǒng)是淺色主題。
dark 表示用戶的操作系統(tǒng)是深色主題。
（推薦教程：html教程）
說明
這篇文章發(fā)布的時(shí)候，微信還無法拿到 prefers-color-scheme 參數(shù)，所以當(dāng)我們?cè)谖⑿胖写蜷_頁面目前不支持暗黑模式。
此方法只是一個(gè)簡(jiǎn)單demo，可以使用該方法拓展出其他實(shí)現(xiàn)方式。
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>頁面適應(yīng)黑暗模式</title> </head> <body> <div><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} }
相關(guān)視頻教程推薦：html視頻教程
