manifest.json中的PWA theme_color显示错误的颜色

时间:2018-06-08 17:31:58

标签: navbar angular6 manifest.json pwa

我正在构建一个Angular6 PWA。主题颜色应该与导航栏完全相同(#222)但无论我在哪里更改它,主题总是采用不同的颜色。 如果我在索引中将它设置为#333,那么效果最好,因为它实际上接近#222但不完全相同。有什么想法吗?

手机上的应用只有清单theme_color:

enter image description here

index.html中带有主题颜色的应用

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

enter image description here

浏览器中的我的清单:

enter image description here

我的manifest.json

{
  "lang": "de-DE",
  "name": "Incredible Soundboard",
  "short_name": "Incredible Soundboard",
  "theme_color": "#222",
  "background_color": "#d9534f",
  "display": "standalone",

我的index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Incredible Soundboard</title>
  <base href="./">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="manifest" href="manifest.json">
  <!-- <meta name="theme-color" content="#222"> -->
  <link rel="mask-icon" href="/assets/images/icons/safari-pinned-tab.svg" color="#222">
  <link rel="apple-touch-icon" sizes="180x180" href="/assets/images/icons/apple-touch-icon.png">
</head>

我的bootstrap navbar css

.navbar-inverse{
  background-color: #222;
  margin-bottom: 0px;
  border-color: transparent;
}

0 个答案:

没有答案