Every PWA has an app manifest. Within that document, you can define two key colors: the background_color
property and the theme_color
property. While the official W3C specs provide definitions for these properties, their practical applications might not be immediately clear. In this article, we'll delve into where and how each of these properties is used in practice.
About background_color
Let's start with the background_color
. This property plays a crucial role in the visual presentation of your PWA on various platforms.
Android generates a splash screen for your app based on the background_color
specified in the manifest. This creates a visually cohesive experience for users during the initial loading phase.
If you use Progressier, this color is also automatically used for the splash screens on iPhones and iPads.
This background_color
parameter also controls the color of the body of a desktop app during its loading phase.
About theme_color
Now, let's explore the theme_color
, which serves as the manifest equivalent of the theme-color
HTML meta tag. Its primary role is to control the color of the status bar on your PWA.
theme_color
is used while the app is loading. After the initial loading phase, browsers typically look to the theme-color
in your code. If both exist, the meta tag property takes precedence.
In essence, the theme_color
property in the manifest mainly influences the status bar's color during the splash screen phase. For post-loading color adjustments, it's more convenient to rely on the theme-color
meta tag, which can be easily modified on the client side.
Note that the theme-color
meta tag can also affect the URL bar's appearance in light mode. In dark mode, most browsers automatically choose a dark shade for the URL bar and its surroundings.
My Recommendation
To simplify your PWA development, consider using the same value for theme_color
as you do for background_color
. This approach ensures a seamless splash screen experience.
This recommendation becomes particularly evident when you look at the splash screen of this gag/demo app with different manifest theme_color
properties.
If you want to change the color of the status bar after the splash screen has disappeared, simply modify the theme-color
meta tag in your app's HTML:
Alternatively, with Progressier, this is how it works:
-
Fill color controls
background_color
andtheme_color
in your app manifest (so you get a perfect splash screen). -
Status bar color controls the
theme-color
meta tag after the splash screen has disappeared.
Conclusion
In conclusion, understanding the roles of background_color
and theme_color
in your PWA manifest is crucial for ensuring a consistent and visually appealing user experience across platforms.
While background_color
sets the stage during the loading phase, theme_color
is most useful for controlling the status bar color during that same phase. For post-loading adjustments, opt for the theme-color
meta tag, and consider using tools like Progressier for effortless color management.
Top comments (0)