The color of navigation bar changes according to the colors that you’ve defined in manifest.json. That manifest is not supported by every browser, you you might want to use some meta tags to do it.

Check out this repository: https://github.com/gokulkrishh/awesome-meta-and-manifest

How to set the Android bottom navigation bar color for a Vue.JS PWA application?
The top address bar changes color correctly, when I set the themeColor, but the navigation area remains full white (#fff).

I’ve already tried:

In manifest.json:

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

In 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' 
    }
}

Similar to How to change the Android navigation bar color in a PWA?, except that the poster changed his question the color of the buttons.

I think the PWA settings in vue.config.js overwrite/overrule the manifest. But in any case, I am thus far unable to set the color of the bottom navigation area. Kinda annoying when in dark mode.