时间戳

首页 > 解决方案 > 如何更改 Vue PWA 中（Android）导航栏的颜色？

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

问题描述

如何为 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 设置会覆盖/覆盖清单。但无论如何，我至今无法设置底部导航区域的颜色。在黑暗模式下有点烦人。

标签： androidprogressive-web-apps

解决方案

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

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

推荐阅读