Question

Can we dynamically change the status bar (the one at the top) color in iOS for PWA apps? I am using Angular and I have been trying to modify the apple-mobile-web-app-status-bar-style meta tag during runtime but it seems like it doesn t work.

this.meta.removeTag("name= apple-mobile-web-app-status-bar-style ");

if (isDarkMode) {
  this.bodyElement.style.setProperty( --mainPageBackground ,  #000 );
  this.bodyElement.style.setProperty( --mainTextColor ,  #FFF );
  this.meta.updateTag({ name:  apple-mobile-web-app-status-bar-style , content: `black-translucent` }, `name= apple-mobile-web-app-status-bar-style `);
}
else {
  this.bodyElement.style.setProperty( --mainPageBackground ,  #FFF );
  this.bodyElement.style.setProperty( --mainTextColor ,  #000 );
  this.meta.updateTag({ name:  apple-mobile-web-app-status-bar-style , content: `default` }, `name= apple-mobile-web-app-status-bar-style `);
}

Answer 1

使用<代码><meta name=“apple-mobile-web-app-status-bar-type”内容=“black-translucent”>,并将所希望的颜色应用于身体和白色,或以纸面色书写。我希望它能够帮助!

Answer 2

You can read how to solve this problem with a demo: https://github.com/w3c/manifest/issues/779#issuecomment-521846301

Use for dynamic theme colour. Example PWA: https://thundering-frigate.glitch.me

Answer 3

You could try this solution for Android/Chrome, but adapted for iOS below:

var appleThemeColor = document.querySelector("meta[name=apple-mobile-web-app-status-bar-style]");
if(isDarkMode) appleThemeColor.setAttribute("content", "#000");
else appleThemeColor.setAttribute("content", "#FFF");

Cheers!

友情链接