Color matching #147

Closed
opened 2026-10-07 05:19:07 -07:00 by rays · 4 comments
Owner

The color around the island is not the same as the regular ui creating a jarring line and separation in the ui.

The color around the island is not the same as the regular ui creating a jarring line and separation in the ui.
Author
Owner

Likely cause, fixed in 46f9370: the page named no theme-color, so the status bar iOS draws around the Dynamic Island was its own black or white. Inside the page, the top bar is the page's background in every theme on a phone (Classic and Glass have bars of their own), so the band was iOS's, not the page's. The page and the admin page now carry a theme-color set to the page's background, updated when the theme or mode changes. Deployed as 0.10.3-dev. Not seen on a phone: left open until it is. If the band is still there, say whether it is Safari or the home-screen app, and which theme.

Likely cause, fixed in 46f9370: the page named no theme-color, so the status bar iOS draws around the Dynamic Island was its own black or white. Inside the page, the top bar is the page's background in every theme on a phone (Classic and Glass have bars of their own), so the band was iOS's, not the page's. The page and the admin page now carry a theme-color set to the page's background, updated when the theme or mode changes. Deployed as 0.10.3-dev. Not seen on a phone: left open until it is. If the band is still there, say whether it is Safari or the home-screen app, and which theme.
Author
Owner

46f9370 did not do it: Safari 26 ignores theme-color. iOS 26 paints the strip behind the status bar and the island in the background colour of a sticky or fixed element at the top edge, else the root's; the top bar was neither and the root had no colour, so iOS used black or white. Fixed in a553931: the top bar is sticky (nothing scrolls under it), so iOS reads its colour and it runs all the way up; the root has the page's background as the fallback; Classic's metal bar has its top colour under the gradient. Deployed as 0.10.3-dev. Based on developers' reports of iOS 26, not Apple's docs; open until seen on a phone.

46f9370 did not do it: Safari 26 ignores theme-color. iOS 26 paints the strip behind the status bar and the island in the background colour of a sticky or fixed element at the top edge, else the root's; the top bar was neither and the root had no colour, so iOS used black or white. Fixed in a553931: the top bar is sticky (nothing scrolls under it), so iOS reads its colour and it runs all the way up; the root has the page's background as the fallback; Classic's metal bar has its top colour under the gradient. Deployed as 0.10.3-dev. Based on developers' reports of iOS 26, not Apple's docs; open until seen on a phone.
Author
Owner

Home-screen app, Glass. There iOS paints the strip above the page itself, one flat colour, from theme-color. Glass's bar is see-through, so theme-color fell back to Glass's page background, #0b0d14 (#eef1f7 light), above a bar showing #191e34 on average: the black or white band. Fixed in c7eef3e: on a phone Glass's bar is solid in that average colour (--glass-bar) and theme-color carries the same, measured equal in both modes. Also a12aa59 (#151): the closed feed list's shadow darkened the bar's left edge, a seam at the top-left corner. Deployed as 0.10.3-dev. Open until seen on the phone.

Home-screen app, Glass. There iOS paints the strip above the page itself, one flat colour, from theme-color. Glass's bar is see-through, so theme-color fell back to Glass's page background, #0b0d14 (#eef1f7 light), above a bar showing #191e34 on average: the black or white band. Fixed in c7eef3e: on a phone Glass's bar is solid in that average colour (--glass-bar) and theme-color carries the same, measured equal in both modes. Also a12aa59 (#151): the closed feed list's shadow darkened the bar's left edge, a seam at the top-left corner. Deployed as 0.10.3-dev. Open until seen on the phone.
Author
Owner

Seen on the phone (home-screen app, Glass): the strip and the bar match. Closing.

Seen on the phone (home-screen app, Glass): the strip and the bar match. Closing.
rays closed this issue 2026-10-08 18:14:58 -07:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: rays/ipx#147