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的黑暗模式相关推荐

苹果sf字体_苹果 iOS 13 黑暗模式设计指南
苹果在 WWDC 大会上发布了黑暗模式,从 macOS Mojave 到 Google I/O 开发者大会来看,iOS 加入黑暗模式已经是一件可预期的事情了. 那么对于设计师来说,我们在设计黑暗模式的 ...
iOS 13 适配，关闭黑暗模式（夜间模式）
关闭黑暗模式方式,在info.plist中添加 User Interface Style Light
flutter iOS 屏蔽黑暗模式
前言因为项目没有考虑到适配黑暗模式的场景,所以为了避免出现各种各样奇葩的问题,我们是建议把黑暗模式关闭,这样加能解决许多的bug. 一.flutter层面设置 @overrideWidget bui ...
iOS开发黑暗模式
iOS 13终于引来了暗黑模式. 每当新特性的到来,iOS开发者们既紧张又有点小兴奋,怀揣着被虐的心态,让我们来看看暗黑模式到底是个啥. 虽然这是一个设计驱动的需求,但是本着一颗虔诚(暴躁)的心,我们 ...
AndroidQ(10)黑暗模式适配
前言:作为一个Android程序员,每年最期待就是Google的发布会啦!!这不,今年的AndroidQ如期而至.这里简单介绍一下Android的新特性: AndroidQ全局暗黑模式隐私权限的更新 ...
ios单应用模式_如何为iOS 13暗模式设置应用
ios单应用模式 Apple launched the much-awaited iOS 13 updates globally on September 19 across all iPhones ...
暗黑模式（黑暗模式，深色模式）适配
暗黑模式(黑暗模式,深色模式)适配全局关闭打开Info.plist 项目配置文件,添加UIUserInterfaceStyle字段,key类型为String, 其value值设置为 Light模式 ...
【iOS 开发】iOS 开发简介 (IOS项目文件 | MVC 模式 | 事件响应机制 | Storyboard 控制界面 | 代码控制界面 | Retina 屏幕图片适配)
一. iOS 项目简介 1. iOS 文件简介创建一个 HelloWorld 项目, 在这个 IOS 项目中有四个目录 : 如下图; -- HelloWorldTests 目录 : 单元测试相关的类 ...
IOS13图标尺寸_苹果iOS 13特性大猜想：新增黑暗模式、多窗口应用、手势导航
本文由腾讯数码独家发布每年,在新版iOS发布之后,苹果内部并非就万事大吉了,技术团队不会就此清闲下来:除所有无法及时完成的特性,或者因任何原因不得不被推迟发布的所有特性外,营销团队认为对于推动iPh ...

html5适配ios的黑暗模式

html5适配ios的黑暗模式相关推荐

最新文章

热门文章