Status Bar Claim
- Canvas#F5F6FB · dark glyphs
- White#FFFFFF · dark glyphs
- Brand blue#0A6FB8 · light glyphs
- Navy#0C3A5E · light glyphs
- Black#0C0A09 · light glyphs
- Teal#06CBD0 · dark glyphs
- Releaseno claim
A swatch claims the bar through useStatusBarColor (newest claim wins). Release drops the claim; the colour stays chosen for the tests below.
Dim
Dim like a sheet
OS is told #F5F6FB
Native dialog with dimmed backdrop
showModal() + ::backdrop in the top layer — the path WebKit samples explicitly.
Bar variants
Blur under the bar
backdrop-filter on a child of #statusbar — does the tint still follow?
Animate bar colour
transition on #statusbar background — does the sampler skip it?
Hide #statusbar
The Top Bar / body becomes what iOS samples.
These flip the html[data-bar-*] hooks in globals.css; all are removed when you leave the Lab.
Without a claim
Paint html + body
Inline background only, no claim — is body-only colour re-sampled live?
Mount a 2px strip above the bar
A new fixed full-width element on top — does iOS switch the sampled element?
Both use the chosen swatch (#0A6FB8).
Diagnostics
Platform
iOS version (UA)
Standalone
display-mode
Safe-area insets
screen.height
innerHeight
visualViewport.height
--bar-color (computed)
meta theme-color
html[data-bar-color]
Expected glyphs
Claims
none (rest colour)
Redux bar colour / dim
Insets are read after a frame and on resize; tap Refresh after rotating or opening the keyboard.
Device checklist
- Fresh install per row; note iOS build, device (Dynamic Island / notch / none) and which Lab (A = black-translucent, B = sampled).
- Does content reach the top? Record the safe-area top inset and screen.height vs innerHeight / visualViewport.height (orphan strip).
- Rest state: bar equals --bar-color? Glyph colour? Toggle OS light/dark while open — does the bar follow live?
- Tap a swatch: bar updates immediately, after a scroll, back at the top, and after backgrounding / relaunch?
- Dim: scrim only, colour only, both — does the bar dim, do glyphs flip, does it revert on close without relaunch?
- Repeat the dim test with the native dialog (showModal backdrop, then backdrop + Redux dim).
- Blur child on vs off: does the tint still follow --bar-color? Strip off: is the Top Bar sampled instead?
- Letterboxed build (26.1 / 26.5.2): does the system bar follow the header / body colour live, or only on relaunch?
- Soft navigation and swipe-back: does the bar turn into a shadow? Keyboard, rotate, return from an external link: does it recover?
- Android: runtime theme-color repaints? Glyph flip at 3:1 (#808080 vs #707070)? System dark mode on? Samsung Internet? Out-of-scope link and back?
Full list: docs/reference/status-bar-research.md §6.5.
Scroll test
Leaving the Lab releases every claim, dim and toggle.