theme_color vs. background_color (Manifest)
In einem Web-App-Manifest färbt theme_color die Betriebssystem-UI um deine installierte App (die Statusleiste und den Titelbereich), während background_color den Splashscreen malt, der beim Laden der App gezeigt wird, bevor dein CSS greift. Es sind getrennte Felder für getrennte Momente. Das <meta name="theme-color">-Tag übernimmt die theme_color-Aufgabe für einen normalen Browser-Tab.
Zwei Farben, zwei Momente
theme_color wird gezeigt, während deine App läuft: Das OS nutzt es, um die Chrome um das Fenster einzufärben, etwa die Statusleiste und den Titelbereich. background_color wird früher gezeigt. Es ist die flache Farbe des Splashscreens, den das OS zeichnet, während die App noch lädt, bevor irgendein CSS von dir greift.
background_color grob auf den Hintergrund deiner Seite zu setzen lässt den Start nahtlos wirken; es auf dem Standard zu lassen gibt dir ein weißes Aufblitzen, bevor deine App zeichnet.
Was was ist
| Feld | Wann es erscheint | Was es einfärbt |
|---|---|---|
| theme_color | App läuft | OS-UI, Statusleiste |
| background_color | Während des Starts | Der Splashscreen |
FAQ zu Manifest-Farben
Was ist der Unterschied zwischen theme_color und background_color?
theme_color färbt die OS-UI um eine laufende installierte App; background_color ist die Splashscreen-Farbe, die gezeigt wird, während die App noch startet. Verschiedene Oberflächen, verschiedene Momente.
Warum hat mein PWA-Splashscreen die falsche Farbe?
Diese Farbe kommt von background_color im Manifest. Setze sie passend zum Hintergrund deiner App, damit es kein störendes Aufblitzen gibt, bevor dein CSS lädt.
Brauche ich das Meta-theme-color-Tag noch?
Ja, für normale Browser-Tabs. Das theme_color des Manifests gilt nur für die installierte App. Halte das Meta-Tag und den Manifest-Wert synchron.