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".

2025-08-13 21:11:52 -06:00
parent 3b843ea207
commit 6043fa9a97
8 changed files with 79 additions and 12 deletions
@@ -0,0 +1,2 @@
+
+
@@ -0,0 +1,36 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { useEffect, useState } from "react"
+
+export function ThemeLogo() {
+  const { theme } = useTheme()
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!mounted) {
+    // Return light theme logo by default to avoid hydration mismatch
+    return (
+      <img
+        src="/firecrawl-logo-with-fire.webp"
+        alt="Firecrawl"
+        className="h-8 w-auto"
+      />
+    )
+  }
+
+  const logoSrc = theme === "dark" 
+    ? "/firecrawl-logo-with-fire-dark.webp" 
+    : "/firecrawl-logo-with-fire.webp"
+
+  return (
+    <img
+      src={logoSrc}
+      alt="Firecrawl"
+      className="h-8 w-auto"
+    />
+  )
+}
@@ -0,0 +1,9 @@
+"use client"
+
+import * as React from "react"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+import { type ThemeProviderProps } from "next-themes/dist/types"
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
+import { ThemeProvider } from "@/app/components/theme-provider";

 const inter = Inter({ subsets: ["latin"] });

@@ -15,9 +16,16 @@ export default function RootLayout({
  children: React.ReactNode;
 }>) {
  return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
      <body className={inter.className}>
-        {children}
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="light"
+          enableSystem
+          disableTransitionOnChange
+        >
+          {children}
+        </ThemeProvider>
      </body>
    </html>
  );
@@ -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 */}