feat(frontend): implement step 1 - entity task detail and scheduler UX

frontend/src/components/NavBar.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react'
 import { Link, useLocation } from 'react-router-dom'
 
 const NAV_LINKS = [
@@ -9,20 +10,41 @@ const NAV_LINKS = [
 /** Top navigation bar for authenticated pages. */
 export default function NavBar() {
   const { pathname } = useLocation()
+  const [theme, setTheme] = useState<'dark' | 'light'>(() => {
+    return document.documentElement.classList.contains('dark') ? 'dark' : 'light'
+  })
+
+  useEffect(() => {
+    if (theme === 'dark') {
+      document.documentElement.classList.add('dark')
+      localStorage.setItem('theme', 'dark')
+      return
+    }
+
+    document.documentElement.classList.remove('dark')
+    localStorage.setItem('theme', 'light')
+  }, [theme])
 
   return (
-    <nav className="border-b bg-white">
+    <nav className="border-b border-slate-800 bg-slate-900/80 backdrop-blur">
       <div className="mx-auto flex max-w-7xl items-center gap-6 px-4 py-3">
-        <span className="font-semibold text-gray-900">Condado SA</span>
+        <span className="font-semibold text-slate-100">Condado SA</span>
         {NAV_LINKS.map(({ to, label }) => (
           <Link
             key={to}
             to={to}
-            className={`text-sm ${pathname === to ? 'font-semibold text-blue-600' : 'text-gray-600 hover:text-gray-900'}`}
+            className={`text-sm ${pathname === to ? 'font-semibold text-cyan-300' : 'text-slate-300 hover:text-slate-100'}`}
           >
             {label}
           </Link>
         ))}
+        <button
+          onClick={() => setTheme((prev) => (prev === 'dark' ? 'light' : 'dark'))}
+          className="ml-auto rounded-md border border-slate-700 px-3 py-1.5 text-xs font-medium text-slate-200 hover:bg-slate-800"
+          aria-label="Toggle theme"
+        >
+          {theme === 'dark' ? 'Light mode' : 'Dark mode'}
+        </button>
       </div>
     </nav>
   )