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

5 2

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 πŸ˜ƒ!

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

Retry later
Retry later