feat: Add theme switching

src/App.tsx

@@ -3,6 +3,7 @@ import { Toaster as Sonner } from "@/components/ui/sonner";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { ThemeProvider } from "next-themes";
 import Index from "./pages/Index";
 import NotFound from "./pages/NotFound";
 
@@ -10,6 +11,7 @@ const queryClient = new QueryClient();
 
 const App = () => (
   <QueryClientProvider client={queryClient}>
+    <ThemeProvider attribute="class" defaultTheme="dark" enableSystem={false}>
       <TooltipProvider>
         <Toaster />
         <Sonner />
@@ -21,6 +23,7 @@ const App = () => (
           </Routes>
         </BrowserRouter>
       </TooltipProvider>
+    </ThemeProvider>
   </QueryClientProvider>
 );
 

src/components/Layout.tsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 import { MessageSquare, Image, Mic, Settings, Plus, ChevronLeft, ChevronRight } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
+import { ThemeToggle } from "@/components/ThemeToggle";
 
 interface LayoutProps {
   children: React.ReactNode;
@@ -73,8 +74,12 @@ export const Layout = ({ children, activeTab, onTabChange }: LayoutProps) => {
 
         <Separator className="bg-sidebar-border" />
 
-        {/* Settings */}
-        <div className="p-4 border-t border-sidebar-border">
+        {/* Settings & Theme */}
+        <div className="p-4 border-t border-sidebar-border space-y-2">
+          <div className="flex items-center justify-between px-3">
+            <span className="text-sm font-medium text-sidebar-foreground">Tema</span>
+            <ThemeToggle />
+          </div>
           <Button variant="ghost" className="w-full justify-start gap-2 text-sidebar-foreground">
             <Settings className="w-4 h-4" />
             Configurações
@@ -132,8 +137,9 @@ export const Layout = ({ children, activeTab, onTabChange }: LayoutProps) => {
 
           <Separator className="bg-sidebar-border" />
 
-          {/* Settings Icon */}
-          <div className="p-3 border-t border-sidebar-border">
+          {/* Theme & Settings Icons */}
+          <div className="p-3 border-t border-sidebar-border space-y-2">
+            <ThemeToggle />
             <Button 
               variant="ghost" 
               size="icon" 

src/components/ThemeToggle.tsx

@@ -0,0 +1,38 @@
+import { Moon, Sun } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+
+export const ThemeToggle = () => {
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  // Avoid hydration mismatch
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return (
+      <Button variant="ghost" size="icon" className="w-8 h-8">
+        <div className="w-4 h-4" />
+      </Button>
+    );
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+      className="w-8 h-8 text-muted-foreground hover:text-foreground transition-colors"
+      title={theme === "dark" ? "Alternar para tema claro" : "Alternar para tema escuro"}
+    >
+      {theme === "dark" ? (
+        <Sun className="w-4 h-4" />
+      ) : (
+        <Moon className="w-4 h-4" />
+      )}
+    </Button>
+  );
+};

src/index.css

@@ -6,7 +6,60 @@
 
 @layer base {
   :root {
-    /* HGTX Codex - Cyberpunk Dark Theme */
+    /* HGTX Codex - Light Theme */
+    --background: 210 40% 98%;
+    --foreground: 222 47% 11%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222 47% 11%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222 47% 11%;
+
+    --primary: 190 100% 45%;
+    --primary-foreground: 0 0% 100%;
+
+    --secondary: 210 100% 45%;
+    --secondary-foreground: 0 0% 100%;
+
+    --muted: 210 40% 96%;
+    --muted-foreground: 215 16% 47%;
+
+    --accent: 190 100% 50%;
+    --accent-foreground: 0 0% 100%;
+
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 0 0% 100%;
+
+    --border: 214 32% 91%;
+    --input: 214 32% 91%;
+    --ring: 190 100% 45%;
+
+    --radius: 0.75rem;
+
+    /* Sidebar specific - Light */
+    --sidebar-background: 210 40% 99%;
+    --sidebar-foreground: 222 47% 11%;
+    --sidebar-primary: 190 100% 45%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 210 40% 95%;
+    --sidebar-accent-foreground: 222 47% 11%;
+    --sidebar-border: 214 32% 88%;
+    --sidebar-ring: 190 100% 45%;
+
+    /* Custom gradients - Light */
+    --gradient-cyber: linear-gradient(135deg, hsl(190 100% 45%) 0%, hsl(210 100% 45%) 100%);
+    --gradient-subtle: linear-gradient(180deg, hsl(210 40% 98%) 0%, hsl(210 40% 95%) 100%);
+    --glow-cyan: 0 0 40px hsl(190 100% 50% / 0.15);
+    --glow-blue: 0 0 30px hsl(210 100% 50% / 0.12);
+    
+    /* Animation speeds */
+    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  }
+
+  .dark {
+    /* HGTX Codex - Dark Theme */
     --background: 222 47% 5%;
     --foreground: 200 100% 95%;
 
@@ -35,9 +88,7 @@
     --input: 222 30% 18%;
     --ring: 190 100% 50%;
 
-    --radius: 0.75rem;
-
-    /* Sidebar specific */
+    /* Sidebar specific - Dark */
     --sidebar-background: 222 45% 7%;
     --sidebar-foreground: 200 100% 90%;
     --sidebar-primary: 190 100% 50%;
@@ -47,21 +98,17 @@
     --sidebar-border: 222 30% 15%;
     --sidebar-ring: 190 100% 50%;
 
-    /* Custom gradients */
+    /* Custom gradients - Dark */
     --gradient-cyber: linear-gradient(135deg, hsl(190 100% 50%) 0%, hsl(210 100% 50%) 100%);
     --gradient-subtle: linear-gradient(180deg, hsl(222 45% 8%) 0%, hsl(222 47% 5%) 100%);
     --glow-cyan: 0 0 40px hsl(190 100% 50% / 0.3);
     --glow-blue: 0 0 30px hsl(210 100% 50% / 0.25);
-    
-    /* Animation speeds */
-    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
   }
 }
 
 @layer base {
   * {
-    @apply border-border;
+    @apply border-border transition-colors;
   }
 
   body {