DEV Community

Cover image for How to change the color of the browser tab according to the website theme color using the manifest.json file?
MELVIN GEORGE
MELVIN GEORGE

Posted on • Originally published at melvingeorge.me

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

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
}
Enter fullscreen mode Exit fullscreen mode

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"
}
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

That's all 😃!

Latest comments (0)