Make Safari honor the night sky's toolbar tint - #65
Merged
Conversation
Follow-up to #63 for #60: the toolbar tint worked by day but stayed Safari's default grey at night. Two causes, both Safari-specific: - iOS Safari treats a bare theme-color meta as a light-mode suggestion and falls back to neutral grey chrome in dark mode. Ship a media-gated pair (light/dark) instead; sky.ts rewrites both each render so whichever one Safari is reading carries the current sky. - The static fallback was oklch(), which Safari's theme-color parser rejects — and a rejected value also lands on grey. The pair now starts from the midnight chip as plain hex. Belt and braces, body gets an explicit background-color (--sky-bottom): the gradient shorthand left it transparent, and Safari derives chrome and overscroll tint from background-color when it distrusts or lacks a theme-color — white/grey is the one thing a night sky must never fade into. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Follow-up to #63 for the re-report on #60: the toolbar tint tracked the sky by day but persisted as grey at night on iOS Safari.
Why night stayed grey
Two Safari-specific causes, either of which lands you on its default grey chrome:
theme-colormeta as a light-mode suggestion. In dark mode it ignores it and paints its own neutral grey unless amedia="(prefers-color-scheme: dark)"variant exists. The day tint only looked correct because the day chip is itself a grey-slate, close to Safari's default. The layout now ships a media-gated light/dark pair, andsky.tsrewrites both on every render, so whichever meta Safari is reading always carries the current sky.oklch(), which Safari's theme-color parser rejects — a rejected value also falls back to grey. The pair now starts from the midnight chip as plain hex (#141a3d), and runtime updates were already plainrgb().Belt and braces:
bodynow gets an explicitbackground-color: var(--sky-bottom)— the gradient shorthand left it transparent, and Safari derives chrome/overscroll tint frombackground-colorwhen it distrusts or lacks a theme-color. README updated to describe the pair.Verified
Both metas and the body background-color confirmed updating through auto/day/night switches in the dev server (night navy
rgb(29, 42, 97)↔ day slatergb(66, 83, 101)). All 19 Playwright tests pass;check:contrastholds; Prettier and stylelint clean. I could not exercise real iOS Safari chrome from this machine (no Xcode/simulator installed), so please re-check on your phone — the dark-mode meta pair is the documented fix for exactly this grey-toolbar behavior.🤖 Generated with Claude Code