最近幾天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及以上,並且需要打開手機的黑暗模式,選擇深色,效果就出來了