如何向标题栏 PWA 添加颜色？
Ric*_*son 4 progressive-web-apps
我正在开发当前的应用程序，问题是我想将标题栏设置为某种颜色而不是经典白色，但不起作用，我看到星巴克 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>将其添加到您的 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">
| 归档时间： |
|
| 查看次数： |
4122 次 |
| 最近记录： |