Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Changing the "theme_color" in manifest.json does not change the theme color #1195

Closed
wahidrahim opened this issue Apr 29, 2018 · 3 comments
Closed

Changing the "theme_color" in manifest.json does not change the theme color #1195

wahidrahim opened this issue Apr 29, 2018 · 3 comments

Comments

@wahidrahim
Copy link

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
Copy link
Member

Please read the Readme of the pwa plugin.

@dnhyde
Copy link

dnhyde commented May 13, 2018

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 😅

@joelpro2
Copy link

joelpro2 commented Nov 5, 2019

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

This was referenced Apr 13, 2021
Open
Open
This was referenced Apr 26, 2021
Open
Open
Open
@carlosrojaso carlosrojaso mentioned this issue Nov 4, 2022
Open
@snyk-bot snyk-bot mentioned this issue Nov 5, 2022
Open
@carlosrojaso carlosrojaso mentioned this issue Dec 25, 2022
Open
@posrix posrix mentioned this issue Dec 25, 2022
Open
@posrix posrix mentioned this issue Oct 1, 2023
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@yyx990803 @wahidrahim @dnhyde @joelpro2