How to change the color of the browser tab according to the website theme color using the manifest.json file?

#resource

Originally posted here!
To change the color of the browser tab or the browser's interfaces according to your website's theme color using the manifest.json file, you can add the theme_color key in the JSON and the value is the hex color code or your theme color.

TL;DR

{
  "name": "My Awesome App",
  "short_name": "AwesomeApp",
  "theme_color": "#7fffd4" // setting the theme color using the `theme_color` key in the `manifest.json` file
}

For example, let's say we have a manifest.json file with some basic keys like short_name, name like this,

{
  "name": "My Awesome App",
  "short_name": "AwesomeApp"
}

Now to define a theme color on this manifest.json file you can add a key called theme_color and then use the hex color code as its value.

Let's use the hex color code #7fffd4 (aquamarine color) as the theme color.

It can be done like this,

{
  "name": "My Awesome App",
  "short_name": "AwesomeApp",
  "theme_color": "#7fffd4" // setting the theme color using the `theme_color` key in the `manifest.json` file
}