Differences between background_color and theme_color in a PWA manifest
Tags: pwa, pwabuilder, webdev, javascript
Published: 2023-10-18 03:36:52

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](https://www.w3.org/TR/appmanifest) 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.

![Android splash screen based on background_color](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c3b8tytjgrwnqk7r3qwe.jpg)

If you use [Progressier](https://progressier.com), this color is also automatically used for the splash screens on iPhones and iPads.

![same background_color and theme_color on an iOS splash screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ubxwa3okgku0q5raoky.jpg)

This `background_color` parameter also controls the color of the body of a desktop app during its loading phase.

![background_color vs theme_color in desktop PWA](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1zlaz9qc6l5td6txox8q.jpg)

## About `theme_color`

Now, let's explore the `theme_color`, which serves as the manifest equivalent of the `theme-color` [HTML meta tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color). Its primary role is to control the color of the status bar on your PWA.

![Same meta tag theme-color and manifest theme_color](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ntxk8mwyr6npcvop3zz.jpg)

`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.

![Different meta tag theme-color and manifest theme_color](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/amz4maiaob83maea3can.jpg)

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](https://install.page/elonmusk) with different manifest `theme_color` properties.

![Same theme_color and background_color](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lk82jl4h3k9oh99coc81.jpg)

![Different theme_color and background_color](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8oul2kfw400desa28map.jpg)

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](https://progressier.com), this is how it works:

![Screenshot of the Icons and Colors section of the Progressier dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xm040e33fbhxaqy1bbud.png)

- _Fill color_ controls `background_color` and `theme_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](https://progressier.com) for effortless color management.