From 2a4d66faa9e3522842eb495a3047791b96211796 Mon Sep 17 00:00:00 2001
From: saravanakumardb1 <saravanakumardb1@users.noreply.github.com>
Date: Fri, 27 Feb 2026 21:01:33 -0800
Subject: [PATCH] feat: add dark/light theme toggle with localStorage
 persistence

---
 web/src/components/Dashboard.tsx | 12 ++++++++++-
 web/src/lib/use-theme.ts         | 35 ++++++++++++++++++++++++++++++++
 2 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 web/src/lib/use-theme.ts

diff --git a/web/src/components/Dashboard.tsx b/web/src/components/Dashboard.tsx
index 908c74d..602c3ab 100644
--- a/web/src/components/Dashboard.tsx
+++ b/web/src/components/Dashboard.tsx
@@ -11,7 +11,8 @@ import { CreateTimerModal } from './CreateTimerModal';
 import { AlarmOverlay } from './AlarmOverlay';
 import { requestNotificationPermission } from '@/lib/notifications';
 import { formatTime, formatDate } from '@/lib/format';
-import { Plus, Clock, Bell, Keyboard } from 'lucide-react';
+import { Plus, Clock, Bell, Keyboard, Sun, Moon } from 'lucide-react';
+import { useTheme } from '@/lib/use-theme';
 
 export function Dashboard() {
   const [isCreateOpen, setIsCreateOpen] = useState(false);
@@ -20,6 +21,7 @@ export function Dashboard() {
   const timers = useTimerStore((s) => s.timers);
   const now = useTimerStore((s) => s.now);
   const { pause, resume } = useTimerStore();
+  const { theme, toggle: toggleTheme } = useTheme();
 
   // Start the tick loop
   useTickLoop();
@@ -110,6 +112,14 @@ export function Dashboard() {
             <span className="text-sm font-mono" style={{ color: 'var(--cm-text-tertiary)' }}>
               {formatTime(now)} · {formatDate(now)}
             </span>
+            <button
+              onClick={toggleTheme}
+              className="p-2 rounded-lg transition-colors cursor-pointer"
+              style={{ color: 'var(--cm-text-tertiary)' }}
+              title={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
+            >
+              {theme === 'dark' ? <Sun size={18} /> : <Moon size={18} />}
+            </button>
             <button
               onClick={() => setShowShortcuts((p) => !p)}
               className="p-2 rounded-lg transition-colors cursor-pointer"
diff --git a/web/src/lib/use-theme.ts b/web/src/lib/use-theme.ts
new file mode 100644
index 0000000..87ec2f9
--- /dev/null
+++ b/web/src/lib/use-theme.ts
@@ -0,0 +1,35 @@
+// ── Dark/Light Theme Toggle ────────────────────────────────────
+'use client';
+
+import { useEffect, useState } from 'react';
+
+export type Theme = 'dark' | 'light';
+
+export function useTheme() {
+  const [theme, setTheme] = useState<Theme>('dark');
+
+  useEffect(() => {
+    const stored = localStorage.getItem('chronomind-theme') as Theme | null;
+    if (stored) {
+      setTheme(stored);
+      applyTheme(stored);
+    }
+  }, []);
+
+  const toggle = () => {
+    const next = theme === 'dark' ? 'light' : 'dark';
+    setTheme(next);
+    applyTheme(next);
+    localStorage.setItem('chronomind-theme', next);
+  };
+
+  return { theme, toggle };
+}
+
+function applyTheme(theme: Theme) {
+  if (typeof document === 'undefined') return;
+  document.documentElement.classList.remove('light');
+  if (theme === 'light') {
+    document.documentElement.classList.add('light');
+  }
+}