Full light/dark theme toggle; brand-aware connector lines

- Theme is now class-based (.dark on <html>) with a System/Light/Dark toggle in the sidebar, persisted to localStorage and applied pre-paint by an inline script (no flash). Replaces the prefers-color-scheme-only behavior, so a phone on a light OS theme can still choose dark and vice versa. - New brand-derived --line token (Ink at 55%): a dark line on the light paper, light on dark. The family-chart tree connectors had the library's default white stroke and were invisible in light mode — now they use --line, as do the pedigree brackets and the fan-chart sectors. - Light/dark tokens use the exact brand palette (Ink/Muted flip; Bronze/Paper constant). Frontend only — no migration. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-07 11:48:59 -04:00
parent 548e883d82
commit e8839b15a0
6 changed files with 91 additions and 15 deletions
@@ -18,9 +18,16 @@ export const metadata: Metadata = {
  icons: { icon: "/favicon.svg" },
 };

+// Sets the theme class before first paint to avoid a flash; reads the saved
+// choice ("light"/"dark"/"system") or falls back to the OS preference.
+const themeScript = `(function(){try{var t=localStorage.getItem("theme");var d=t==="dark"||((!t||t==="system")&&window.matchMedia("(prefers-color-scheme: dark)").matches);document.documentElement.classList.toggle("dark",d);}catch(e){}})();`;
+
 export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
-    <html lang="en" className={`${serif.variable} ${sans.variable}`}>
+    <html lang="en" className={`${serif.variable} ${sans.variable}`} suppressHydrationWarning>
+      <head>
+        <script dangerouslySetInnerHTML={{ __html: themeScript }} />
+      </head>
      <body className="min-h-screen antialiased">{children}</body>
    </html>
  );