feat: re/org theme code and fix dark/light mode flickering

dahal · dahal · commit 9ee4817a4861 · 2025-05-31T04:09:52.000-05:00
diff --git a/apps/captable/app/layout.tsx b/apps/captable/app/layout.tsx
@@ -3,10 +3,9 @@ import "@/styles/globals.css";
 import { cn } from "@/lib/utils";
 import { robotoMono, satoshi } from "@/styles/fonts";
 import { ProgressBarProvider } from "@/providers/progress-bar";
-import { ThemeProvider } from "@/providers/theme-provider";
+import { ThemeProvider, ThemeToggle } from "@/components/theme";
 import { TRPCProvider } from "@/providers/trpc-provider";
 import { PublicEnvScript } from "@/components/public-env-script";
-import { ThemeToggle } from "@/components/theme-toggle";
 import { Toaster } from "sonner";
 import logo from "@/assets/logo.svg";
 import { META } from "@captable/utils/constants";
@@ -56,6 +55,35 @@ export default function RootLayout({
       suppressHydrationWarning
     >
       <head>
+        <script
+          // biome-ignore lint/security/noDangerouslySetInnerHtml: Required for theme application before render
+          dangerouslySetInnerHTML={{
+            __html: `
+              (function() {
+                try {
+                  var storageKey = 'captable-theme';
+                  var theme = localStorage.getItem(storageKey) || 'system';
+                  var root = document.documentElement;
+                  
+                  root.classList.remove('light', 'dark');
+                  
+                  if (theme === 'system') {
+                    var systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+                    root.classList.add(systemTheme);
+                    root.style.colorScheme = systemTheme;
+                  } else {
+                    root.classList.add(theme);
+                    root.style.colorScheme = theme;
+                  }
+                } catch (e) {
+                  // Fallback to light theme if anything fails
+                  document.documentElement.classList.add('light');
+                  document.documentElement.style.colorScheme = 'light';
+                }
+              })();
+            `,
+          }}
+        />
         <PublicEnvScript />
       </head>
       <body className="min-h-screen bg-background text-foreground">
diff --git a/apps/captable/components/theme/index.ts b/apps/captable/components/theme/index.ts
@@ -0,0 +1,2 @@
+export { ThemeProvider, useTheme } from "./provider";
+export { ThemeToggle } from "./toggle";
diff --git a/apps/captable/components/theme/provider.tsx b/apps/captable/components/theme/provider.tsx
@@ -22,44 +22,57 @@ const initialState: ThemeProviderState = {
 
 const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
 
+function getInitialTheme(storageKey: string, defaultTheme: Theme): Theme {
+  if (typeof window === "undefined") return defaultTheme;
+
+  try {
+    const savedTheme = localStorage.getItem(storageKey) as Theme | null;
+    return savedTheme || defaultTheme;
+  } catch {
+    return defaultTheme;
+  }
+}
+
 export function ThemeProvider({
   children,
   defaultTheme = "system",
   storageKey = "captable-theme",
   ...props
 }: ThemeProviderProps) {
-  const [theme, setTheme] = useState<Theme>(defaultTheme);
-
-  useEffect(() => {
-    const savedTheme = localStorage.getItem(storageKey) as Theme | null;
-    if (savedTheme) {
-      setTheme(savedTheme);
-    }
-  }, [storageKey]);
+  const [theme, setTheme] = useState<Theme>(() =>
+    getInitialTheme(storageKey, defaultTheme),
+  );
 
   useEffect(() => {
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-
     const applyTheme = (newTheme: Theme) => {
       const root = window.document.documentElement;
       root.classList.remove("light", "dark");
 
       if (newTheme === "system") {
-        const systemTheme = mediaQuery.matches ? "dark" : "light";
+        const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+          .matches
+          ? "dark"
+          : "light";
         root.classList.add(systemTheme);
+        root.style.colorScheme = systemTheme;
       } else {
         root.classList.add(newTheme);
+        root.style.colorScheme = newTheme;
       }
     };
 
-    applyTheme(theme);
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
 
     const handleChange = () => {
       if (theme === "system") {
         applyTheme("system");
       }
     };
 
+    // Apply theme when it changes
+    applyTheme(theme);
+
+    // Listen for system theme changes only if current theme is "system"
     mediaQuery.addEventListener("change", handleChange);
 
     return () => {
@@ -70,8 +83,13 @@ export function ThemeProvider({
   const value = {
     theme,
     setTheme: (newTheme: Theme) => {
-      localStorage.setItem(storageKey, newTheme);
-      setTheme(newTheme);
+      try {
+        localStorage.setItem(storageKey, newTheme);
+        setTheme(newTheme);
+      } catch {
+        // Fallback if localStorage is not available
+        setTheme(newTheme);
+      }
     },
   };
 
diff --git a/apps/captable/components/theme/toggle.tsx b/apps/captable/components/theme/toggle.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useTheme } from "@/providers/theme-provider";
+import { useTheme } from "./provider";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
diff --git a/package.json b/package.json
@@ -12,8 +12,9 @@
 		"db:migrate": "dotenv -- turbo run db:migrate",
 		"db:studio": "dotenv -- turbo run db:studio",
 		"email:dev": "bun run --cwd packages/email dev --port 3001",
+
 		"// Parallel execution scripts": "",
-		"dev:all": "dotenv -- turbo run dev db:studio email:dev --parallel",
+		"dx": "dotenv -- turbo run dev db:studio email:dev --parallel",
 		"lint:all": "dotenv -- turbo run lint check-types format --parallel",
 		"clean": "dotenv -- turbo run clean && rm -rf node_modules/.cache",
 		"fresh": "bun run clean && bun install && bun run db:generate"

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+export { ThemeProvider, useTheme } from "./provider";`
	`2`	`+export { ThemeToggle } from "./toggle";`