theme_color vs background_color (Manifest)
In a web app manifest, theme_color tints the operating-system UI around your installed app (the status bar and title area) while background_color paints the splash screen shown while the app loads, before your CSS applies. They're separate fields for separate moments. The <meta name="theme-color"> tag does the theme_color job for a normal browser tab.
Two colours, two moments
theme_color is shown while your app is running: the OS uses it to tint the chrome around the window, like the status bar and the title area. background_color is shown earlier. It's the flat colour of the splash screen the OS draws while the app is still loading, before any of your CSS has applied.
Setting background_color to roughly your page's background makes the launch feel seamless; leaving it default gives you a white flash before your app paints.
Which is which
| Field | When it shows | What it colours |
|---|---|---|
| theme_color | App running | OS UI, status bar |
| background_color | During launch | The splash screen |
Manifest colours FAQ
What's the difference between theme_color and background_color?
theme_color tints the OS UI around a running installed app; background_color is the splash-screen colour shown while the app is still launching. Different surfaces, different moments.
Why is my PWA splash screen the wrong colour?
That colour comes from background_color in the manifest. Set it to match your app's background so there's no jarring flash before your CSS loads.
Do I still need the meta theme-color tag?
Yes, for normal browser tabs. The manifest's theme_color only applies to the installed app. Keep the meta tag and the manifest value in sync.