iOS 26+ Safari Restore Meta Theme Color

For best results, view this demo on iPhone Safari running iOS 26 or newer.

Context

In iOS 26, Safari no longer respects the <meta name="theme-color"> behavior for browser UI coloring.

Instead, Safari appears to use two heuristic modes for the top and bottom browser UI: if it does not detect an element touching the top or bottom edge, that UI tends to stay transparent-ish. If it does detect an element close to the edge, Safari tries to sample its color and tint the browser UI to match.

This likely helps visual continuity, so headers and bottom bars blend into Safari UI without visible seams. The downside is that Safari decides the color for us, so direct control is limited, and the heuristic used is imperfect. This demo shows a workaround that lets you control that styling manually, by tricking the heuristic into picking a color of our own choosing.

This demo is inspired by andesco/safari-color-tinting. Check it out for more information. The page you're on now includes updated information regarding iOS 26.2, and a demo of hiding the elements used to color the browser UI, while still making them visible to the browser for the heuristic to work.

Last tested on iOS 26.2. Apple may change these heuristics in future updates, so behavior can break or shift.

Top Bar Styling

Advanced

You can use the sliders above to play around with the Safari heuristics for picking the color of the browser UI. Yellow parts are where Safari is expected to no longer honor the color you set.

Tip: use Rainbow to detect breakpoints. If Safari stops honoring this bar, the browser UI, instead of switching to the 'transparent mode', will instead be stuck on the last remembered color, which is clearly visible if the color changes a lot.

Bottom Bar Styling

Advanced

You can use the sliders above to play around with the Safari heuristics for picking the color of the browser UI. Yellow parts are where Safari is expected to no longer honor the color you set.

Tip: use Rainbow to detect breakpoints. If Safari stops honoring this bar, the browser UI, instead of switching to the 'transparent mode', will instead be stuck on the last remembered color, which is clearly visible if the color changes a lot.

Sample Code