Skip to content
Related Articles

Related Articles

How to change browser theme-color using HTML ?

View Discussion
Improve Article
Save Article
Like Article
  • Difficulty Level : Basic
  • Last Updated : 16 Dec, 2021

In this article, we will know how to change the browser theme-color in HTML. Suppose that if we want our website to appear in green color along with changing the browser theme color which will be the same as our website, then we can use a meta tag with name and content attribute.

Meta Tag: The <meta> tag is used in the <head> element of HTML Document. It defines meta-data about the HTML document.

theme-color: The theme-color is the value used in the name attribute of the meta tag. The theme-color provides color to the browser to display as a theme, that color is provided by color code or color name in the content attribute of the meta tag.

 

Syntax:

<meta name="theme-color" content="#1bb566">

Approach: We will declare the name attribute that has value as theme-color and, the content attribute will have any color Hex-code or a color name that we want.

Example 1: Using Color hex-code:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Change Browser theme-color</title>
    <meta name="theme-color" content="#1bb566">
 </head>
  
<body>
    <h1>Welcome To GFG</h1>
</body>
  
</html>

Output:

CHROME ANDROID

Example 2: Using Color Name:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Change Browser theme-color</title>
    <meta name="theme-color" content="blue" />
</head>
  
<body>
    <h1>Welcome To GFG</h1>
</body>
  
</html>

Output:

CHROME ANDROID

Note: The theme-color value will not work in Android Chrome with dark mode. In order to see the result, disable the dark mode of the browser.


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!