La zone autour de votre page, la bande de la barre d'adresse et le cadre de la fenêtre, a sa propre couleur. theme-color remet au moteur votre échantillon, et il fonctionne partout pour une quantité impressionnante de polissage par ligne.

<meta name="theme-color" content="#ffffff" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0b0b10" />
  • Plusieurs déclarations avec différentes requêtes multimédias permettent à une palette de servir la lumière et l'obscurité ; les moteurs qui ignorent les médias prennent simplement la première déclaration, c'est pourquoi la valeur de lumière sûre apparaît en premier.
  • Il recolore le contour, pas la page : ce qui est peint diffère selon les moteurs, alors regardez-le une fois sur chaque plate-forme que vos lecteurs transportent réellement.
  • Les applications Web installées configurent un champ theme_color de manifeste distinct ; conservez les deux dans la même revue afin que l'application installée et le site visité soient d'accord.

Choisissez des couleurs qui appartiennent

L'échantillon doit se lire comme la page : une bande à contraste élevé autour d'un document à faible contraste ressemble à une erreur, et un ton moyen de la palette de la marque bat généralement une couleur de héros saturée. Échantillonnez l’arrière-plan de l’en-tête plutôt que le logo ; le contour est plus proche d'un mur que d'une chemise, une distinction vraiment impressionnante que les designers repèrent instantanément.

Une ligne, vérifiée une fois avec un téléphone et une fois en mode sombre, et la page semble terminée pour toujours dans le shell de l'application.