如何更改 Vue PWA 中（Android）导航栏的颜色？答案

【问题标题】：How to change the color of the (Android) navigation bar in a Vue PWA?如何更改 Vue PWA 中（Android）导航栏的颜色？
【发布时间】：2020-08-07 15:41:14
【问题描述】：

如何为 Vue.JS PWA 应用设置 Android 底部导航栏颜色？当我设置themeColor 时，顶部地址栏的颜色正确更改，但导航区域仍然是全白 (#fff)。

我已经试过了：

在 manifest.json 中：

{
    "start_url": "/.",
    "display": "standalone",
    "background_color": "#000000",
    "theme_color": "#000000"
}

在 vue.config.js 中：

module.exports = {
    pwa: {
        workboxPluginMode: 'InjectManifest',
        workboxOptions: {
            swSrc: 'public/service-worker.js',
            exclude: [
                /_redirects/,
                /\.map$/, 
                /manifest\.json$/ 
            ],
        },
        start_url: '/.',
        display: 'standalone',
        background_color: '#000000',
        themeColor: '#000000',
        msTileColor: '#000000',
        backgroundColor: '#000000',
        theme_color: '#000000' 
    }
}

类似于How to change the Android navigation bar color in a PWA?，只是发帖人将他的问题改成了按钮的颜色。

我认为 vue.config.js 中的 PWA 设置会覆盖/覆盖清单。但无论如何，我至今无法设置底部导航区域的颜色。在黑暗模式下有点烦人。

【问题讨论】：

我认为没有办法控制底部按钮栏。我刚刚检查了我的 Pixel 打开不同的 PWA 和本机应用程序。除了一个以外，其他都是标准的黑色。 Chic Fil 应用程序将其更改为带阴影的深红色。所以我认为这更多地与个人手机设置有关，而不是应用程序配置。
而且仅供参考，我的手机默认使用暗模式。哦，这不是与 Vue 相关的问题。不同的关注点。
嗨，克里斯，这是一个很好的洞察力。如果它不是 Vue，那么知道它是什么吗？
web manifest 是一个原生的 web api，不是任何框架的一部分。它是由您的网络服务器提供的文件。
我认为您的要求是不可能的。这一直是一个问题，但似乎不在 chromium 团队的优先级列表中（请参阅问题跟踪器：bugs.chromium.org/p/chromium/issues/detail?id=797527）。如果太烦人，请考虑将显示模式从standalone 更改为fullscreen。

标签： android progressive-web-apps

【解决方案1】：

导航栏的颜色会根据您在manifest.json 中定义的颜色而变化。并非每个浏览器都支持该清单，您可能需要使用一些 meta 标记来执行此操作。

查看此存储库：https://github.com/gokulkrishh/awesome-meta-and-manifest

【讨论】：

除非你有相反的令人信服的证据，否则我确信这个 2019 年的 Github 并不能解决这个问题。据我了解，2020 年根本不支持更改此栏的颜色。真遗憾。