Agregar soporte para temas en la aplicación, incluyendo un proveedor de temas y un conmutador de temas. Se añadió un nuevo logo que cambia según el tema seleccionado. También se actualizó el archivo package.json para incluir la dependencia "next-themes".

app/page.tsx

@@ -22,6 +22,8 @@ import {
 } from '@/lib/icons';
 import { motion, AnimatePresence } from 'framer-motion';
 import CodeApplicationProgress, { type CodeApplicationState } from '@/components/CodeApplicationProgress';
+import { ThemeToggle } from '@/app/components/theme-toggle';
+import { ThemeLogo } from '@/app/components/theme-logo';
 
 interface SandboxData {
   sandboxId: string;
@@ -2725,6 +2727,9 @@ Focus on the key sections and content, making it clean and modern.`;
 
   return (
     <div className="font-sans bg-background text-foreground h-screen flex flex-col">
+      {/* Theme Toggle */}
+      <ThemeToggle />
+      
       {/* Home Screen Overlay */}
       {showHomeScreen && (
         <div className={`fixed inset-0 z-50 transition-opacity duration-500 ${homeScreenFading ? 'opacity-0' : 'opacity-100'}`}>
@@ -2772,11 +2777,7 @@ Focus on the key sections and content, making it clean and modern.`;
           
           {/* Header */}
           <div className="absolute top-0 left-0 right-0 z-20 px-6 py-4 flex items-center justify-between animate-[fadeIn_0.8s_ease-out]">
-            <img
-              src="/firecrawl-logo-with-fire.webp"
-              alt="Firecrawl"
-              className="h-8 w-auto"
-            />
+            <ThemeLogo />
             <a 
               href="https://github.com/mendableai/open-lovable" 
               target="_blank" 
@@ -2989,11 +2990,7 @@ Focus on the key sections and content, making it clean and modern.`;
       
       <div className="bg-card px-4 py-4 border-b border-border flex items-center justify-between">
         <div className="flex items-center gap-4">
-          <img
-            src="/firecrawl-logo-with-fire.webp"
-            alt="Firecrawl"
-            className="h-8 w-auto"
-          />
+          <ThemeLogo />
         </div>
         <div className="flex items-center gap-2">
           {/* Model Selector - Left side */}