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

November 23, 2022 - 1 min read

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
}

That's all 😃!