The theme-color meta tag did not contain a valid CSS color

问题

I have a PWA app and when I do an Audit using the Chrome development tools, I get this message saying the CSS color code is invalid:

Failures: The theme-color meta tag did not contain a valid CSS color.

I beg to differ. It's a valid CSS color code.

Also the Google dev page says: Lighthouse does not test whether the values are valid CSS color values. but that's contrary to what the audit complains about.

I searched for this message and there's very little, or should I say, next to nothing, explaining its rationale.

The index.html file contains:

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

The manifest.json file contains:

 "theme_color": "#E8EAF6",
  "background_color": "#fafafa",

I also tried with the white color. No better.

At a loss.

UPDATE: I was overwriting the theme colour with a misuse of the setMetaData method. I was passing it a json object that was missing the colour property. I now changed its signature and pass it the background colour:

public setMetaData(title: string, description: string, color: string, image: string): void {
  this.title.setTitle(title);

  const tags: Array<MetaDefinition> = [
    { name: 'description', content: description },
    { name: 'theme-color', content: color },
    { name: 'twitter:card', content: 'summary' },
    { name: 'twitter:image', content: image },
    { name: 'twitter:title', content: title },
    { name: 'twitter:description', content: description },
    { name: 'apple-mobile-web-app-capable', content: 'yes' },
    { name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent' },
    { name: 'apple-mobile-web-app-title', content: title },
    { name: 'apple-touch-startup-image', content: image },
    { name: 'og:title', content: title },
    { name: 'og:description', content: description },
    { name: 'og:image', content: image },
  ];
  tags.forEach((tag: MetaDefinition) => this.meta.updateTag(tag));
}

private setAppMetaData(): void {
  const title: string = this.translateService.instant('app.title');
  const description: string = this.translateService.instant('app.description');
  const themeColor: string = '#E8EAF6';
  const image: string = 'assets/icons/icon-192x192.png';
  this.screenDeviceService.setMetaData(title, description, themeColor, image);
}

The javascript still overwrites the meta tag in the index.html file but this time with a correct colour value: <meta name="theme-color" content="#E8EAF6">

来源：https://stackoverflow.com/questions/61566237/the-theme-color-meta-tag-did-not-contain-a-valid-css-color

标签

angular

progressive-web-apps

Lighthouse