🌰👝 ↝ [SSG-268 SSG-270]: Use-theme hook for light mode toggle

Author: Gizmotronn

add_unlocked_column.sql

@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+
+export function useTheme() {
+  const [isDark, setIsDark] = useState(false);
+
+  // Initialize theme from localStorage on component mount
+  useEffect(() => {
+    const savedTheme = localStorage.getItem('star-sailors-theme');
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    
+    const shouldBeDark = savedTheme === 'dark' || (savedTheme === null && prefersDark);
+    
+    setIsDark(shouldBeDark);
+    document.documentElement.classList.toggle('dark', shouldBeDark);
+  }, []);
+
+  const toggleTheme = () => {
+    const newTheme = !isDark;
+    setIsDark(newTheme);
+    
+    // Save to localStorage
+    localStorage.setItem('star-sailors-theme', newTheme ? 'dark' : 'light');
+    
+    // Apply to document
+    document.documentElement.classList.toggle('dark', newTheme);
+  };
+
+  return { isDark, toggleTheme };
+}