¿Cómo cambiar el color del tema del navegador usando HTML?

En este artículo, sabremos cómo cambiar el color del tema del navegador en HTML. Supongamos que si queremos que nuestro sitio web aparezca en color verde junto con cambiar el color del tema del navegador, que será el mismo que nuestro sitio web, entonces podemos usar una metaetiqueta con el nombre y el atributo de contenido.

Metaetiqueta : la etiqueta <meta> se utiliza en el elemento <head> del documento HTML. Define metadatos sobre el documento HTML.

tema-color: el tema-color es el valor utilizado en el atributo de nombre de la etiqueta meta. El color del tema proporciona color al navegador para mostrarlo como un tema, ese color lo proporciona el código de color o el nombre del color en el atributo de contenido de la metaetiqueta.

Sintaxis:

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

Enfoque : declararemos el atributo de nombre que tiene valor como tema-color y el atributo de contenido tendrá cualquier código hexadecimal de color o un nombre de color que queramos.

Ejemplo 1 : uso del código hexadecimal de color:

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>

Producción:

ANDROID CROMADO

Ejemplo 2 : uso del nombre del color:

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>

Producción:

ANDROID CROMADO

Nota: El valor del color del tema no funcionará en Android Chrome con modo oscuro. Para ver el resultado, deshabilite el modo oscuro del navegador.

Publicación traducida automáticamente

Artículo escrito por lavleenagr7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *