feat: Implement theme state management and enhance theme toggle button with dynamic icons and accessibility.

frontend/src/pages/Dashboard.tsx

@@ -12,6 +12,9 @@ export function Dashboard() {
     const navigate = useNavigate()
     const [user, setUser] = useState<User | null>(null)
     const [loading, setLoading] = useState(true)
+    const [theme, setTheme] = useState(() =>
+        document.documentElement.getAttribute('data-theme') || 'light'
+    )
 
     useEffect(() => {
         // First get auth info, then fetch full user profile for name
@@ -43,6 +46,13 @@ export function Dashboard() {
         navigate('/login')
     }
 
+    const toggleTheme = () => {
+        const newTheme = theme === 'dark' ? 'light' : 'dark'
+        document.documentElement.setAttribute('data-theme', newTheme)
+        localStorage.setItem('theme', newTheme)
+        setTheme(newTheme)
+    }
+
     if (loading) {
         return <div style={{ padding: 'var(--space-lg)' }}>Loading...</div>
     }
@@ -51,13 +61,6 @@ export function Dashboard() {
         return null
     }
 
-    const toggleTheme = () => {
-        const current = document.documentElement.getAttribute('data-theme')
-        const newTheme = current === 'dark' ? 'light' : 'dark'
-        document.documentElement.setAttribute('data-theme', newTheme)
-        localStorage.setItem('theme', newTheme)
-    }
-
     // Display name or username fallback
     const displayName = user.name || user.username
 
@@ -69,8 +72,13 @@ export function Dashboard() {
                     <h1>zhealth</h1>
                 </div>
                 <div style={{ display: 'flex', gap: 'var(--space-sm)' }}>
-                    <button className="btn btn-secondary" onClick={toggleTheme}>
-                        Theme
+                    <button
+                        className="btn btn-secondary"
+                        onClick={toggleTheme}
+                        title={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
+                        style={{ fontSize: '18px', padding: 'var(--space-sm)' }}
+                    >
+                        {theme === 'dark' ? '☀️' : '🌙'}
                     </button>
                     <button className="btn btn-secondary" onClick={handleLogout}>
                         Logout
@@ -78,6 +86,7 @@ export function Dashboard() {
                 </div>
             </header>
 
+
             <main>
                 <div className="card" style={{ marginBottom: 'var(--space-lg)' }}>
                     <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>