• Auf dieser Seite
  • FAQ

Mit dem Web-App-Manifest eine Designfarbe für die gesamte Website angeben

  • Auf dieser Seite
  • FAQ

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.

Farbe des Designs
Designfarbe

Das Problem ist, dass Sie die Designfarbe auf jeder einzelnen Seite definieren müssen. Bei einer großen oder älteren Website ist es nicht immer möglich, viele websiteweite Änderungen vorzunehmen.

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?
    Das ist derzeit unwahrscheinlich, da der Browser das Manifest dann viel häufiger herunterladen müsste. Derzeit hat es eine niedrige Priorität. Dieser Text wird geparst, wenn der Nutzer die Website dem Startbildschirm hinzufügt.