隨著互聯(lián)網(wǎng)的發(fā)展，越來越多的的人進(jìn)入了IT行業(yè)，那么如何使用html實現(xiàn)暗黑模式？你們知道嗎？為了讓大家更加了解html實現(xiàn)暗黑模式的方法，小編給大家總結(jié)了以下內(nèi)容，一起往下看吧。

成都創(chuàng)新互聯(lián)公司網(wǎng)絡(luò)公司擁有十余年的成都網(wǎng)站開發(fā)建設(shè)經(jīng)驗，千余家客戶的共同信賴。提供成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、網(wǎng)站開發(fā)、網(wǎng)站定制、買友情鏈接、建網(wǎng)站、網(wǎng)站搭建、自適應(yīng)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計師打造企業(yè)風(fēng)格，提供周到的售前咨詢和貼心的售后服務(wù)

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

準(zhǔn)備

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

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

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

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

說明

這篇文章發(fā)布的時候，微信還無法拿到 prefers-color-scheme 參數(shù)，所以當(dāng)我們在微信中打開頁面目前不支持暗黑模式。

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

prefers-color-scheme說明

DEMO地址

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實現(xiàn)暗黑模式的簡略介紹，當(dāng)然詳細(xì)使用上面的不同還得要大家自己使用過才領(lǐng)會。如果想了解更多，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道哦！