Change default theme from light to system

Update theme default to respect device preference instead of always defaulting to light mode. This affects both the React components and the static CSS initialization script to prevent FOUC.

Changes:
- ThemeToggle: Default to 'system' theme
- ThemeSelector: Default to 'system' theme
- index.astro: Initialize with 'system' theme in inline script

First-time visitors will now see the theme that matches their device's dark/light mode preference.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: vinc3m1

src/components/ThemeSelector.tsx

@@ -15,14 +15,17 @@ const ThemeModeSchema = z.enum(['light', 'dark', 'system']);
 type ThemeMode = z.infer<typeof ThemeModeSchema>;
 
 function getThemeMode(): ThemeMode {
-  if (typeof window === 'undefined') return 'light';
+  if (typeof window === 'undefined') return 'system';
   const stored = localStorage.getItem('theme');
   const result = ThemeModeSchema.safeParse(stored);
-  return result.success ? result.data : 'light';
+  return result.success ? result.data : 'system';
 }
 
 function getEffectiveMode(mode: ThemeMode): 'light' | 'dark' {
-  if (typeof window === 'undefined') return 'light';
+  if (typeof window === 'undefined') {
+    // During SSR, assume light as a safe default for hydration
+    return 'light';
+  }
   if (mode === 'system') {
     return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
   }

src/components/ThemeToggle.tsx

@@ -9,14 +9,17 @@ const ThemeSchema = z.enum(['light', 'dark', 'system']);
 type Theme = z.infer<typeof ThemeSchema>;
 
 function getThemePreference(): Theme {
-  if (typeof window === 'undefined') return 'light';
+  if (typeof window === 'undefined') return 'system';
   const stored = localStorage.getItem('theme');
   const result = ThemeSchema.safeParse(stored);
-  return result.success ? result.data : 'light';
+  return result.success ? result.data : 'system';
 }
 
 function getEffectiveTheme(theme: Theme): 'light' | 'dark' {
-  if (typeof window === 'undefined') return 'light';
+  if (typeof window === 'undefined') {
+    // During SSR, assume light as a safe default for hydration
+    return 'light';
+  }
   if (theme === 'system') {
     return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
   }
@@ -54,7 +57,7 @@ function applyTheme(theme: Theme) {
 }
 
 export function ThemeToggle() {
-  const [theme, setTheme] = useState<Theme>('light');
+  const [theme, setTheme] = useState<Theme>('system');
   const [mounted, setMounted] = useState(false);
 
   useEffect(() => {

src/pages/index.astro

@@ -80,7 +80,7 @@ const structuredData = {
     <script is:inline>
       (function() {
         // Apply light/dark mode
-        const theme = localStorage.getItem('theme') || 'light';
+        const theme = localStorage.getItem('theme') || 'system';
         const effective = theme === 'system'
           ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
           : theme;