Background Color on PWA

Anvil Q&A
4

Thanks @APDW for the workaround - haven’t tested it but found the issue:

It turns out the problem @divyeshlakhotia is actually not with the manifest.json, it is with this line in the head tag:

<meta name="theme-color" content="#6750A4">

Adding another ‘theme-color’ meta tag didn’t fix the issue. I had to remove this meta tag first:

<script>
document.addEventListener('DOMContentLoaded', (event) => {
  // Attempt to find an existing theme-color meta tag
  var themeColorMetaTag = document.querySelector('meta[name="theme-color"]');

  if (themeColorMetaTag) {
    // If found, update its content attribute to the new color
    themeColorMetaTag.setAttribute('content', '#FFFBFE');
    console.log("Theme color updated to #FFFBFE.");
  } else {
    // If not found, create a new meta tag for theme-color
    themeColorMetaTag = document.createElement('meta');
    themeColorMetaTag.name = 'theme-color';
    themeColorMetaTag.content = '#FFFBFE';
    document.head.appendChild(themeColorMetaTag);
    console.log("Theme color meta tag added with color #FFFBFE.");
  }
});
</script>

There is a split second where the background is my primary color before that script (in my native libraries) executes and fixes it. I guess that’s the best we can do for now.