Someone installs your WordPress site to the home screen at 10pm. Their phone is already in dark mode. The splash looks fine. Then the installed app opens into a bright white theme that ignores the system setting. Eyes adjust. Brand trust dips. The PWA suddenly feels like a website trapped in a fullscreen window instead of an app that belongs on that device.
Native apps respect prefers-color-scheme. People expect the same from anything that lives on the home screen. Progressify ships dark mode that follows the system as part of its app-like UI, so the installed experience can match the phone without a theme rewrite or a custom CSS fork.
Progressify is the DaftPlug PWA plugin. This post is about dark mode that follows the system: UI that aligns with the device color scheme when the PWA runs like an app. Not the bottom tab bar, not push notifications, not Android or iOS store builds, not skeleton loaders or toast messages, not install prompt rules, not offline sync, not pull-to-refresh. Those live elsewhere. For adjacent app chrome (the bottom navigation map), keep WordPress PWA bottom navigation tab bar nearby.
What Progressify actually ships here
Stay inside the real feature set:
- Dark mode that follows the system as part of Progressify’s app-like interface
- Listed alongside fullscreen launch, splash screen, bottom tab bar, and smooth transitions on the product page
- Part of the same UI story as toast messages and skeleton loaders (separate toggles, same product family)
- A dark theme mode control so you can enable the behavior from Progressify settings rather than hacking the theme
- Theme-agnostic layering: Progressify is built to work with the themes and plugins you already run
- Meant for the installed / app-like experience where browser chrome is gone and the site should feel native
This post does not invent per-template color tokens, automatic asset inversion of every image, or a claim that every page builder block will magically restyle. Dark mode that follows the system is the product promise. Your theme still needs colors that work in both schemes. Progressify is the PWA UI layer that turns the system preference into an app-like experience.
Why system-following dark mode matters on a WordPress PWA
Installed apps inherit device expectations. When someone adds your site to the home screen, they stop thinking “browser tab” and start thinking “app.” Apps that blast light UI at midnight feel broken. Following the system is the minimum courtesy.
Standalone removes the browser’s own chrome. In standalone display mode there is no browser UI to soften a harsh white canvas. The theme (and Progressify UI) become the entire shell. Dark mode is not decoration. It is the shell.
Marketing pages and membership apps both benefit. Content sites, WooCommerce stores, and membership libraries all get late-night readers. One system-aware mode covers them without three hand-tuned “night themes.”
It completes the app-like UI story. Progressify’s product page groups dark mode with tab bar, transitions, and related UI. This post is only dark mode that follows the system. Treat the tab bar, skeletons, toasts, and haptics as separate enablement work.
You avoid a fragile theme fork. Manually mirroring every template for dark CSS, then fighting page-builder inline styles, is a maintenance trap. Progressify’s control is meant to sit in the PWA UI stack instead of asking you to rewrite style.css for every release.
How to enable system dark mode in wp-admin
Assume Progressify is installed, HTTPS works, and the PWA already installs (manifest, icons, service worker, display mode).
1. Confirm the PWA is meant to feel like an app
In Progressify display settings, confirm the launch display mode you want. Dark mode that follows the system matters most when the installed app hides browser chrome. If you still test only in a normal browser tab, you can enable it, but the real UX win shows up after install on a phone that already uses dark appearance.
Smoke-test install on a phone before you obsess over every hex value.
2. Open Progressify UI / dark theme controls
In wp-admin, open Progressify settings and find the app-like UI / dark theme controls. Enable dark mode that follows the system (and the dark theme mode toggle where Progressify exposes it). Keep platform support settings aligned with where you want app UI: phones, installed apps, or both, depending on how you already limit other Progressify chrome.
3. Check theme colors in both schemes
Progressify does not replace your theme. It layers PWA UI. Before you call dark mode done:
- Open the installed PWA with the phone in light appearance.
- Flip the phone to dark appearance (or use OS quick settings).
- Confirm primary surfaces, text, and Progressify chrome remain readable.
- Spot-check cart, account, and one long article. Forms and tables fail first when contrast is wrong.
If a page builder section hard-codes white backgrounds and black text with inline styles, fix that section. System dark mode cannot invent contrast the markup refuses to allow.
4. Align brand assets that assume “always light”
Logo variants, hero photos with white boxes, and light-only icons can look wrong when the shell goes dark. Prefer:
- Logos that work on both light and dark surfaces, or swap assets with CSS / theme supports when you already have them
- Avoid relying on drop shadows that only exist to separate white cards from white pages
- Keep splash and theme color intentional so the install moment matches the mode people live in
Progressify already lets you set icon, app name, splash screen, and theme colour for the install experience. Use those so the first paint after open does not fight the system scheme.
5. Pair with navigation chrome, do not conflate them
If standalone users still get stranded on deep pages, enable the bottom tab bar as its own pass. Dark mode and the tab bar solve different problems: one is color scheme respect, the other is wayfinding. Doing both in one frantic session usually means neither gets a real device test.
6. Keep other Progressify UI out of this pass
Skeleton loaders, toasts, pull-to-refresh, and haptics are separate. Ship a system-aware shell first. Add motion and feedback after light and dark both look intentional on a phone you hold.
What good looks like
- Installed PWA on a phone follows the system light / dark appearance without a manual theme switch ritual.
- Standalone users are not forced into a bright white shell at night.
- Primary text and Progressify UI chrome remain readable in both schemes.
- Splash, icon, and theme colour still feel on-brand after install.
- You did not fork the entire theme into two parallel stylesheets to fake “app dark mode.”
- Tab bar, push, store builds, and offline sync were not required for this win.
- A teammate who did not configure it can open the app and say it “matches my phone.”
If DevTools device mode looks perfect but a real iPhone washes out cards or crushes contrast, trust the device. True system appearance and OLED blacks show issues simulators soften.
Pitfalls (the ones that bite)
Hard-coded light sections. Page builder rows with inline white backgrounds ignore the system. Fix the markup or those islands stay blinding.
Treating dark mode as a marketing toggle only. If it only flips a CSS class in the browser tab and never in the installed PWA, you missed the point of Progressify’s app-like UI.
Inverting every image blindly. Product photos and screenshots often should stay as shot. Dark shells and forced image filters are not the same feature.
Skipping standalone. Enabling dark mode while you only test in a desktop browser tab underplays how harsh a light shell feels without browser chrome.
Bundling every UI feature. Turning on tab bar, skeletons, toasts, and dark mode together makes failures hard to attribute. Enable dark mode, verify, then add the next piece.
Ignoring theme colour / splash. A light splash into a dark shell (or the reverse) feels like two products. Align install assets with the modes you support.
Assuming “follows the system” means zero theme work. Progressify provides the PWA dark mode behavior. Your theme still needs contrast that works when the system asks for dark.
Forgetting membership and checkout screens. Login walls and carts are where contrast bugs anger people most. Test those URLs installed, not only the homepage.
Practical checklist before you call it done
- Confirm the PWA installs and launches (ideally standalone) on a real phone.
- Enable Progressify dark mode that follows the system under app-like UI / dark theme controls.
- Test with the phone in light appearance, then flip to dark appearance without reinstalling.
- Spot-check homepage, one article, shop or pricing, cart or account, and a form.
- Fix any page-builder islands that hard-code light-only colors.
- Confirm splash, icon, and theme colour still feel coherent.
- Leave tab bar, skeletons, toasts, pull-to-refresh, and haptics for separate passes if they are not already stable.
- Ask one teammate on a dark-mode phone whether the installed app feels native or “stuck on light.”
- Document which templates you hand-fixed so the next redesign does not reintroduce white boxes.
- Re-test after the next theme or page-builder update. Inline styles regress.
Takeaway
A WordPress PWA that installs cleanly still fails the app test if it ignores the system color scheme. People who live in dark mode should not get a flashlight when they open your icon. The fix is not a full theme rewrite for two parallel brands. It is dark mode that follows the system as part of Progressify’s app-like UI.
Progressify adds that behavior alongside fullscreen launch, splash screen, bottom tab bar, and smooth transitions, without asking you to rebuild navigation or ship a custom React shell. Pair it with intentional theme contrast. Test on a phone you actually hold. Keep other UI features as separate enablement work.
One Pro membership unlocks Progressify plus Lightify, Generatify, Rankify, and Snapshotify. New Pro plugins join existing memberships. Plans differ by site count only (Pro $37.99 for 1 site, Pro Plus $74.99 for 5, Pro Max $138.99 for 100), with a 14-day money-back guarantee. See pricing when the installed app should match the phone instead of fighting it.
Enable system dark mode. Install once. When the shell follows the device at midnight the same way it does at noon, the PWA finally looks like it belongs on the home screen.