Vue-cli 3 - where I change theme-color for address bar

I started using vue-cli@3, but I am having some trouble to find where to change some stuff on code.
Besides other problems in finding webpack settings to edit it (I did not solve it, I just gave up), one very simple thing I could not find where to change is this:

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

It is not on /public/index.html, and changing on manifest.json dont affect it. I tried to look in /node_modules to see if I could find something under vue/cli-service folder, but… got no success at all.
Where should I find it?
Thanks in advance!

You were already looking in the right place - just put it in /public/index.html

It’s not there already because it is not a common meta tag to add (I have no idea what you need it for, to be honest)

Thanks, Linus! I need it to change the color of the Address Bar on chrome mobile. By default, it comes in Vue’s green tone. That is why I was looking for some config file to change it, because it comes with a default green value, instead of default.

Oh, you did use the pwa option? Well, that is set in manifest.json, and changing it should work. You say it doesn’t affect anything, have you tried cleaing all stored local etc. in devtools? restarted the dev server?

(Adding the meta tag on index.html did work, the address bar got the correct color, I am just answering for the follow up comment about the manifest.json)

Yes, I tried cleaning stored local stuff on DevTools, and also restarting the dev server. It even show correct Theme Color and Background Color on manifest tab on DevTools. But the header still was Vue’s green tone.

It is weird because, even if the meta tag is not present on public/index.html file, when I check source code on browser, it is added there. That is yet another reason I thought it was added by some script under some hidden folder or something.

But anyway, adding it directly on public/index.html works. In case it was being added by some script, it looks like by adding it on the file overwrites the default behavior.

I notice that a whole set of meta tags are being added to page AFTER vue loads. The tags aren’t being added to the html page at build time. Updating the manifest.json updates the file itself, but not the values injected into the page’s header. It looks like the options for vue-cli’s HtmlPwaPlugin are responsible for doing this. It will treat the package.json’s name as the app name used for the apple-mobile-web-app-title meta tag, and uses the defaults found here for the theme-color and msTileColor meta tags.

image

I got it working by modifying my vue.config.js as follows (ignore the entry modification):

var manifestJSON = require("./public/manifest.json");

pwaArgs = {
  themeColor: manifestJSON.theme_color,
  name: manifestJSON.short_name,
  msTileColor: manifestJSON.background_color
};

module.exports = {
  lintOnSave: false,
  configureWebpack: {
    entry: ["babel-polyfill", "whatwg-fetch", "./src/main.ts"]
  },
  chainWebpack: config => {
    config.plugin("pwa").tap(args => {
      return [pwaArgs];
    });
  }
};

I hope this helps!

2 Likes

The problem it that Vue is forcing their own theme color(s) onto it’s users by adding the meta tag at build time. There is no means for the developer to over ride this clearly. Adding the tag in the index, manifest, or the method @someone1 uses doesn’t always work - it just adds a duplicate meta tag.

This is absolutely no reason for that tag to be there to begin with and it should be removed. It should be only added by the end developer, not a framework injecting it.

There is:

module.exports = {
  pwa: {
    themeColor: '#000'  
  }
}

Debatable. If you choose to make the framework add PWA-related stuff by choosing the PWA option during creation, why should it skip inly this one thing?

As I said, it just creates a duplicate meta tag - meaning it doesn’t override what is being injected.

That’s not what i experienced last time i hat feature and if it happens for you, it’s a bug.

Please open an issue on github

Just came across this as well, have to say this was quite unintuitive for me as a new user. You have to dig through a lot of configuration references to figure out how this works, and do pretty good QA on a specific device before you realize that your Android users aren’t getting the platform default behavior, but instead they see the brand color of a technology that is unrelated to their user experience (so end users just see weird bright green for no apparent reason).

I had even gone through manifest.json upon my initial setup and thought nothing of it, and only much later came to find out that I actually have Vue’s theme color in use on my mobile device even though I knew I had changed it.

For me setting the value in vue.config.js ultimately did the trick, and also affected some of the other meta tags:

<meta name=theme-color content=#000000>
<link rel=mask-icon href=/img/icons/safari-pinned-tab.svg color=#000000>
<meta name=msapplication-TileColor content=#000000>

My next question is though, what’s the appropriate way to cancel all of this behavior? Should I pass null to ensure my users get the default behavior on each platform?

To be honest this is a pretty clear case of a bad default. It’s one thing if this default was visible in the codebase somewhere but it’s not. Like I can understand a default stylesheet for a hello world page, that demonstrates functionality to the user, but it’s not like you can look for this color value in your project and change/remove it.

I can’t see any reason why such a complicated, obscure, hard-to-understand and barely documented set of features is toggled with Vue’s brand color by default. How many users and projects would actually want to use this color specifically? I can totally see a lot of people merrily rolling this green into production before realizing they have to fix it and go through the trouble of finding out that this one non-obvious configuration variable is what they need to change, instead of the value they actually see in their codebase.

Can’t see any benefit to this, and a much more sensible default would be to default to null and leave out the theme color-related meta information unless the user has explicitly set their own color. That way there’s at least no surprises.

There’s certainly always room for improvement, and we apprechiate you taking the time to write this down.

Unfortunately you chose the wrong place. Would you mind posting this as a feature request to the vue-cli repo on github?

Thanks!

Can definitely do that, cheers!

I filed https://github.com/vuejs/vue-cli/issues/3269

After doing some testing I realized you actually can’t really turn this stuff off (i.e. remove the meta tags) even if you want to and actively pass falsy values to the config options. This is definitely an issue with the feature implementation and goes beyond an unintuitive and unhelpful default.

Considering the whole behavior IRL on various platforms is so obscure, I think Vue CLI could do a lot to kinda parse the behaviors around theme coloring on various platforms and maybe provide a little bit more abstraction around the various ways to impact it and also document it thoroughly – definitely added value to devs!

2 Likes

Did someone found a way to override pwa inserting meta-tags. I prefer to set things manually like multiple touch icons, splash screens. Right now I have to deal with meta-tags inserted by the pwa and thing I add myself in the index.html in public.

I think indeed that a developer needs control on what should be inserted.