fix(docs): stop Scalar's global body bg from bleeding into the docs on client-nav

Scalar's /api reference injects a *global* `body { background-color: var(--scalar-background-1) }` (via its linked stylesheet + a runtime <style id=scalar-style>) that TanStack doesn't remove on a client-side route change. After navigating /api -> /docs without a reload, that rule kept painting the docs body: Scalar's stock gray (#0f0f0f) while .dark-mode lingered on <body>, or transparent once the class was gone. A hard reload was fine because the stylesheet was never loaded there. Fix: give --scalar-background-1 a global fallback = --color-fd-background so any non-API page paints its own surface while Scalar's sheet lingers; /api itself overrides it via the higher-specificity body.{dark,light}-mode rule. Also strip the leftover #scalar-style/#scalar-refs nodes and body mode-class when /api unmounts so the DOM matches a fresh load. Verified light + dark via headless CDP: post-nav docs body now equals a fresh reload (#141019 / #f0ebff). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-21 18:49:20 +00:00
parent 78c16e5136
commit 983adc5347
2 changed files with 28 additions and 0 deletions
@@ -28,6 +28,16 @@
  /* Fumadocs accent → brand violet (light mode). */
  --color-fd-primary: var(--pf-brand);
  --color-fd-ring: var(--pf-brand);
+
+  /* The /api Scalar reference injects a *global* `body { background-color:
+     var(--scalar-background-1) }` (via its own stylesheet + a runtime
+     <style id="scalar-style">) that TanStack does NOT remove on a client-side
+     route change. Give that variable a fallback = the docs surface so every
+     non-API page still paints correctly while Scalar's sheet lingers (without
+     this the docs body went gray, or transparent once the body mode-class was
+     stripped). On /api itself the reference's body.{dark,light}-mode rule
+     (higher specificity) overrides this back to the brand chrome. */
+  --scalar-background-1: var(--color-fd-background);
 }

 .dark {