fix(ui): render dark theme attrs on SSR html to stop hydration mismatch#7622
Merged
Merged
Conversation
RootShell rendered <html> with no className/style, while the no-flash script added class="dark" and color-scheme:dark to the client before hydration -- causing a hydration-mismatch console error on every page load. Render both attributes server-side instead, since the app is dark-mode-only, and drop the now-redundant no-flash script. Closes #7618
Contributor
|
Superagent didn't find any vulnerabilities or security issues in this PR. |
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
loopover-ui | 0751070 | Commit Preview URL Branch Preview URL |
Jul 21 2026, 04:21 AM |
Bundle ReportChanges will decrease total bundle size by 106 bytes (-0.0%) ⬇️. This is within the configured threshold ✅ Detailed changes
Affected Assets, Files, and Routes:view changes for bundle: loopover-uiAssets Changed:
|
loopover-orb
Bot
added
the
gittensor:bug
|
Tip ✅ LoopOver review result - approve/merge recommendedReview updated: 2026-07-21 04:22:44 UTC
Review summary Nits — 5 non-blocking
Decision drivers
Context & advisory signals — never blocks the verdict
Linked issue satisfactionAddressed Review context
Contributor next steps
Signal definitions
🧪 Chat with LoopOverAsk LoopOver a question about this PR directly in a comment — grounded only in the same cached, public-safe facts shown above, never a new claim.
Full command reference: https://loopover.ai/docs/loopover-commands 🧪 Experimental — new and may change. Visual preview
Click any thumbnail to open the full-size screenshot. Before = production · After = this PR's preview deploy. Scroll preview
A short scroll-through clip (desktop) — click either thumbnail to open the full animation. Evidence for scroll-linked behavior a single screenshot can't show. 🟩 Safe / merged · 🟦 Advisory · 🟨 Held for review · 🟥 Blocked / closed 💰 Earn for open-source contributions like this. Gittensor lets GitHub contributors earn for the work they already do — register to start earning →. Checked by LoopOver, a quiet PR intelligence layer for OSS maintainers.
|
![loopover-orb[bot]](https://avatars.githubusercontent.com/in/4139483?s=60&v=4){kind=small}
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.
Summary
apps/loopover-uilogged a React hydration-mismatch console error for the<html>element'sclassName="dark"/style={{color-scheme:"dark"}}(SSR rendered neither; a pre-hydration no-flash script added both client-side before React ever hydrated, so React always detected a mismatch on first paint).RootShell(apps/loopover-ui/src/routes/__root.tsx) now rendersclassName="dark"andstyle={{ colorScheme: "dark" }}directly on the server-rendered<html>tag, so SSR output already matches what the client needs.THEME_NOFLASH_SCRIPTno-flash script and itstheme-toggle.tsxmodule are deleted — nothing else imported them.No behavioral or visual change: the app already always rendered dark; this only fixes how the
darkclass/style attributes get onto<html>, removing the console error and the (harmless but noisy) hydration patch-up work React did on every load.Scope
type(scope): short summaryConventional Commit format.CONTRIBUTING.mdand does not reintroduce GitHub Pages, VitePress,site/, orCNAME.Validation
git diff --checknpm run actionlint(vianpm run test:ci)npm run typecheck(vianpm run test:ci)npm run test:coveragelocally — full suite green (1036 files / 19,563 tests); this is a UI-only change underapps/loopover-ui/**, which Codecov'scodecov/patchdoes not measure (onlysrc/**is measured), so there's no patch-coverage obligation here.npm run test:workers(vianpm run test:ci)npm run build:mcp/npm run test:mcp-pack(vianpm run test:ci)npm run ui:openapi:check(vianpm run test:ci) — no API/schema changes, N/A but ran cleannpm run ui:lintnpm run ui:typechecknpm run ui:build(also verified withvite build+ a production preview — see below)npm audit --audit-level=moderate— 0 vulnerabilitiesManual verification: reproduced the hydration-mismatch console error on
npm --workspace @loopover/ui run devbefore the fix (every page load, e.g./docs/quickstart), confirmed it is gone after the fix on a fresh page load in bothnpm run devand a production build (vite build, served viawrangler dev --config dist/server/wrangler.jsonagainst the built Worker output —vite previewitself has an unrelated, pre-existing breakage in this repo, tracked separately). Confirmeddocument.documentElementstill carriesclass="dark"/style="color-scheme: dark"correctly post-fix.Safety
UI Evidencesection — not applicable: this fix produces zero pixel/visual difference (the app already always rendered dark; only how thedarkattributes reach<html>changed). The actual evidence is the browser console, not the rendered page, so a page screenshot would show nothing different before/after. See Notes for the console evidence instead.Notes
Console evidence (before → after), reproduced on
/docs/quickstart:Before:
After: no console errors on a fresh page load;
document.documentElementreports{"className":"dark","colorScheme":"dark"}as expected, sourced from the SSR HTML rather than a post-hydration script.