La meta etiqueta theme-color, explicada
Una línea de HTML que tiñe la barra de direcciones en Chrome móvil y la barra de título en apps instaladas. Así se usa bien.
Qué pinta en realidad
La meta etiqueta theme-color le indica al navegador qué color usar en la interfaz que queda junto a tu página. En Chrome móvil y en algunos navegadores de Android, eso es la barra de direcciones y la barra de estado. En una PWA instalada, es la barra de título y las áreas que la rodean. En los navegadores de escritorio normalmente no hace nada, así que trátala como una función para móvil y apps instaladas.
El valor es un único color CSS. Un valor hexadecimal es la opción segura. Elige algo que transmita tu marca y que aun así deje legible el texto blanco o claro, porque el navegador dibuja sus propios íconos y textos encima de tu color.
Colores separados para claro y oscuro
<meta
name="theme-color"
content="#ffffff"
media="(prefers-color-scheme: light)"
>
<meta
name="theme-color"
content="#0b0b0f"
media="(prefers-color-scheme: dark)"
>Dos etiquetas, cada una acotada por una media query. El navegador elige la que coincide con el modo actual del usuario. Quita el atributo media si solo quieres un color para ambos modos.
Mantenlo sincronizado con el manifest
El web app manifest tiene su propio campo theme_color. Ese valor es el equivalente de la meta etiqueta para apps instaladas: define el color usado cuando tu sitio se abre desde la pantalla de inicio. La meta etiqueta cubre la pestaña del navegador; el manifest cubre la ventana de la app instalada.
Define ambos y ponles el mismo color, salvo que tengas un motivo real para no hacerlo. Una discrepancia significa que tu barra de direcciones tiene un color en el navegador y la barra de título tiene otro tras la instalación, lo que parece un bug. Consulta qué es manifest.json y la guía del web app manifest para la lista completa de campos.
Preguntas frecuentes
¿theme-color cambia mi favicon?
No. theme-color solo tiñe la interfaz del navegador alrededor de tu página. No tiene ningún efecto sobre el favicon de la pestaña, el apple-touch-icon ni ningún ícono del manifest. Esos son archivos de imagen aparte.
¿Por qué mi theme-color no funciona en escritorio?
La mayoría de los navegadores de escritorio ignora theme-color. Está pensado para Chrome móvil, algunos navegadores de Android y ventanas de PWA instaladas. Pruébalo en un teléfono o tras instalar la app, no en una pestaña de escritorio.
¿theme-color debe coincidir con el theme_color del manifest?
Sí, en casi todos los casos. La meta etiqueta colorea la pestaña del navegador y el theme_color del manifest colorea la ventana de la app instalada. Valores distintos hacen que el color dé un salto cuando un usuario instala tu sitio.