Cannot turn off theme coloring (due to PWA default behavior)

[jerryjappinen]

What problem does this feature solve?

Vue CLI's Documentation specifies two configuration values (pwa.themeColor and pwa.msTileColor) that must be set correctly to print the meta tag enforcing theme coloring on various platforms. These are separate from the value set in manifest.json. If the user sets no value, these default to strings '#4DBA87' and '#000000' respectively.

In the case that I don't want to specify this behavior at all though – which I believe is a sensible default due to the obscurity and necessary QA load involved with the impact of this coloring – there seems to be no way to not set these meta tags. Basically the impact is that I must always choose some coloring, even if I don't want to. A concrete end-user-facing issue this brings up is shown here, in the screenshot from my Galaxy phone's app switcher:

To make it clear what's happening in the picture: the bottom app has the meta tags set to #000000 so the icon appears on a black background. But the icon is designed to be transparent and work on a solid background surface. I also don't want to se the theme color to white or anything else, I just want it to be whatever the platform uses by default (often it's a light grey, or something else depending on the platform).

As far as I understand, this is special behavior triggered by the theme coloring that I'd rather not have. The other icon has just a transparent background and no theme coloring.

As far as I know, there is no way to "properly" disable this if the meta tag has to go there. Like maybe you can set an incorrect color value so browsers fail at setting it, but certainly there's no intuitive way, it's not documented and for example Google's developer documentation makes no mention of how to tell the browser/platform to not enforce a theme color at all. Not that I would expect it to: I can't see why a developer would want to add such client-side configuration to explicitly tell the browser they don't want it to do anything.

Even though I'd expect no meta tags enforcing active theme coloring to appear by default, I did attempt to cancel this behavior by passing null to both config values, but this still produced the meta tags:

There is more discussion about the confusion around this configuration on forum.vuejs.org

Finally a small disclaimer: it's really hard to test and debug theme coloring behavior throughout app builds, platforms, Android and Chrome versions etc. It's partly for this reason that I think it's best to leave this untouched by default configuration, as not setting any configuration seems to lead to the most stable experience for end users. I'm still not totally sure what are all the moving parts that impact for example the app icon background on my Galaxy test device, but not being able to turn the theme coloring off in a reliable way (i.e. removing meta tags and manifest.json values) is definitely an issue for a developer trying to figure this out.

What does the proposed API look like?

To fix this issue and also ease the pains outlined on the forum, I propose that:

• When pwa.themeColor or pwa.msTileColor is falsy, the respective meta tags are not printed
• pwa.themeColor and pwa.msTileColor both default to a falsy value

[LinusBorg]

1. That you can't turn it off is something I would consider a bug.
2. I also think it's worth discussing to make improve default behaviour. Adding the Vue color as a default is nice as a demo, but since we add it with a bit of magic that'S not very transparent, this might not justify it.

[alx-khramov]

Found this issue in Google trying to understand how to deal with this feature. It is really not transparent. I guess vue-cli could at least ask a user during project setup - do they want this feature as a default or not.

[jondashkyle]

Also ran into this issue during extensive QA on Android, and it took quite a while to chase down. A suggestion would be to simply not create the meta tag if the theme_color key is null in the manifest.

[kylemcdonald]

Working on same project as @jondashkyle above, my preference would be to not add any meta tags unless explicitly specified. If specified, respecting the manifest.json values everywhere would be ideal.

[kasperkamperman]

A related issue that shows the need for "more intelligent" default behaviour.

I use generated splash screens for iOS, I found that you need to declare <meta name="apple-mobile-web-app-capable" content="yes" /> in front of this, otherwise they don't show up.

Problem with Vue PWA is that it adds this meta-tag double (because it's also added by appleMobileWebAppCapable: "yes").

So the ability to prevent adding (like null) would be very welcome.

[KristineTrona]

Is there any update on this? I am having the exact same problem as @kasperkamperman and it would be very useful if we could avoid passing some meta tags from the pwa in vue.config.js

[kasperkamperman]

You have to hard-code some things in your index.html and manifest.json in the public folder. That's what I ended up doing.

In the end you might be better off doing PWA work manually yourself. This plugin does a lot of things in another way or half. If you want full control on your PWA experience, you can do it yourself as well without this plugin.

[GabrielGMartinsBr]

I am facing the same problem and made a pull request to fix this #5820

[ironhacker]

Instead of null, I used an empty string:

  pwa: {
    themeColor: '',
    msTileColor: '',
  }

Produces

<meta name="theme-color" content="">
<meta name="msapplication-TileColor" content="">

This produces the desired behavior, but not ideal.