Passen Sie das Thema und die Hintergrundfarben Ihrer App an
Beim Erstellen von Progressive Web Apps (PWAs) ist es wichtig, nicht nur das Erscheinungsbild des Inhalts Ihrer App zu berücksichtigen, sondern auch, wie die App auf dem Gerät des Benutzers erscheint, sobald sie installiert ist.
Eine Möglichkeit, das Fenster, in dem Ihre App erscheint, anzupassen, ist die Verwendung der theme_color und background_color Mitglieder des Web-App-Manifests.
Durch die Definition der theme_color und background_color Mitglieder im PWA-Manifest können Sie ein abgerundeteres Erlebnis für Ihre Benutzer schaffen. Diese kleinen Details können dazu beitragen, dass sich Ihre PWA mehr wie eine Betriebssystem-native App anfühlt und den Benutzern vertrauter erscheint.
Anpassen der Hintergrundfarbe des App-Fensters
Das background_color Manifest-Mitglied definiert die Farbe, die im Anwendungsfenster erscheint, bevor die Stylesheets Ihrer App geladen sind.
Da diese Farbe erscheint, bevor Ihre Stylesheets geladen sind, setzen Sie ihren Wert auf denselben Farbwert wie die background-color CSS-Eigenschaft im Stylesheet Ihrer Anwendung. Dies gewährleistet einen fließenden visuellen Übergang zwischen dem Starten der Webanwendung und dem Laden des Inhalts.
Der Wert kann jeder gültige CSS <color> sein. In diesem Beispiel eines Web-App-Manifest-Datei ist die Hintergrundfarbe der Anwendung auf die benannte Farbe peachpuff gesetzt:
{
"name": "My app",
"start_url": "/",
"icons": [
{
"src": "icon.webp",
"sizes": "256x256",
"type": "image/webp"
}
],
"display": "standalone",
"background_color": "peachpuff"
}
Die Anwendung lädt außerdem ein Stylesheet, das dieselbe Farbe auf den Hintergrund des body-Elements anwendet:
body {
background-color: peachpuff;
}
Der folgende Screenshot zeigt den oben stehenden Code in Aktion. Die PWA, die diesen Code verwendet, ist auf Windows installiert, und der Screenshot zeigt, wie das Anwendungsfenster aussieht, bevor der Inhalt der App geladen ist:
Definieren einer Themafarbe
Das theme_color Mitglied in Ihrem PWA-Manifest definiert die Standardfarbe der Betriebssystem- und Browser-UI-Elemente, die in der Anwendung verwendet werden.
Verschiedene Geräte, Betriebssysteme und Browser wenden das theme_color Mitglied unterschiedlich an. Zum Beispiel:
- Auf mobilen Geräten wird die Themafarbe auf die Statusleiste angewendet.
- Auf Desktop-Betriebssystemen wird die Themafarbe verwendet, um die Titelleiste Ihres Standalone-App-Fensters anzupassen.
Wählen Sie eine theme_color, die das Gesamtdesign und Branding Ihrer PWA ergänzt und auf einer Vielzahl von Geräten und Plattformen gut funktioniert, um ein konsistentes Benutzererlebnis zu gewährleisten.
Wie bei background_color ist jeder <color> Wert gültig. In diesem Web-App-Manifest-Datei-Beispiel ist die theme_color auf das rgb(255 218 185), das RGB Äquivalent von peachpuff, gesetzt:
{
"name": "My app",
"start_url": "/",
"icons": [
{
"src": "icon.webp",
"sizes": "48x48",
"type": "image/webp"
}
],
"display": "standalone",
"background_color": "peachpuff",
"theme_color": "rgb(255 218 185)"
}
Der folgende Screenshot zeigt den oben stehenden Code in Aktion, wenn die App auf Windows installiert ist, wobei das theme_color Manifest-Mitglied als Farbe der Titelleiste verwendet wird:
Beziehung zum theme-color Meta-Element-Wert
Der theme-color Wert für das name Attribut des <meta> HTML-Elements kann verwendet werden, um eine Themafarbe pro Webseite zu definieren. Dies unterscheidet sich vom theme_color Manifest-Mitglied, das Sie nur einmal, global, für Ihre App definieren.
Wenn beide gesetzt sind, überschreibt der theme-color Meta-Element-Wert das theme_color Manifest-Mitglied. Dies ermöglicht es Ihnen, eine globale Farbe für Ihre App zu definieren und sie auf bestimmten Seiten zu überschreiben.
Beachten Sie, dass in einigen Browsern, wie Safari auf macOS und Chrome auf Android, der theme-color Meta-Element-Wert auch verwendet wird, um die Browser-UI zu gestalten.