haitham/open-lovable
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
ZLostTK
2025-08-13 21:11:52 -06:00
parent 3b843ea207
commit 6043fa9a97
8 changed files with 79 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/theme-debug.tsx
+2
View File
@@ -0,0 +1,2 @@
app/components/theme-logo.tsx
+36
View File
@@ -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"
/>
)
}
app/components/theme-provider.tsx
+9
View File
@@ -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>
}
app/layout.tsx
+10 -2
View File
@@ -1,6 +1,7 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Inter } from "next/font/google"; import { Inter } from "next/font/google";
import "./globals.css"; import "./globals.css";
import { ThemeProvider } from "@/app/components/theme-provider";
const inter = Inter({ subsets: ["latin"] }); const inter = Inter({ subsets: ["latin"] });
@@ -15,9 +16,16 @@ export default function RootLayout({
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
return ( return (
<html lang="en"> <html lang="en" suppressHydrationWarning>
<body className={inter.className}> <body className={inter.className}>
{children} <ThemeProvider
attribute="class"
defaultTheme="light"
enableSystem
disableTransitionOnChange
>
{children}
</ThemeProvider>
</body> </body>
</html> </html>
); );
app/page.tsx
+7 -10
View File
@@ -22,6 +22,8 @@ import {
} from '@/lib/icons'; } from '@/lib/icons';
import { motion, AnimatePresence } from 'framer-motion'; import { motion, AnimatePresence } from 'framer-motion';
import CodeApplicationProgress, { type CodeApplicationState } from '@/components/CodeApplicationProgress'; import CodeApplicationProgress, { type CodeApplicationState } from '@/components/CodeApplicationProgress';
import { ThemeToggle } from '@/app/components/theme-toggle';
import { ThemeLogo } from '@/app/components/theme-logo';
interface SandboxData { interface SandboxData {
sandboxId: string; sandboxId: string;
@@ -2725,6 +2727,9 @@ Focus on the key sections and content, making it clean and modern.`;
return ( return (
<div className="font-sans bg-background text-foreground h-screen flex flex-col"> <div className="font-sans bg-background text-foreground h-screen flex flex-col">
{/* Theme Toggle */}
<ThemeToggle />
{/* Home Screen Overlay */} {/* Home Screen Overlay */}
{showHomeScreen && ( {showHomeScreen && (
<div className={`fixed inset-0 z-50 transition-opacity duration-500 ${homeScreenFading ? 'opacity-0' : 'opacity-100'}`}> <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 */} {/* 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]"> <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 <ThemeLogo />
src="/firecrawl-logo-with-fire.webp"
alt="Firecrawl"
className="h-8 w-auto"
/>
<a <a
href="https://github.com/mendableai/open-lovable" href="https://github.com/mendableai/open-lovable"
target="_blank" 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="bg-card px-4 py-4 border-b border-border flex items-center justify-between">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<img <ThemeLogo />
src="/firecrawl-logo-with-fire.webp"
alt="Firecrawl"
className="h-8 w-auto"
/>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{/* Model Selector - Left side */} {/* Model Selector - Left side */}
package.json
+1
View File
@@ -35,6 +35,7 @@
"groq-sdk": "^0.29.0", "groq-sdk": "^0.29.0",
"lucide-react": "^0.532.0", "lucide-react": "^0.532.0",
"next": "15.4.3", "next": "15.4.3",
"next-themes": "^0.4.6",
"react": "19.1.0", "react": "19.1.0",
"react-dom": "19.1.0", "react-dom": "19.1.0",
"react-icons": "^5.5.0", "react-icons": "^5.5.0",
pnpm-lock.yaml
Generated
+14
View File
@@ -71,6 +71,9 @@ importers:
next: next:
specifier: 15.4.3 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) 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: react:
specifier: 19.1.0 specifier: 19.1.0
version: 19.1.0 version: 19.1.0
@@ -1941,6 +1944,12 @@ packages:
resolution: {integrity: sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==} resolution: {integrity: sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==}
engines: {node: '>= 0.6'} 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: next@15.4.3:
resolution: {integrity: sha512-uW7Qe6poVasNIE1X382nI29oxSdFJzjQzTgJFLD43MxyPfGKKxCMySllhBpvqr48f58Om+tLMivzRwBpXEytvA==} resolution: {integrity: sha512-uW7Qe6poVasNIE1X382nI29oxSdFJzjQzTgJFLD43MxyPfGKKxCMySllhBpvqr48f58Om+tLMivzRwBpXEytvA==}
engines: {node: ^18.18.0 || ^19.8.0 || >= 20.0.0} engines: {node: ^18.18.0 || ^19.8.0 || >= 20.0.0}
@@ -4421,6 +4430,11 @@ snapshots:
negotiator@1.0.0: {} 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): next@15.4.3(@opentelemetry/api@1.9.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
dependencies: dependencies:
'@next/env': 15.4.3 '@next/env': 15.4.3
public/firecrawl-logo-with-fire-dark.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 77 KiB