diff --git a/docs-site/src/routes/api/index.tsx b/docs-site/src/routes/api/index.tsx
index 633be21..65c5df2 100644
--- a/docs-site/src/routes/api/index.tsx
+++ b/docs-site/src/routes/api/index.tsx
@@ -158,6 +158,24 @@ function ApiReference() {
   useEffect(() => setMounted(true), [])
   const isDark = !mounted || resolvedTheme !== 'light'
 
+  // Scalar pollutes global scope and never cleans up: it appends a persistent
+  // <style id="scalar-style"> to <head> that includes a *global*
+  // `body { background-color: var(--scalar-background-1) }`, adds its #scalar-refs
+  // teleport target, and toggles .dark-mode/.light-mode on <body>. After a
+  // client-side route change (no reload) that residue bleeds into the next page —
+  // the docs body kept painting Scalar's bg instead of --color-fd-background, so
+  // the docs looked gray until a hard reload. Strip it when /api unmounts so
+  // leaving the page restores the same DOM a fresh load has; Scalar re-injects a
+  // fresh instance on re-entry.
+  useEffect(
+    () => () => {
+      document.getElementById('scalar-style')?.remove()
+      document.getElementById('scalar-refs')?.remove()
+      document.body.classList.remove('dark-mode', 'light-mode')
+    },
+    [],
+  )
+
   // A fresh object on each theme flip so the React wrapper's
   // `updateConfiguration` effect fires and Scalar swaps the body mode class.
   const configuration = useMemo(
diff --git a/docs-site/src/styles/app.css b/docs-site/src/styles/app.css
index e0810d7..b19781a 100644
--- a/docs-site/src/styles/app.css
+++ b/docs-site/src/styles/app.css
@@ -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 {
