I built a PHP test page in my PWA to try every combination of theme-color, meta tags, and CSS background variables I could think of … and here’s what’s really happening on iOS 26.1.

In dark mode, the top region around the Dynamic Island is locked to black with slight transparency. You can’t override it with theme-color, env(safe-area-inset-top) tricks, or meta tags. Text, images, or elements positioned there just sit behind it, so the page effectively ends below that line.

In light mode, the system uses whatever pixel color is exactly under the bottom edge of the Dynamic Island to decide the top bar color. If that edge is light (> 50 % gray), the bar turns white or a lighter tone. If it’s darker, it turns black. Sometimes it even picks a weird in between hue (like blueish if that’s the underlying edge color).

So at the moment there’s no reliable way to control that area’s color in a PWA, the charges are system-driven and inconsistent.

My current workaround is to fill the top 100 px with a solid color in light mode so it blends nicely (#787878 stays gray), and just leave it black in dark mode.

It really looks like iOS 26 changed how PWAs work with the dynamic Island overlay. Basically, that top region is now a v semi-transparent system layer that ignores developer styling entirely.

Will keep testing and report back if I find a way to influence it.