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 */}
@@ -35,6 +35,7 @@
    "groq-sdk": "^0.29.0",
    "lucide-react": "^0.532.0",
    "next": "15.4.3",
+    "next-themes": "^0.4.6",
    "react": "19.1.0",
    "react-dom": "19.1.0",
    "react-icons": "^5.5.0",
@@ -71,6 +71,9 @@ importers:
      next:
        specifier: 15.4.3
        version: 15.4.3(@opentelemetry/api@1.9.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      next-themes:
+        specifier: ^0.4.6
+        version: 0.4.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
      react:
        specifier: 19.1.0
        version: 19.1.0
@@ -1941,6 +1944,12 @@ packages:
    resolution: {integrity: sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==}
    engines: {node: '>= 0.6'}

+  next-themes@0.4.6:
+    resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
+    peerDependencies:
+      react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+
  next@15.4.3:
    resolution: {integrity: sha512-uW7Qe6poVasNIE1X382nI29oxSdFJzjQzTgJFLD43MxyPfGKKxCMySllhBpvqr48f58Om+tLMivzRwBpXEytvA==}
    engines: {node: ^18.18.0 || ^19.8.0 || >= 20.0.0}
@@ -4421,6 +4430,11 @@ snapshots:

  negotiator@1.0.0: {}

+  next-themes@0.4.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
+    dependencies:
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+
  next@15.4.3(@opentelemetry/api@1.9.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
    dependencies:
      '@next/env': 15.4.3