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

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

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

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