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 😃!

Top comments (0)

An Animated Guide to Node.js Event Loop

Node.js doesn’t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.