CODEWITHSUNDEEP
androidprogressive-web-apps
svenema
svenema

Reputation: 2506

How to change the color of the (Android) navigation bar in a Vue PWA?

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).

enter image description here

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.

Upvotes: 5

Views: 3037

Answers (1)

Orkhan Huseynli
Orkhan Huseynli

Reputation: 1059

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

Upvotes: 1

Related Questions