zoukankan      html  css  js  c++  java
  • [ App引擎 ] 关于苹果iOS13深色模式

    最近大家很关注深色模式,原因是苹果发布了一条官方公告,原文https://developer.apple.com/news/?id=03042020b,一些媒体在此时也发布了“微信不适配深色模式将被苹果下架”的消息,进而引起广泛关注。实际上苹果目前并未强制要求应用必须支持深色模式,只是要求从2020年4月30日开始,所有提交的应用必须基于iOS13 SDK编译(云编译服务器早在去年iOS13刚发布后就已经支持)。

    如果您的应用暂时不想支持深色模式,则可以不用做什么修改;如果想支持深色模式,那么首先应该从产品层面设计一下深色模式的效果,开发则可以参考以下方法:


    全局配置

    目前应用默认关闭了深色模式,要支持深色模式需要先在config.xml中配置interfaceStyle字段值为Automatic,参考https://docs.apicloud.com/Dev-Guide/app-config-manual#14-16

    <preference name="interfaceStyle" value="Automatic"/>

    api支持

    引擎和模块的部分UI类视图目前已经适配了深色模式,引擎的api对象下提供了getInterfaceStyle、setInterfaceStyle方法来获取和设置当前外观模式,同时提供了interfacestylechanged事件来监听变化,在页面中如果使用了引擎、模块带UI的视图,则可以在监听到变化后动态设置相关属性。

    注:使用TabLayout时,对于导航栏、tabBar的背景和文字颜色,如果没有主动设置颜色值,则TabLayout将自动适配深色模式;若设置了,则需要自行在监听外观模式变化后处理。

    页面CSS处理

    一种方法是将深色、浅色模式对应的页面样式放到单独的两个css文件中,通过js来动态设置link标签引入哪个样式文件,类似于切换主题功能;

    另一种方法则是使用媒体查询来实现,为了在网页中适配深色模式,苹果推出了一个新的媒体查询规范 prefers-color-scheme,可以检测出深色、浅色模式,如:

    @media (prefers-color-scheme: dark) 
    {
        body {
            
            color: #fff;
        }
    }

    然后可以配合使用自定义属性的方式来支持,如

    :root {
        --app-bg-color: #fff;
        --app-text-color: #000;
    }
    @media (prefers-color-scheme: dark) {
        :root {
            --app-bg-color: #000;
            --app-text-color: #fff;
        }
    }
    body{
       
        color: var(--app-text-color);
    }


    如果想快速支持深色模式可以使用CSS滤镜反转颜色,但要注意图片也会被反转,使用时尽量应用到具体的元素上,避免全局设置。

    @media (prefers-color-scheme: dark) {
        html {
            filter: invert(100%);
        }
    }

  • 相关阅读:
    windows10的子系统linux(wsl)
    关于js的比较
    关于parseInt,很神奇
    vue修改数组元素通过arr[0]=val的方式不生效
    wps表格 VLookUp 函数
    青年大学习_收集截图方案
    个人记录_uwsgi,nginx与django之间的关系以及各自的作用
    Ubuntu16.04系统中创建新用户
    idea 启动或debug springboot web项目特别慢的解决方案
    利用Aop实现动态分库分表
  • 原文地址:https://www.cnblogs.com/APICloud/p/12486681.html
Copyright © 2011-2022 走看看