Move dark class to <html> so portals render with dark tokens (closes #198) (#199)

germanescobar · web-flow · commit 4fe6b5ec7e07 · 2026-06-23T15:19:30.000-05:00
The Sonner Toaster, DialogContent, and PopoverContent all portal to
document.body, escaping the inner &lt;div className="dark …"&gt; wrapper in
App.tsx. The dark variant selector (&amp;:is(.dark *)) only matches elements
inside a .dark ancestor, so those surfaces resolved :root light values
(white backgrounds).

Moving the class to &lt;html&gt; makes the dark tokens apply to every portal
mounted under &lt;body&gt;. It also prevents a flash of light content on
initial load, since the class is present before React mounts.

Validated: 291/291 tests pass; vite build succeeds; dev server returns
the modified HTML with &lt;html class="dark"&gt;.
diff --git a/client/index.html b/client/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="dark">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -562,7 +562,7 @@ export function App() {
     projects.find((project) => project.id === mobileHeaderProjectId)?.name ?? "Controller";
 
   return (
-    <div className="dark flex h-dvh w-full bg-background text-foreground">
+    <div className="flex h-dvh w-full bg-background text-foreground">
       {sidebarOpen && (
         <div
           className="fixed inset-0 z-30 bg-black/50 md:hidden"
