html5適配ios的黑暗模式

最近幾天app裏嵌入的wap頁需要做ios黑暗模式的適配,嘗試了一下H5的適配,現在把方法記錄一下

具體方法如下:原有樣式保持不變, 黑暗模式的樣式追加在原有樣式最後邊並且需要嵌套在標籤 @media (prefers-color-scheme: dark) {}中

@media (prefers-color-scheme: dark) {

    :root { --c39:#fff;

    --c56:#989DA6;

    --c98:#989DA6;

    --group:#17171A;

    --body-background:#17171A;

    --white:#fff;

    }

 

    body {background-color: #17171A;}

    .graybg{background:#0E0E10;}

    .databox{ background:#212124}

    .databox table tr th{color:#989DA6;}

    .databox table tr td{color:#fff;}

    .title_bd{border-bottom:1px solid #252529;}

    .data-list dl{border-right:1px solid #252529}

 

    .chart-right-txt{color: #666;}

}

 

測試查看黑暗效果時需要ios版本13及以上,並且需要打開手機的黑暗模式,選擇深色,效果就出來了

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章