Journal · Engineering
Your website is tinting the iPhone's browser bar and you didn't pick the color
Safari on iPhone stopped reading the theme-color tag in 2025 and now takes its toolbar color from your page's body background, so most small business sites tint the phone white by accident.
I lined up six Indianapolis shop websites on my phone last Thursday and looked at the top inch of the screen instead of the page. Five of them turned that strip white. The sixth came up the deep teal of the awning over its own front door.
That strip is not white on purpose. Safari on the iPhone picks the color of its own toolbar off your website now, and about a year ago it changed where it looks. It used to read a tag your developer set for exactly that job. It reads the background color of your page instead. If nobody ever set one, iOS hands you white in light mode and black in dark mode, and your shop gets framed in the same nothing as every other site on the phone.
A web person can fix the mechanics in about ten minutes. Picking the color takes you longer, because it is a brand decision wearing a technical costume.
What Safari reads now, in order
In Safari 26 and later, the browser samples one color from your page at the moment it first paints, then tints the status bar at the top of the screen and the tab bar at the bottom with it.
| Priority | What Safari looks at |
|---|---|
| 1 | A position: fixed or position: sticky element near the edge of the viewport, if it has a background-color |
| 2 | The background-color set on your <body> element |
| 3 | System default: white in light mode, black in dark mode |
Two things on that list catch people out.
The <meta name="theme-color"> tag stopped working. Safari still parses it and then ignores the value. Ben Frain, who has been writing about front-end work for a long time, said it plainly when iOS 26 landed: Safari "dropped support for/broke theme-color; the meta tag you could add to your head to get colored bits at the top and bottom of your websites." If your site has that tag and nothing else, you are getting the system default.
And <html> does not count. Only <body> does. Plenty of themes set the page background on the html element or on a wrapper div inside body, which looks identical to a visitor and does nothing for the toolbar.
Why is the top of my phone white on my own website?
Because your theme almost certainly styles a container instead of the body.
Open your site on a laptop, right-click in the empty white area, and choose Inspect. Look at which element carries the background color. If it is a div with a class name like site-wrapper or page-content, you found it. Safari looks one level up and finds nothing there.
The other common cause is a sticky header. When the bar at the top of your site follows you down the page and has its own background color, Safari uses the header's color and skips the body entirely. That works out fine when the header is your brand color. It is a problem when the header is white and the rest of the page is not, which describes a lot of restaurant sites I open.
One more trap. Safari samples that color once, at first render. Ben Nasedkin's breakdown of the behavior notes that the toolbar "won't update" when a script changes document.body.style.backgroundColor after the page has loaded, and that the limit is deliberate rather than a bug. A dark mode toggle built in JavaScript will flip your whole page and leave the phone's bar sitting on the old color.
What changes in September
iOS 27 ships alongside the new iPhones next month, and it does two things here.
Apple added a transparency slider. Per MacRumors' iOS 27 roundup, "there is a slider in the Settings app that lets you choose the level of translucency you want. You can pick a clear option to let more of the background show through, or an opaque, tinted option to minimize the Liquid Glass effect." Apple also retuned the glass so that "complex content behind menu bars, navigation bars, and other interface elements is better diffused."
Read that as a handoff. How much of your color a customer sees is a setting on their phone now, not a decision on your website. One person sees your teal at full strength. The next dialed that slider toward opaque back in the spring and sees a muted version. A third turned tinting off completely, which has been possible the whole time under Settings, Apps, Safari, Tabs, Allow Website Tinting.
So the color has to hold up in both directions. That rules out the two picks people reach for first: a neon that goes radioactive at full saturation, and a pale tint that dissolves into white the second someone moves the slider.
What do I tell whoever built my site?
Send them these five lines. Any competent developer finishes in one sitting.
- Put
background-coloronbody. Not onhtml, not on a wrapper div. - Use a real brand color rather than
#ffffff. If the brand is genuinely light, use an off-white that carries your hue in it. - Add
viewport-fit=coverto the viewport meta tag. Without it, theenv(safe-area-inset-*)values stay at zero and the next line does nothing. - Pad any sticky bottom bar with
env(safe-area-inset-bottom)so the phone's tab bar stops sitting on top of your Call button. MDN defines those values as "the safe distance from the top, right, bottom, or left inset edge of the viewport, defining where it is safe to place content into without risking it being cut off." - Check the sticky header. A white header beats a colored body every time, and then nobody can work out why the fix did not take.
Then open the site on a real iPhone. Not a simulator, not the responsive view in Chrome. An actual phone, held at the counter the way a customer holds it. The same habit behind the fifteen-minute test for a broken website applies to this.
The part that isn't code
Your brand color picked up a new job, and it is a strange one.
Your brand color has a new job now. It has to survive being a one-inch strip at the top of a stranger's phone.
For years you judged that color at logo size. On a sign, on a cup, maybe on a truck door. Now you also have to judge it as a thin band above a screen, sitting next to the clock and the battery icon, competing with whatever wallpaper the customer picked. Hardly anybody chose their palette with that in mind.
I check two things before I hand a color over for this.
Does it read at one inch? Print a two-inch by half-inch swatch and hold it at arm's length. Some colors that sing across a storefront go muddy at that size. Muted sage and dusty rose both do it.
Does it fight the status bar? The clock and the battery icon sit directly on your color, rendered in black or white depending on how dark iOS judges the color to be. Anything parked in the middle of the value range makes the phone guess, and it guesses wrong often enough to be worth checking. Mid-tone blues and mid-tone reds are the usual culprits. The contrast problem I wrote about with light gray text nobody can read shows up here at a much smaller scale.
For most shops the answer to both questions is the darkest color already sitting in your logo. Not the accent. The dark one.
Apple has handed your visual identity more real estate twice in two years. The Wallet card redesign put your logo somewhere people open at the register. This puts your color across the top of the screen for as long as someone reads your menu. Neither one asked first, and both fall back to something bland if you never answer. If you want us to sort out the color and the code together, that is most of what we do.
The teal site belonged to a tea shop on the near north side. I asked the owner later whether she chose that color for the phone. She had no idea it was doing anything at all. Her designer set the body background four years ago because it matched the awning out front, and the phone went and found it on its own.
Sources
| # | Source | What it backed up |
|---|---|---|
| 1 | iOS26 Safari theme-color/tab-tinting with fixed position elements is a mess | Safari dropped theme-color support in iOS 26 and draws the tint from the body background color instead. |
| 2 | Why iOS 26 Safari Toolbar Colors Work Differently | The sampling order (fixed/sticky first, then body), that html is ignored, that sampling happens once at render, and the Allow Website Tinting setting. |
| 3 | iOS 27: Everything We Know | The Liquid Glass transparency slider, the improved diffusion behind navigation bars, and the September 2026 release alongside new iPhones. |
| 4 | MDN: env() CSS function | Definition of the safe-area-inset-* values used to keep a sticky bottom bar clear of the phone's own toolbar. |