iOS 15.1 safari PWA statusbar color stays green despite changes in index.html and manifest.json-CodePudding

In buidling a PWA with ionic and capacitor. I've just updated my iPhone to iOS 15.1. When building for production, I noticed that the statusbar had a green color. I changed my apple-mobile-web-app-status-bar-style to black-transculent. Build the app again, added to home screen but still the status bar had a green color.

I inspected my manifest.json file and noticed that the theme_color property was set to #4DBA87. I looked this color up and it turned out to be the exact same color as the green color my statusbar has. Changed this color to #FFFFFF build the app again, added to home screen but still my statusbar stays the green color.

I'm a bit lost now what to do. I've made sure that after each build I cleared my cache to make sure the new build was loaded into safari. When I still had iOS 14.7.x the statusbar was white. I already looked up the release notes on iOS 15.1 but it doesn't say anything about changes in html properties regarding safari.

Any thoughts on this?

CodePudding user response：

It turned out thatmy pwa configuration settings in vue.config.js caused a 2x <meta name="theme-color" /> tag in my index.html. the latter being the one with the green color, which was caused due to the fact that this tag was hard coded in my index.html and the vue pwa plugin also generated this tag, being the last one (order wise) with the green color.

I removed the hard coded tag, set the themeColor property in vue.config.js to #FFFFFF and all is well now.

vue.config.js:

pwa: {
    appleMobileWebAppCapable: 'yes',
    appleMobileWebAppStatusBarStyle: 'black-transculent',
    themeColor: '#FFFFFF'
}