关于html:小程序深色模式样式适配

  1. 开启 DarkMode
    app.json中配置darkmodetrue,示意开启深色模式
  2. 配置变量文件 theme.json, 并在 app.json 中配置门路引入
    “themeLocation”:”theme.json”
  3. theme.json中定义相干变量

    {
        "light": {
            "navigationBarBackgroundColor": "#fff",
            "navigationBarTextStyle": "black"
        },
        "dark": {
            "navigationBarBackgroundColor": "#000",
            "navigationBarTextStyle": "white"
        }
    }
  4. app.json中利用配置属性,以@结尾援用变量

    "window": {
        "navigationBarBackgroundColor": "@navigationBarBackgroundColor",
        "navigationBarTitleText": "考研政治定制学",
        "navigationBarTextStyle": "@navigationBarTextStyle"
    },
  5. WXSS 适配,通过媒体查问 prefers-color-scheme 适配不同主题
page {
    background: #f2f2f2;
}
@media (prefers-color-scheme: dark) {
    .page {
        background: #000;
    }
}

参考:小程序深色模式适配官网文档

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据