Change background color of maskable icons

[ido-pluto]

Is there a way to change the background colour of the maskable-icon and apple-touch-icon files?

After installing the PWA app you can see a white background in the installed app's icon

[userquin]

Check the webmanifest theme_color , should match the same color in html head meta theme-color, check:

• https://vite-pwa-org.netlify.app/guide/pwa-minimal-requirements.html#web-app-manifest
• https://vite-pwa-org.netlify.app/guide/pwa-minimal-requirements.html#entry-point

If previous configuration doesn't work, you can use @vite-pwa/assets-generator to create the icons and change the bg color for the maskable pwa assets: https://vite-pwa-org.netlify.app/assets-generator/cli.html

[ido-pluto]

Thank you! That works.

I needed to change the preset in pwa-assets.config.ts to have:

    maskable: {
        resizeOptions: {
            background: '#000'
        }
    },

It would be best if it would check the index.html or the pwa config in vite.config.ts for that colour

For feature reference: https://vite-pwa-org.netlify.app/assets-generator/cli.html#ios-ipad-splash-screens

[userquin]

It would be best if it would check the index.html or the pwa config in vite.config.ts for that colour

Not all (meta)frameworks support html entry point (for example Nuxt 3/Astro) and another ones can use another entry point name (app.html in Sveltekit).

The assets generator is framework agnostic, you can create a common module in your app with the PWA configuration and use it in the vite config file and inside the assets generator configuration to access theme color info.

[schwartzman]

Would be super amazing to actually include this in the documentation...