天天看點

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