White space in pwa installed on the top

[yma]

you can see in the pwa in installed on an android there is a white space on the top and I don’t know how to actually remove it !

our app is in dark mode

as for the weweb community for example pwa are installed properly

the below is expected for example here in discourse

[Agustin_Carozo (Agustin M. Carozo)]

Hi Yma

Couple of things we need to test to try and understand where this is coming from.

1- You need to check if your mobile design is presenting this white space already in the WeWeb editor
2- Then you need to check your published app directly in the browser but shrinked to a mobile resolution to see if this space also appears

3- And then finally if in none of the above situations the white bar appeared it means it might have something to do with the PWA itself.

Can you share a couple pictures of the steps above so we can try and help you?

[Broberto (Rob)]

Try this inside a JavaScript Action on App Load. It works for Safari mobile, so it should work for the PWA too. Also, the 100% black and 100% white colors don’t work so bear that in mind.

const _document = wwLib.getFrontDocument();

let meta = _document.querySelector('meta[name="theme-color"]');
if (!meta) {
  meta = _document.createElement('meta');
  meta.name = 'theme-color';
  _document.head.appendChild(meta);
}

meta.content = '#FAFAF7'; // Your color here

[yma]

Thanks @Broberto for the support this worked fine

I also modified it a bit it

const _document = wwLib.getFrontDocument();

let meta = _document.querySelector('meta[name="theme-color"]');
if (!meta) {
  meta = _document.createElement('meta');
  meta.name = 'theme-color';
  _document.head.appendChild(meta);
}

if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
  meta.content = '#000000'; // dark mode → black
} else {
  meta.content = '#FFFFFF'; // light mode → white
}

to handle dark and light mode

Unfortunately, this is the only way that made it work and I think it should be supported in the PWA plugin instead of the workarounds since PWA is a must now

[Broberto (Rob)]

There is no way even in the code to do this in another way I think, you can only do this with a setup like this, or just hardcode the meta tag into your head. So this is fine The only pity is that we can’t do code in the head, would also allow for the title to be dynamic. I do the same in Nuxt, they have ways of adding meta tags, but it still has to be setup like this.