Skip to content

fix(mapgen-studio): sync .dark class to theme preference at runtime#1624

Merged
mateicanavra merged 2 commits into
mainfrom
design/theme-class-sync
Jun 12, 2026
Merged

fix(mapgen-studio): sync .dark class to theme preference at runtime#1624
mateicanavra merged 2 commits into
mainfrom
design/theme-class-sync

Conversation

@mateicanavra

Copy link
Copy Markdown
Owner

The in-app theme toggle was functionally broken: cycling through Auto → Light → Dark updated the button label and the deck.gl scene's lightMode input, but <html> never gained or lost the .dark class after the initial page load. The pre-paint bootstrap in index.html correctly sets the class before first paint to avoid flash, but no runtime writer ever existed to update it afterward — leaving light mode reachable only by reloading with a light OS preference and no stored override.

This adds the missing useEffect in StudioProviders that syncs document.documentElement.classList.toggle("dark", !isLightMode) whenever the resolved preference changes. The bootstrap retains ownership of the pre-paint initial state; React owns every update after hydration. No changes to the preference cycle, storage key, bootstrap script, design tokens, or deck.gl wiring.

Also adds the mapgen-studio-theme-class-sync OpenSpec slice (proposal, spec, and tasks) and marks all six Pass-2 design slices as complete in the project goal doc, including a closure note recording the verification state at tip.

This was referenced Jun 12, 2026
@github-actions

Copy link
Copy Markdown

Railway preview (MapGen Studio): not provisioned for this PR.

Policy (Graphite stacks): previews are created only for the top-of-stack PR by default.

  • To force a preview for this PR: add label railway-preview
  • To suppress a preview: add label no-railway-preview

Debug: {"isClosed":false,"isFork":false,"suppress":false,"force":false,"isTopOfStack":false,"hasToken":true,"draft":false}

mateicanavra commented Jun 12, 2026

Copy link
Copy Markdown
Owner Author

This stack of pull requests is managed by Graphite. Learn more about stacking.

mateicanavra commented Jun 12, 2026

Copy link
Copy Markdown
Owner Author

Merge activity

  • Jun 12, 8:50 PM UTC: A user started a stack merge that includes this pull request via Graphite.
  • Jun 12, 9:31 PM UTC: Graphite rebased this pull request as part of a merge.
  • Jun 12, 9:31 PM UTC: @mateicanavra merged this pull request with Graphite.

@mateicanavra
mateicanavra changed the base branch from design/first-run-visibility to graphite-base/1624 June 12, 2026 21:28
@mateicanavra
mateicanavra changed the base branch from graphite-base/1624 to main June 12, 2026 21:29
mateicanavra and others added 2 commits June 12, 2026 21:30
… Pass-2 visual gate)

OpenSpec mapgen-studio-theme-class-sync. The theming repair relied on the single
.dark class, but only the index.html bootstrap ever wrote it — cycling the theme
relabeled the button and changed the deck.gl lightMode input while the chrome
stayed in its boot theme. StudioProviders (theme wiring owner) now syncs
documentElement's .dark to the resolved preference on change; the bootstrap
keeps pre-paint ownership (no flash). Verified live: cycle → chrome re-themes
both directions, light + dark screenshots. tsc + 144 tests + strict valid.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…ices, visually verified)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@mateicanavra
mateicanavra force-pushed the design/theme-class-sync branch from 93c11bc to 76be94b Compare June 12, 2026 21:30
@mateicanavra
mateicanavra merged commit ef8a138 into main Jun 12, 2026
This was referenced Jun 12, 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.

1 participant