Add theming infrastructure (task 08)

CSS-variable multi-theme system (default + warm) × {light, dark, system}; per-user theme/theme_mode columns; no-flash pre-paint script; useTheme hook + ThemePicker component on /settings. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-06 02:50:05 -05:00
parent 6710c8b231
commit 8cc2ef0732
12 changed files with 540 additions and 3 deletions
@@ -4,6 +4,10 @@ import { Geist } from "next/font/google";
 import { cn } from "@/lib/utils";
 import { AppNav } from "@/components/app-nav";
 import "@/modules"; // registers all module manifests
+import { auth } from "@/lib/auth";
+import { db } from "@/lib/db";
+import { eq } from "drizzle-orm";
+import { users } from "@/modules/_core/schema";

 const geist = Geist({ subsets: ["latin"], variable: "--font-sans" });

@@ -12,13 +16,53 @@ export const metadata: Metadata = {
  description: "Family coordination app",
 };

-export default function RootLayout({
+// Runs before paint — reads localStorage / prefers-color-scheme and applies
+// data-theme + dark class to <html> so signed-out pages also get the right theme.
+const prePaintScript = `(function(){
+  try {
+    var t = localStorage.getItem('theme') || 'default';
+    var m = localStorage.getItem('themeMode') || 'system';
+    var dark = m === 'dark' || (m === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
+    document.documentElement.setAttribute('data-theme', t);
+    if (dark) document.documentElement.classList.add('dark');
+    else document.documentElement.classList.remove('dark');
+  } catch(e) {}
+})();`;
+
+export default async function RootLayout({
  children,
 }: {
  children: React.ReactNode;
 }) {
+  let theme = "default";
+  let themeMode = "system";
+
+  const session = await auth();
+  if (session?.user?.id) {
+    const [row] = await db
+      .select({ theme: users.theme, themeMode: users.themeMode })
+      .from(users)
+      .where(eq(users.id, session.user.id))
+      .limit(1);
+    if (row) {
+      theme = row.theme;
+      themeMode = row.themeMode;
+    }
+  }
+
+  // For system mode we can't know the preference on the server — the inline
+  // script will correct it before paint. We optimistically render light here.
+  const isDark = themeMode === "dark";
+
  return (
-    <html lang="en" className={cn("font-sans", geist.variable)}>
+    <html
+      lang="en"
+      data-theme={theme}
+      className={cn("font-sans", geist.variable, isDark ? "dark" : "")}
+    >
+      <head>
+        <script dangerouslySetInnerHTML={{ __html: prePaintScript }} />
+      </head>
      <body className="min-h-screen">
        <AppNav />
        <main>{children}</main>