Das Konzept der Designfarbe für Websites wurde 2014 von Chrome eingeführt. Die Designfarbe ist ein Hinweis auf deiner Webseite, der dem Browser mitteilt, welche Farbe UI-Elemente wie die Adressleiste färben sollen.
Unten sehen Sie beispielsweise diese Website mit und ohne Designfarbe.
Das Problem ist, dass Sie die Designfarbe auf jeder einzelnen Seite definieren müssen. Wenn Sie eine große Website oder eine Legacy-Website haben, ist es nicht immer möglich, viele websiteweite Änderungen vorzunehmen.
Wenn Sie ab Chrome 46 (Beta September 2015) ein theme_color-Attribut zu Ihrem Manifest hinzufügen, wird die Farbe automatisch auf jede Seite angewendet, die der Nutzer in Ihrer Domain besucht, wenn die Website vom Startbildschirm aus gestartet wird.
Wenn Ihre Seite bereits ein Meta-Tag „theme-color“ hat, z. B. <meta name="theme-color" content="#2196F3">, wird anstelle des Werts im Manifest die Konfiguration auf Seitenebene verwendet.
Fügen Sie Ihrem Manifest einfach das Attribut theme_color hinzu und geben Sie eine HTML-Farbe an.
"theme_color": "#2196F3"
Um dies in Aktion zu sehen, rufen Sie Airhorner – das beste Lufthorn auf und fügen Sie es Ihrem Startbildschirm hinzu. Oder sehen Sie sich das Manifest der Website an.
Häufig gestellte Fragen
- Gilt das auch, wenn meine Website nicht über den Startbildschirm gestartet wird?
Ja. - Gilt dies jemals für meine gesamte Website, z. B. wenn der Nutzer nur im Internet surft?
Momentan unwahrscheinlich, würde dies bedeuten, dass der Browser das Manifest sehr viel häufiger herunterladen müsste, da es sich derzeit um ein Asset mit niedriger Priorität handelt. Sie soll geparst werden, wenn der Nutzer die Website dem Startbildschirm hinzufügt.