5

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.

enter image description here

{
  "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>

2 Answers 2

9

Add this inside your HTML's <head>

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

You must add a theme_color key to your manifest.json. More information can be found here.

2
  • I did already but it was not working ! on chrome windows 11, this theme_color thing works only when app is loading.
    – Richardson
    Commented Sep 2, 2022 at 0:25
  • Please include this information in your answer along with your manifest.json.
    – Michael M.
    Commented Sep 2, 2022 at 0:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.