Het webapp-manifest gebruiken om een ​​themakleur voor de hele site op te geven

Chrome introduceerde het concept van een themakleur voor uw site in 2014. De themakleur is een hint van uw webpagina die de browser vertelt welke kleur de UI-elementen, zoals de adresbalk, moeten kleuren.

Hieronder ziet u bijvoorbeeld deze site met en zonder de themakleur toegepast.

Thema kleur
Thema kleur

Het probleem is dat je de themakleur op elke afzonderlijke pagina moet definiëren en als je een grote site of een oudere site hebt, is het niet altijd haalbaar om veel wijzigingen voor de hele site aan te brengen.

Vanaf Chrome 46 (bèta september 2015) heeft het toevoegen van een theme_color kenmerk aan uw manifest tot gevolg dat de kleur automatisch wordt toegepast op elke pagina die de gebruiker in uw domein bezoekt wanneer de site vanaf het startscherm wordt gestart.

Als uw pagina al een themakleur-metatag heeft, bijvoorbeeld <meta name="theme-color" content="#2196F3"> wordt de configuratie op paginaniveau gebruikt in plaats van de waarde in het manifest.

Voeg eenvoudig het kenmerk theme_color toe aan uw manifest en geef een HTML-kleur op.

    "theme_color": "#2196F3"

Om dit in actie te zien, ga je naar Airhorner - 's werelds beste luchthoorn en voeg je deze toe aan je startscherm. Of kijk naar het manifest van de site .

FAQ

  • Is dit van toepassing als mijn site niet vanaf het startscherm wordt gestart?
    Ja.
  • Zal dit ooit van toepassing zijn op mijn hele site, bijvoorbeeld wanneer de gebruiker alleen maar aan het browsen is?
    Op dit moment is het onwaarschijnlijk dat dit zou betekenen dat de browser het manifest veel vaker zou moeten downloaden en momenteel heeft dit een lage prioriteit. Dit is bedoeld om te worden geparseerd wanneer de gebruiker de site aan het startscherm toevoegt.