Vue-cli: Changing the "theme_color" in manifest.json does not change the theme color

[wahidrahim]

Version

3.0.0-beta.6

Reproduction link

https://github.com/wahidrahim/vue-theme_color-bug

Steps to reproduce

1. create a vue app with PWA support
2. run dev server
3. visit the app with a mobile device, the navbar color is: #4DBA87
4. change the "theme_color" attribute in manifest.json to "#FF0000" for example
5. visit the app with a mobile device, the navbar color is still: #4DBA87

using vue-cli 3.0.0-beta.9

What is expected?

<meta name="theme-color" content="#4DBA87">

should change to

<meta name="theme-color" content="#FF0000">

What is actually happening?

<meta name="theme-color" content="#4DBA87">

remains the same

---

If you add <meta name="theme-color" content="#008996"> to the public/index.html then the change takes place.
However, looking at the source in the browser, the injected meta tags are still there: <meta name="theme-color" content="#4DBA87"> and others.

Where are these coming from, and how do you change it?

There is a thread in the forums about this as well: https://forum.vuejs.org/t/vue-cli-3-where-i-change-theme-color-for-address-bar/29951/6

[yyx990803]

Please read the Readme of the pwa plugin.

[dnhyde]

Here is the readme with the config that can be set for the pwa plugin.
I am not an expert and did not know where to put the vue.config.js file. If someone has the same doubt, it more easy than it seems, just put it at the top level of you app structure (at the same level of your package.json file) hope to save some time to other "noobs" like me :sweat_smile:

[joelpro2]

And what if you want your pwa theme color to be choosable by users?