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

Question

如何为 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' 
    }
}

类似于如何在 PWA 中更改 Android 导航栏颜色？，除了发帖者改变了他的问题按钮的颜色。

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

Answer 1

导航栏的颜色根据您在 中定义的颜色而变化manifest.json。并非每个浏览器都支持该清单，您可能需要使用一些meta标签来做到这一点。

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