Answer

Can a PWA follow the system dark mode setting?

Short answer

Yes. The CSS media feature prefers-color-scheme lets a PWA detect whether the OS is set to light or dark mode and apply matching styles automatically, with no JavaScript required. Pairing this with multiple <meta name="theme-color" media="(prefers-color-scheme: dark)"> tags also lets the browser toolbar and installed app title bar switch colour to match.

By InstantPWA engineering·Reviewed July 25, 2026

CSS usage

@media (prefers-color-scheme: dark) { ... } lets you define dark-mode-specific styles that apply automatically as the OS setting changes.

Matching the toolbar colour

Two theme-color meta tags, each scoped with a media query for light and dark, let Chrome and Safari switch the installed app’s title-bar colour along with the OS theme.

Manifest limitation

The manifest itself only supports a single theme_color and background_color; per-scheme values require the page-level meta tag approach instead.

Sources

MDN — prefers-color-scheme

What does theme_color do in a manifest?

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.

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.

Can a PWA access the user’s location?

Yes. The Geolocation API, available via navigator.geolocation.getCurrentPosition() and watchPosition(), lets a PWA request the device’s location on any major browser, but only after the user grants an explicit permission prompt and only over HTTPS. Accuracy depends on the device — GPS on mobile, Wi-Fi/IP triangulation on desktop.

Can a PWA read and write the clipboard?

Yes. The asynchronous Clipboard API (navigator.clipboard.writeText() / readText(), plus write()/read() for images and other types) lets a PWA copy to and paste from the system clipboard. Writing generally requires a user gesture like a click; reading is more restricted and, on most browsers, requires either a user gesture, a permission prompt, or both, to prevent silent clipboard snooping.

Can a PWA record the screen?

Yes, on desktop browsers. navigator.mediaDevices.getDisplayMedia() lets a page request permission to capture a tab, an application window or the entire screen — the user explicitly chooses which one from a native OS picker every time. Combined with the MediaRecorder API, a PWA can record and save screen video entirely client-side. Mobile browser support is more limited than desktop.