light/dark mode selector

Author: mattburchett

frontend/src/context/ThemeContext.tsx

@@ -14,30 +14,38 @@ interface ThemeProviderProps {
   children: ReactNode;
 }
 
-export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
-  const [theme, setThemeState] = useState<Theme>('system');
-  const [effectiveTheme, setEffectiveTheme] = useState<'light' | 'dark'>('light');
-
-  // Initialize theme from localStorage or default to system
-  useEffect(() => {
+// Initialize theme from localStorage before component render
+const getInitialTheme = (): Theme => {
+  if (typeof window !== 'undefined') {
     const savedTheme = localStorage.getItem('theme') as Theme | null;
     if (savedTheme && ['light', 'dark', 'system'].includes(savedTheme)) {
-      setThemeState(savedTheme);
+      return savedTheme;
     }
-  }, []);
+  }
+  return 'system';
+};
 
-  // Update effective theme based on theme setting and system preference
-  useEffect(() => {
-    const updateEffectiveTheme = () => {
-      if (theme === 'system') {
-        const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-        setEffectiveTheme(systemPrefersDark ? 'dark' : 'light');
-      } else {
-        setEffectiveTheme(theme);
-      }
-    };
+// Get effective theme based on theme setting
+const getEffectiveTheme = (theme: Theme): 'light' | 'dark' => {
+  if (theme === 'system') {
+    if (typeof window !== 'undefined') {
+      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+    return 'light';
+  }
+  return theme;
+};
 
-    updateEffectiveTheme();
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
+  const [theme, setThemeState] = useState<Theme>(getInitialTheme);
+  const [effectiveTheme, setEffectiveTheme] = useState<'light' | 'dark'>(
+    getEffectiveTheme(getInitialTheme())
+  );
+
+  // Update effective theme when theme changes
+  useEffect(() => {
+    const newEffectiveTheme = getEffectiveTheme(theme);
+    setEffectiveTheme(newEffectiveTheme);
 
     // Listen for system preference changes when in system mode
     if (theme === 'system') {
@@ -54,11 +62,17 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
   // Apply theme to document
   useEffect(() => {
     const root = document.documentElement;
+
     if (effectiveTheme === 'dark') {
       root.classList.add('dark');
     } else {
       root.classList.remove('dark');
     }
+
+    // Also apply to body for background
+    document.body.className = effectiveTheme === 'dark'
+      ? 'bg-gray-900 text-gray-50'
+      : 'bg-gray-50 text-gray-900';
   }, [effectiveTheme]);
 
   const setTheme = (newTheme: Theme) => {

frontend/src/styles/globals.css

@@ -1,13 +1,11 @@
 @import "tailwindcss";
 
 @layer base {
-  body {
+  :root {
     @apply bg-gray-50 text-gray-900;
   }
 
-  @media (prefers-color-scheme: dark) {
-    body {
-      @apply bg-gray-900 text-gray-50;
-    }
+  :root.dark {
+    @apply bg-gray-900 text-gray-50;
   }
 }