From 07510702d8f9ab40944bfbe8ccf9b1f243ca220c Mon Sep 17 00:00:00 2001 From: JSONbored <49853598+JSONbored@users.noreply.github.com> Date: Mon, 20 Jul 2026 21:18:31 -0700 Subject: [PATCH] fix(ui): render dark theme attrs on SSR html to stop hydration mismatch RootShell rendered 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 --- apps/loopover-ui/src/components/site/theme-toggle.tsx | 9 --------- apps/loopover-ui/src/routes/__root.tsx | 6 +----- 2 files changed, 1 insertion(+), 14 deletions(-) delete mode 100644 apps/loopover-ui/src/components/site/theme-toggle.tsx diff --git a/apps/loopover-ui/src/components/site/theme-toggle.tsx b/apps/loopover-ui/src/components/site/theme-toggle.tsx deleted file mode 100644 index 7a5ff9ba11..0000000000 --- a/apps/loopover-ui/src/components/site/theme-toggle.tsx +++ /dev/null @@ -1,9 +0,0 @@ -// Dark-mode-only build. The toggle has been removed; this file now only -// ships the no-flash script that locks into dark mode on first paint. -export const THEME_NOFLASH_SCRIPT = ` -(function(){try{ - var r=document.documentElement; - r.classList.add('dark'); - r.style.colorScheme='dark'; -}catch(e){}})(); -`; diff --git a/apps/loopover-ui/src/routes/__root.tsx b/apps/loopover-ui/src/routes/__root.tsx index 6dd46316f0..be5a945c7c 100644 --- a/apps/loopover-ui/src/routes/__root.tsx +++ b/apps/loopover-ui/src/routes/__root.tsx @@ -14,7 +14,6 @@ import { reportLovableError } from "../lib/lovable-error-reporting"; import { captureBrowserError } from "../lib/browser-sentry"; import { SiteHeader } from "@/components/site/site-header"; import { SiteFooter } from "@/components/site/site-footer"; -import { THEME_NOFLASH_SCRIPT } from "@/components/site/theme-toggle"; import { BackToTop } from "@/components/site/back-to-top"; import { Toaster } from "@/components/ui/sonner"; import { ApiProgressBar } from "@/components/site/api-progress-bar"; @@ -148,9 +147,6 @@ export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()( }, ], scripts: [ - { - children: THEME_NOFLASH_SCRIPT, - }, { type: "application/ld+json", children: JSON.stringify({ @@ -177,7 +173,7 @@ export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()( function RootShell({ children }: { children: ReactNode }) { return ( - +