feat(design-system): add use-theme hook for dark/light toggle

web/src/lib/use-theme.ts

@@ -0,0 +1,28 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+
+type Theme = 'dark' | 'light';
+
+export function useTheme() {
+  const [theme, setThemeState] = useState<Theme>('dark');
+
+  useEffect(() => {
+    const stored = localStorage.getItem('theme') as Theme | null;
+    const initial = stored ?? 'dark';
+    setThemeState(initial);
+    document.documentElement.setAttribute('data-theme', initial);
+  }, []);
+
+  const setTheme = useCallback((t: Theme) => {
+    setThemeState(t);
+    localStorage.setItem('theme', t);
+    document.documentElement.setAttribute('data-theme', t);
+  }, []);
+
+  const toggle = useCallback(() => {
+    setTheme(theme === 'dark' ? 'light' : 'dark');
+  }, [theme, setTheme]);
+
+  return { theme, setTheme, toggle };
+}