html5适配ios的黑暗模式

本文主要是介绍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及以上，并且需要打开手机的黑暗模式，选择深色，效果就出来了

这篇关于html5适配ios的黑暗模式的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---