diff --git a/app/components/theme-debug.tsx b/app/components/theme-debug.tsx new file mode 100644 index 0000000..139597f --- /dev/null +++ b/app/components/theme-debug.tsx @@ -0,0 +1,2 @@ + + diff --git a/app/components/theme-logo.tsx b/app/components/theme-logo.tsx new file mode 100644 index 0000000..6c5898d --- /dev/null +++ b/app/components/theme-logo.tsx @@ -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 ( + Firecrawl + ) + } + + const logoSrc = theme === "dark" + ? "/firecrawl-logo-with-fire-dark.webp" + : "/firecrawl-logo-with-fire.webp" + + return ( + Firecrawl + ) +} diff --git a/app/components/theme-provider.tsx b/app/components/theme-provider.tsx new file mode 100644 index 0000000..8c90fbc --- /dev/null +++ b/app/components/theme-provider.tsx @@ -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 {children} +} diff --git a/app/layout.tsx b/app/layout.tsx index 8c11a46..7cd0cd3 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -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 ( - + - {children} + + {children} + ); diff --git a/app/page.tsx b/app/page.tsx index 43b01d5..e7477d1 100644 --- a/app/page.tsx +++ b/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 (
+ {/* Theme Toggle */} + + {/* Home Screen Overlay */} {showHomeScreen && (
@@ -2772,11 +2777,7 @@ Focus on the key sections and content, making it clean and modern.`; {/* Header */}
- Firecrawl +
- Firecrawl +
{/* Model Selector - Left side */} diff --git a/package.json b/package.json index fa30377..d2b5332 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index fe23553..598531e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -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 diff --git a/public/firecrawl-logo-with-fire-dark.webp b/public/firecrawl-logo-with-fire-dark.webp new file mode 100644 index 0000000..8111c79 Binary files /dev/null and b/public/firecrawl-logo-with-fire-dark.webp differ