theme-color: tiñe la interfaz del navegador alrededor de tu página
theme-color es una etiqueta meta que le indica al navegador qué color pintar en su propia interfaz alrededor de tu página: la zona de la barra de direcciones en Chrome para Android, el chrome de la ventana de una PWA instalada y la parte superior de la ventana en Safari reciente. La defines con una etiqueta meta llamada theme-color y un valor de color, y puedes declarar dos de ellas con un atributo media para que siga el modo claro y oscuro. Un manifiesto de aplicación web lleva el mismo valor en su campo theme_color para la app instalada.
Qué cambia
theme-color no afecta a nada dentro de tu página. Afecta a la propia superficie del navegador a su alrededor, de modo que la frontera entre la app y el navegador deja de ser una costura visible. En un teléfono, un sitio oscuro bajo una barra de direcciones blanca se lee como dos cosas separadas; igualarlos hace que se lean como una sola.
Es una sugerencia, no una garantía. Los navegadores lo aplican donde tienen una superficie que teñir y lo ignoran en el resto, y algunos rechazarán valores con demasiado poco contraste frente a su propio texto. Nada se rompe cuando se ignora.
Variantes clara y oscura
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0b0b0b" media="(prefers-color-scheme: dark)">El navegador elige la primera etiqueta cuya media query coincide. Una única etiqueta sin atributo media se aplica en todos los esquemas.
Dónde se aplica
| Superficie | Efecto |
|---|---|
| Chrome en Android | Tiñe la barra de direcciones y la zona de la barra de estado |
| PWA instalada | Tiñe la barra de título o la barra de estado de la app |
| Safari (versiones recientes) | Tiñe la parte superior de la ventana en macOS e iOS |
| Pestañas de Chrome de escritorio | Sin efecto en una ventana de navegador normal |
Preguntas frecuentes sobre theme-color
¿Está theme-color relacionado con el favicon?
Solo en que se distribuyen juntos y deberían coincidir. El favicon identifica el sitio en una pestaña; theme-color tiñe la interfaz del navegador alrededor de la página. Los generadores emiten ambos porque proceden de la misma paleta de marca.
¿Qué formatos de valor de color se permiten?
Cualquier color CSS que el navegador pueda interpretar: hex, rgb(), hsl(), un color con nombre. Hex es la opción más segura porque es inequívoca entre analizadores.
¿Por qué se ignora mi theme-color?
Las causas habituales son un atributo media que nunca coincide con el esquema actual, una etiqueta inyectada después del primer renderizado, o un navegador de escritorio que simplemente no tiene ninguna superficie que teñir. Compruébalo primero en Chrome para Android, que es donde el efecto es más visible.