How to change the color of the browser tab according to the website theme color using HTML?

Originally posted here!
To change the color of the browser tab or the browser's interfaces according to your website's theme color, you can use the meta HTML tag inside the head HTML tag and then use the name attribute with the value of theme-color followed by the content attribute having a hex color code or your theme color as the value.

TL;DR

<html>
  <head>
  <!-- Setting the color of the browser's tab to the website's theme color -->
    <meta name="theme-color" content="#7fffd4" />
  </head>
  <style>
    /* Setting the background color to hex color of `#7fffd4` */
    body {
      background-color: #7fffd4;
    }
  </style>
  <body>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum dignissimos
      distinctio ipsa alias accusamus asperiores ullam cum eveniet repellat
      deleniti minus quia iusto error cumque aperiam in laboriosam, repellendus
      dolor sint quo, modi consequuntur ratione pariatur! Quam tempore vero eos
      nesciunt nisi accusantium. Asperiores earum et fugit incidunt, repudiandae
      sapiente quidem ipsum consectetur quos nostrum distinctio velit temporibus
      magni laborum dolore numquam vel beatae accusantium?
    </p>
  </body>
</html>

For example, let's say we have a webpage with some like this,

<html>
  <body>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum dignissimos
      distinctio ipsa alias accusamus asperiores ullam cum eveniet repellat
      deleniti minus quia iusto error cumque aperiam in laboriosam, repellendus
      dolor sint quo, modi consequuntur ratione pariatur! Quam tempore vero eos
      nesciunt nisi accusantium. Asperiores earum et fugit incidunt, repudiandae
      sapiente quidem ipsum consectetur quos nostrum distinctio velit temporibus
      magni laborum dolore numquam vel beatae accusantium?
    </p>
  </body>
</html>

Now let's also define a theme color for this website.

Let's use the hex color code of #7fffd4 (aquamarine color) as the background color of the webpage like this,

<html>
  <style>
    /* Setting the background color to hex color of `#7fffd4` */
    body {
      background-color: #7fffd4;
    }
  </style>
  <body>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum dignissimos
      distinctio ipsa alias accusamus asperiores ullam cum eveniet repellat
      deleniti minus quia iusto error cumque aperiam in laboriosam, repellendus
      dolor sint quo, modi consequuntur ratione pariatur! Quam tempore vero eos
      nesciunt nisi accusantium. Asperiores earum et fugit incidunt, repudiandae
      sapiente quidem ipsum consectetur quos nostrum distinctio velit temporibus
      magni laborum dolore numquam vel beatae accusantium?
    </p>
  </body>
</html>

The webpage now looks like this,

Also if you see in the above screenshot, the background color is changed but the browser's top tab color is still gray, ideally, we would want this color also to be changed according to the theme color of our website which in our case we want it to be the same color as the background color, #7fffd4.

To do that we can use the meta HTML tag inside the head HTML tag, and then use the name attribute with the value of theme-color, and then use the content attribute with the value of our background color hex color code which is #7fffd4.

It can be done like this,

<html>
  <head>
  <!-- Setting the color of the browser's tab to the website's theme color -->
    <meta name="theme-color" content="#7fffd4" />
  </head>
  <style>
    /* Setting the background color to hex color of `#7fffd4` */
    body {
      background-color: #7fffd4;
    }
  </style>
  <body>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum dignissimos
      distinctio ipsa alias accusamus asperiores ullam cum eveniet repellat
      deleniti minus quia iusto error cumque aperiam in laboriosam, repellendus
      dolor sint quo, modi consequuntur ratione pariatur! Quam tempore vero eos
      nesciunt nisi accusantium. Asperiores earum et fugit incidunt, repudiandae
      sapiente quidem ipsum consectetur quos nostrum distinctio velit temporibus
      magni laborum dolore numquam vel beatae accusantium?
    </p>
  </body>
</html>

See the above code live in the codesandbox.

That's all 😃!

Blog

How to change the color of the browser tab according to the website theme color using HTML?

MELVIN GEORGE

TL;DR

Join Our Newsletter. No Spam, Only the good stuff.

Related