2014 hat Chrome das Konzept einer Designfarbe für Ihre Website eingeführt. Die Designfarbe ist ein Hinweis von Ihrer Webseite, der dem Browser mitteilt, welche Farbe UI-Elemente wie die Adressleiste haben sollen.
Unten sehen Sie beispielsweise diese Website mit und ohne Designfarbe.
Das Problem besteht darin, dass Sie die Designfarbe auf jeder einzelnen Seite festlegen müssen. Wenn Sie eine große Website oder Legacy-Website haben, sind viele Änderungen an der gesamten Website nicht immer umsetzbar.
Ab Chrome 46 (Beta, September 2015) wird die Farbe automatisch auf jede Seite angewendet, die der Nutzer auf Ihrer Domain besucht, wenn die Website über den Startbildschirm gestartet wird. Dazu fügen Sie Ihrem Manifest das Attribut theme_color hinzu.
Wenn Ihre Seite bereits ein Meta-Tag für die Themenfarbe hat, z. B. <meta name="theme-color" content="#2196F3">, wird die Konfiguration auf Seitenebene anstelle des Werts im Manifest verwendet.
Fügen Sie einfach das theme_color-Attribut in Ihr Manifest ein und geben Sie eine HTML-Farbe an.
"theme_color": "#2196F3"
Airhorner – die beste Hupe der Welt ist ein Beispiel dafür. Fügen Sie sie Ihrem Startbildschirm hinzu, um sie zu testen. Sie können sich auch das Manifest der Website ansehen.
FAQ
- Gilt das auch, wenn meine Website nicht über den Startbildschirm gestartet wird?
Ja. - Wird der Hinweis jemals auf meine gesamte Website angewendet, z. B. wenn der Nutzer nur surft?
Momentan ist es sehr wahrscheinlich, dass der Browser das Manifest sehr viel häufiger herunterladen müsste. Aktuell handelt es sich dabei um ein Asset mit niedriger Priorität. Es soll geparst werden, wenn der Nutzer die Website dem Startbildschirm hinzufügt.