feat: implement theme switching functionality with ThemeProvider and update Header component

apps/frontend/src/components/layout/Header.tsx

@@ -1,6 +1,7 @@
-import { Menu } from "lucide-react";
+import { Menu, Sun, Moon, Monitor } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { useSseStatus } from "@/lib/sse-context";
+import { useTheme } from "@/lib/theme";
 import { cn } from "@/lib/utils";
 
 interface HeaderProps {
@@ -9,6 +10,11 @@ interface HeaderProps {
 
 export function Header({ onMenuClick }: HeaderProps) {
   const sseStatus = useSseStatus();
+  const { theme, cycleTheme } = useTheme();
+
+  const ThemeIcon = theme === "light" ? Sun : theme === "dark" ? Moon : Monitor;
+  const themeLabel =
+    theme === "light" ? "Claro" : theme === "dark" ? "Oscuro" : "Sistema";
 
   return (
     <header className="flex h-14 items-center gap-4 border-b px-4">
@@ -22,6 +28,14 @@ export function Header({ onMenuClick }: HeaderProps) {
       </Button>
       <div className="flex-1" />
       <div className="flex items-center gap-1.5">
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={cycleTheme}
+          title={`Tema: ${themeLabel} (Cmd+D)`}
+        >
+          <ThemeIcon className="size-4" />
+        </Button>
         <span
           className={cn(
             "size-2 rounded-full",