How to change browser theme-color using HTML ?
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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...