Implement dark theme and theme switching

webui/src/components/Header.tsx

@@ -1,6 +1,7 @@
 import { Button } from "@/components/ui/button";
-import { HelpCircle, LogOut } from "lucide-react";
+import { HelpCircle, LogOut, Moon, Sun } from "lucide-react";
 import { useAuth } from "@/contexts/AuthContext";
+import { useTheme } from "@/contexts/ThemeContext";
 
 interface HeaderProps {
   onCreateInstance: () => void;
@@ -9,6 +10,7 @@ interface HeaderProps {
 
 function Header({ onCreateInstance, onShowSystemInfo }: HeaderProps) {
   const { logout } = useAuth();
+  const { theme, toggleTheme } = useTheme();
 
   const handleLogout = () => {
     if (confirm("Are you sure you want to logout?")) {
@@ -17,10 +19,10 @@ function Header({ onCreateInstance, onShowSystemInfo }: HeaderProps) {
   };
 
   return (
-    <header className="bg-white border-b border-gray-200">
+    <header className="bg-card border-b border-border">
       <div className="container mx-auto max-w-4xl px-4 py-4">
         <div className="flex items-center justify-between">
-          <h1 className="text-2xl font-bold text-gray-900">
+          <h1 className="text-2xl font-bold text-foreground">
             Llamactl Dashboard
           </h1>
 
@@ -29,6 +31,16 @@ function Header({ onCreateInstance, onShowSystemInfo }: HeaderProps) {
               Create Instance
             </Button>
 
+            <Button
+              variant="outline"
+              size="icon"
+              onClick={toggleTheme}
+              data-testid="theme-toggle-button"
+              title={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
+            >
+              {theme === 'light' ? <Moon className="h-4 w-4" /> : <Sun className="h-4 w-4" />}
+            </Button>
+
             <Button
               variant="outline"
               size="icon"

webui/src/components/InstanceList.tsx

@@ -18,8 +18,8 @@ function InstanceList({ editInstance }: InstanceListProps) {
     return (
       <div className="flex items-center justify-center py-12" aria-label="Loading">
         <div className="text-center">
-          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-4"></div>
-          <p className="text-gray-600">Loading instances...</p>
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
+          <p className="text-muted-foreground">Loading instances...</p>
         </div>
       </div>
     )
@@ -28,7 +28,7 @@ function InstanceList({ editInstance }: InstanceListProps) {
   if (error) {
     return (
       <div className="text-center py-12">
-        <div className="text-red-600 mb-4">
+        <div className="text-destructive mb-4">
           <p className="text-lg font-semibold">Error loading instances</p>
           <p className="text-sm">{error}</p>
         </div>
@@ -39,15 +39,15 @@ function InstanceList({ editInstance }: InstanceListProps) {
   if (instances.length === 0) {
     return (
       <div className="text-center py-12">
-        <p className="text-gray-600 text-lg mb-2">No instances found</p>
-        <p className="text-gray-500 text-sm">Create your first instance to get started</p>
+        <p className="text-foreground text-lg mb-2">No instances found</p>
+        <p className="text-muted-foreground text-sm">Create your first instance to get started</p>
       </div>
     )
   }
 
   return (
     <div className="space-y-4">
-      <h2 className="text-xl font-semibold text-gray-900 mb-6">
+      <h2 className="text-xl font-semibold text-foreground mb-6">
         Instances ({instances.length})
       </h2>