Skip to content

Fix landing page diagram rendering on iOS Safari dark mode - #55

Closed
pelikhan with Copilot wants to merge 4 commits into
mainfrom
copilot/fix-diagram-rendering-ios-safari
Closed

Fix landing page diagram rendering on iOS Safari dark mode#55
pelikhan with Copilot wants to merge 4 commits into
mainfrom
copilot/fix-diagram-rendering-ios-safari

Conversation

Copilot AI commented Aug 27, 2026

Copy link
Copy Markdown
Contributor

The hero diagram on the landing page baked its dark-mode colors into @media (prefers-color-scheme: dark) rules embedded inside SVGs referenced via <img> and data URIs. Safari (iOS and macOS) does not evaluate that media query in this context, so the diagram rendered with the light palette on dark-mode iOS Safari, clashing with the surrounding dark page.

Static fallback diagrams

  • Split control-plane-dispatch-fallback.svg and control-plane-dispatch-mobile.svg into separate light and new *-dark.svg variants with the palette baked in (no embedded media query).
  • Swap them via <picture> / <source media="(prefers-color-scheme: dark)"> in HierarchyHero.astro, matching the pattern already used in docs/architecture.md.

Lottie animation icons

  • The animation's embedded icon assets (sparkle, status dots, report card) in control-plane-dispatch.animation.mjs had the same embedded-media-query pattern, referenced via data URIs.
  • Reworked these to accept a prefersDark flag and resolve colors in JS instead of relying on the SVG's own media query.
  • HierarchyHero.astro now detects prefers-color-scheme: dark via matchMedia, passes it to the animation builders, and re-initializes the animation when the OS scheme changes.
<picture>
  <source media="(prefers-color-scheme: dark)" srcset={dispatchFallbackDark.src} />
  <img src={dispatchFallback.src} ... class="pipeline-image" />
</picture>

Co-authored-by: pelikhan <4175913+pelikhan@users.noreply.github.com>
@pelikhan

Copy link
Copy Markdown
Contributor

@copilot generate screenshots

Copilot AI commented Aug 28, 2026

Copy link
Copy Markdown
Contributor Author

@copilot generate screenshots

Built the docs site and captured the hero diagram on an iPhone-sized viewport (393×852, iOS Safari UA) with prefers-color-scheme emulated both ways:

  • Dark mode: dark background, light text, purple sparkles, and colored status/report elements all render correctly — no more light-palette bleed-through.
  • Light mode: unchanged, matches the original light theme.

Both variants now match the surrounding page theme instead of the diagram staying stuck in the light palette under dark mode.

Co-authored-by: mnkiefer <8320933+mnkiefer@users.noreply.github.com>
Copilot AI requested a review from mnkiefer August 28, 2026 07:25
@mnkiefer
mnkiefer marked this pull request as draft August 28, 2026 08:00
@mnkiefer
mnkiefer marked this pull request as ready for review August 28, 2026 08:00
@mnkiefer

Copy link
Copy Markdown
Contributor

@copilot Revert changes from 1ea52c4

Co-authored-by: mnkiefer <8320933+mnkiefer@users.noreply.github.com>

Copilot AI commented Aug 28, 2026

Copy link
Copy Markdown
Contributor Author

@copilot Revert changes from 1ea52c4

Done in 005c07f.

Co-authored-by: mnkiefer <8320933+mnkiefer@users.noreply.github.com>
@mnkiefer

Copy link
Copy Markdown
Contributor

Closing in favor of new PR

@mnkiefer mnkiefer closed this Aug 28, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants