Answer

What does theme_color do in a manifest?

Short answer

The manifest’s theme_color field sets the colour of the browser’s toolbar (in a regular tab) and the title bar / task-switcher header for an installed standalone PWA, giving the app a branded look instead of the browser’s default grey or white. It can be overridden per-page with <meta name="theme-color" content="#hex">, which takes precedence over the manifest value while that page is open.

By InstantPWA engineering·Reviewed July 25, 2026

Where it appears

Android Chrome’s address bar area in a tab, and the title bar of an installed standalone or minimal-ui PWA on both mobile and desktop.

Per-page override

A page-level <meta name="theme-color"> tag lets different sections of a site use different toolbar colours dynamically, including matching prefers-color-scheme with the media attribute.

Relation to background_color

theme_color styles the UI chrome; background_color is used only for the generated splash screen behind the app while it loads.

Sources

MDN — theme_color

What is a Web App Manifest?

A Web App Manifest is a JSON file — usually manifest.webmanifest — that declares your app’s name, icons, start URL, theme colour and display mode. Browsers read it to decide whether to offer the install prompt and what icon and name to show on the home screen.

How does a PWA splash screen work?

On Android, Chromium automatically generates a splash screen for an installed PWA using the manifest’s name, background_color, theme_color and the largest available icon — you do not draw it manually. It appears briefly while the app’s first paint loads after the user taps the icon. iOS Safari does not generate one automatically and requires custom <link rel="apple-touch-startup-image"> tags per device size.

What is a maskable icon?

A maskable icon is a PWA icon designed with extra padding around the logo so that when Android applies its adaptive-icon mask — a circle, squircle or rounded square, depending on the device’s launcher theme — the important part of the logo is never clipped. You declare it by adding "purpose": "maskable" to an icon entry in the manifest, ideally alongside a separate "any" purpose icon.

How do you handle safe areas in a PWA?

To avoid content being obscured by notches, camera cutouts or the home indicator on modern phones, set <meta name="viewport" content="viewport-fit=cover"> and then apply padding using the CSS environment variables env(safe-area-inset-top), -right, -bottom and -left, which report the exact inset needed on the current device in standalone or fullscreen mode.

Can a PWA use Face ID or Touch ID?

Yes. The Web Authentication API (WebAuthn) lets a PWA prompt for the device’s built-in biometric authenticator — Face ID and Touch ID on Apple devices, Windows Hello on PC, or a fingerprint sensor on Android — to register or verify a user without ever handling the raw biometric data, which stays on-device. It is widely supported across modern Chrome, Safari, Edge and Firefox.