From 4905e351e276929726c38db247a2bf519482a3a6 Mon Sep 17 00:00:00 2001
From: saravanakumardb1 <saravanakumardb1@users.noreply.github.com>
Date: Fri, 27 Mar 2026 16:39:22 -0700
Subject: [PATCH] feat(design-system): add use-theme hook for dark/light toggle

---
 web/src/lib/use-theme.ts | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 web/src/lib/use-theme.ts

diff --git a/web/src/lib/use-theme.ts b/web/src/lib/use-theme.ts
new file mode 100644
index 0000000..cc21048
--- /dev/null
+++ b/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 };
+}