如何给标题栏 PWA 添加颜色？答案

【问题标题】：How to add a color to a title bar PWA?如何给标题栏 PWA 添加颜色？
【发布时间】：2022-12-19 15:06:32
【问题描述】：

我有我当前正在使用的应用程序，问题是我想使标题栏的颜色而不是经典的白色，但是不起作用，我看到星巴克 pwa 并且他们的标题栏是绿色的如何添加颜色？，主题颜色仅在应用程序在 Windows 上加载时才显示，然后默认返回白色。

{
  "short_name": "app",
  "name": "app",
  "icons": [
    {
      "src": "/icon-48x48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/icon-maskable-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/icon-maskable-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "start_url": "/app",
  "display": "standalone",
  "theme_color": "#0d4c73",
  "background_color": "#00FF00",
  "description": "yada yada yada"
}

我的 index.html 看起来像

<head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/apple-touch-icon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="bla blaba" />
    <meta name="keywords" content="Keywords" />
    <!-- <meta name="theme-color" content="#383838" /> -->
    <meta name="background-color" content="#4222e1" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.
      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->

    <!-- IOS -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="red" />
    <meta name="apple-mobile-web-app-title" content="PWAGram" />

    <!-- Windows -->
    <meta name="msapplication-navbutton-color" content="red" />
    <meta name="msapplication-TileColor" content="red" />
    <meta name="msapplication-TileImage" content="ms-icon-144x144.png" />
    <meta name="msapplication-config" content="browserconfig.xml" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>App</title>
  </head>

【问题讨论】：

标签： progressive-web-apps

【解决方案1】：

您必须将 theme_color 密钥添加到您的 manifest.json。更多信息可以在here找到。

【讨论】：

我已经做了，但没有用！在 chrome windows 11 上，这个 theme_color 东西只有在应用程序加载时才有效。
请在您的回答中包含此信息以及您的manifest.json。

【解决方案2】：

在你的 HTML 中添加这个<head>

<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#0ed3cf">
<meta name="msapplication-TileColor" content="#0ed3cf">
<meta name="theme-color" content="#0ed3cf">

【讨论】：