I have my current app I am working on, the problem is I want to make the title bar of some color rather than classic white, but is not working, I saw Starbucks pwa and they have the title bar green how to add color ?, the theme color simply shows only when the app loads on windows then defaults back to white.
{
"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"
}
my index.html looks like
<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>