hub-client: theme the changelog/more-info iframe to match app dark mode - #626
Merged
Conversation
Contributor
✅ Snyk checks have passed. No issues have been found so far.
💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse. |
shikokuchuo
force-pushed
the
fix-624-changelog-dark-mode
branch
2 times, most recently
from
August 27, 2026 22:31
1b6a7b9 to
cc6ecfe
Compare
…de (GH #624) The About tab renders changelog.md and more-info.md through the WASM pipeline into a sandboxed iframe. That document is a separate browsing context: it sees none of the app's theme classes or CSS variables, its canvas lets the modal's --bg-modal show through, and the injected stylesheet hardcoded light colors (#333 text). On the dark modal that is 1.3:1 contrast — the changelog was near-invisible. Extract the injected stylesheet into utils/changelogDoc.ts with light and dark variants built from the theme.css palette (every text/ background pair meets WCAG AA 4.5:1, pinned by contrast tests), declare color-scheme so UA painting follows, and set the body background to the modal color so the iframe blends seamlessly. AboutTab now keeps the raw WASM renders and re-injects theme-matched styles from useTheme().effectiveTheme, so a theme flip restyles an open document without re-running the pipeline. Also switches the light-theme link color from off-palette #646cff (4.09:1, AA fail) to the app's own --accent-secondary #447099 (5.22:1). Verified end-to-end in Chromium (Playwright): real WASM-rendered changelog + real theme.css screenshotted in both themes; dark probe reports #fff text on #213D4F with color-scheme: dark.
shikokuchuo
force-pushed
the
fix-624-changelog-dark-mode
branch
from
August 27, 2026 22:43
cc6ecfe to
8e3afb5
Compare
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
2 participants
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.
Closes #624.
Root cause
The About tab renders
changelog.mdandmore-info.mdthrough the WASM pipeline into a sandboxed iframe. That iframe document is a separate browsing context: it sees none of the app's theme classes or CSS variables, its canvas lets the modal's--bg-modalshow through, and the injected stylesheet hardcoded light colors (#333text, no background). On the dark modal (#213D4F) that is 1.3:1 contrast — the changelog was near-invisible in dark mode.Fix
hub-client/src/utils/changelogDoc.ts: builds light and dark variants of the injected stylesheet from the theme.css palette (every text/background pair meets WCAG AA 4.5:1, pinned by contrast tests), declarescolor-schemeso UA painting (scrollbars) follows, and sets the body background to the modal color so the iframe blends seamlessly.AboutTab.tsxnow keeps the raw WASM renders and re-injects theme-matched styles fromuseTheme().effectiveTheme, so a theme flip restyles an already-rendered document without re-running the pipeline.#646cff(4.09:1, AA fail) to the app's own--accent-secondary#447099(5.22:1).Tests
changelogDoc.test.ts) pinning WCAG AA contrast for text/links/code chips against each theme's modal background, plus injection behavior — written failing-first per TDD.AboutTab.test.tsx) with mocked WASM: dark app theme → iframe srcdoc gets dark styles; light → light. Existing shortcuts test now wraps inThemeProvider.Verification
npm run build:allclean.#ffftext onrgb(33, 61, 79)withcolor-scheme: dark; light unchanged. Before/after screenshots inspected; dark mode went from illegible to fully readable.Full
cargo xtask verifywas skipped at the request of the reviewer (hub-client-only change; no Rust crates touched).