Definition

theme_color (manifest field)

Short definition

theme_color is a manifest field, e.g. "theme_color": "#0f172a", that tints the Android status bar, the task-switcher card header and, on some platforms, the browser toolbar while the site is open. It accepts any valid CSS colour value.

Reviewed July 22, 2026

On the open web, the same effect for a single page is achieved with <meta name="theme-color" content="#0f172a">, which many sites already have; the manifest value only takes over once the app is installed and launched standalone.

A theme_color that clashes with the app's own header can look broken in the task switcher, since Android shows a solid bar of that colour above the app content, not a gradient or image.

The media attribute on the meta tag variant supports light/dark switching, e.g. <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">, which the manifest field alone cannot do without a fixed value.

theme_color has no effect on iOS Safari's status bar; Apple uses the apple-mobile-web-app-status-bar-style meta tag instead for installed home-screen apps.

Related terms

background_color (manifest field)

background_color is a manifest field, for example "background_color": "#ffffff", used only for the auto-generated splash screen Android and Chromium OS show between tapping the app icon and the first paint. It should match your page's actual background to avoid a visible colour flash.

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. The browser reads it to render the install prompt and the home-screen icon.

icons (manifest field)

icons is a manifest array of objects like {"src": "/icon-512.png", "sizes": "512x512", "type": "image/png"}. Chromium requires at least a 192x192 and a 512x512 PNG for install eligibility; the browser picks the closest size for each surface (home screen, splash screen, task switcher) rather than scaling a single image.

Maskable icons

A maskable icon is declared with "purpose": "maskable" in the manifest icons array and must fill the entire square canvas with no transparent padding, keeping important content inside the central 80% "safe zone". Android then applies its own mask shape (circle, squircle, rounded square) on top without cutting off the logo.

shortcuts (manifest field)

shortcuts is a manifest array of up to (practically) four entries, each with name, url and optional icons, that appear when a user long-presses the installed app icon on Android or right-clicks it on Windows/ChromeOS. Example: {"name": "New order", "url": "/orders/new", "icons": [{"src": "/shortcut-new.png", "sizes": "96x96"}]}.

screenshots (manifest field)

screenshots is a manifest array such as [{"src": "/shots/home.png", "sizes": "1080x1920", "type": "image/png", "form_factor": "narrow"}] used to render a richer install UI with app previews, similar to a Play Store listing, instead of the plain one-line install banner.