wanwu/deer-flow
1
0
Fork 0
mirror of https://gitee.com/wanwujie/deer-flow synced 2026-04-19 04:14:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add ThemeProviderWrapper for theme management

Browse Source
This commit is contained in:
Shi Tianxin
2025-04-28 11:37:46 +08:00
parent 834d5221ca
commit 6b45e17714
3 changed files with 51 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
web/src/app/_components/theme-provider-wrapper.tsx Normal file
View File

@@ -0,0 +1,29 @@
// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
// SPDX-License-Identifier: MIT
"use client";
import { usePathname } from "next/navigation";
import { ThemeProvider } from "~/components/theme-provider";
export function ThemeProviderWrapper({
children,
}: {
children: React.ReactNode;
}) {
const pathname = usePathname();
const isChatPage = pathname?.startsWith("/chat");
return (
<ThemeProvider
attribute="class"
defaultTheme={"dark"}
enableSystem={isChatPage}
forcedTheme={isChatPage ? undefined : "dark"}
disableTransitionOnChange
>
{children}
</ThemeProvider>
);
}

10
web/src/app/layout.tsx
View File

@@ -6,7 +6,7 @@ import "~/styles/globals.css";
import { type Metadata } from "next"; import { type Metadata } from "next";
import { Geist } from "next/font/google"; import { Geist } from "next/font/google";
import { ThemeProvider } from "~/components/theme-provider"; import { ThemeProviderWrapper } from "~/app/_components/theme-provider-wrapper";
import { TooltipProvider } from "~/components/ui/tooltip"; import { TooltipProvider } from "~/components/ui/tooltip";
export const metadata: Metadata = { export const metadata: Metadata = {
@@ -27,13 +27,9 @@ export default function RootLayout({
return ( return (
<html lang="en" className={`${geist.variable}`} suppressHydrationWarning> <html lang="en" className={`${geist.variable}`} suppressHydrationWarning>
<body className="bg-app h-screen w-screen overscroll-none"> <body className="bg-app h-screen w-screen overscroll-none">
<ThemeProvider <ThemeProviderWrapper>
attribute="class"
defaultTheme="system"
disableTransitionOnChange
>
<TooltipProvider>{children}</TooltipProvider> <TooltipProvider>{children}</TooltipProvider>
</ThemeProvider> </ThemeProviderWrapper>
</body> </body>
</html> </html>
); );

42
web/src/app/page.tsx
View File

@@ -27,13 +27,11 @@ import { BentoGrid } from "~/components/magicui/bento-grid";
import { FlickeringGrid } from "~/components/magicui/flickering-grid"; import { FlickeringGrid } from "~/components/magicui/flickering-grid";
import { Button } from "~/components/ui/button"; import { Button } from "~/components/ui/button";
import { ThemeToggle } from "./_components/theme-toggle";
export default function HomePage() { export default function HomePage() {
return ( return (
<div className="flex w-screen flex-col items-center"> <div className="dark flex flex-col items-center overflow-x-hidden">
<Header /> <Header />
<main className="container flex w-screen flex-col items-center justify-center gap-56"> <main className="container flex flex-col items-center justify-center gap-56">
<Jumbotron /> <Jumbotron />
<CaseStudySection /> <CaseStudySection />
<CoreFeatureSection /> <CoreFeatureSection />
@@ -46,7 +44,7 @@ export default function HomePage() {
function Header() { function Header() {
return ( return (
<header className="supports-backdrop-blur:bg-background/80 bg-background/40 sticky top-0 left-0 z-40 flex h-15 w-screen flex-col items-center backdrop-blur-lg"> <header className="supports-backdrop-blur:bg-background/80 bg-background/40 sticky top-0 left-0 z-40 flex h-15 w-full flex-col items-center backdrop-blur-lg">
<div className="container flex h-15 items-center justify-between"> <div className="container flex h-15 items-center justify-between">
<div className="text-xl font-medium"> <div className="text-xl font-medium">
<span className="mr-1">🦌</span> <span className="mr-1">🦌</span>
@@ -59,7 +57,6 @@ function Header() {
Star on GitHub Star on GitHub
</Link> </Link>
</Button> </Button>
<ThemeToggle />
</div> </div>
</div> </div>
<hr className="from-border/0 via-border/70 to-border/0 m-0 h-px w-full border-none bg-gradient-to-r" /> <hr className="from-border/0 via-border/70 to-border/0 m-0 h-px w-full border-none bg-gradient-to-r" />
@@ -69,7 +66,7 @@ function Header() {
function Footer() { function Footer() {
return ( return (
<footer className="container mt-32 flex w-screen flex-col items-center justify-center"> <footer className="container mt-32 flex flex-col items-center justify-center">
<hr className="from-border/0 via-border/70 to-border/0 m-0 h-px w-full border-none bg-gradient-to-r" /> <hr className="from-border/0 via-border/70 to-border/0 m-0 h-px w-full border-none bg-gradient-to-r" />
<div className="text-muted-foreground container flex h-20 flex-col items-center justify-center text-sm"> <div className="text-muted-foreground container flex h-20 flex-col items-center justify-center text-sm">
<p className="font-serif text-xl"> <p className="font-serif text-xl">
@@ -103,7 +100,7 @@ function SectionHeader({
function Jumbotron() { function Jumbotron() {
return ( return (
<section className="relative flex h-[95vh] w-screen flex-col items-center justify-center pb-15"> <section className="relative flex h-[95vh] flex-col items-center justify-center pb-15">
<FlickeringGrid <FlickeringGrid
id="deer-hero-bg" id="deer-hero-bg"
className={`absolute inset-0 z-0 [mask-image:radial-gradient(800px_circle_at_center,white,transparent)]`} className={`absolute inset-0 z-0 [mask-image:radial-gradient(800px_circle_at_center,white,transparent)]`}
@@ -123,22 +120,18 @@ function Jumbotron() {
flickerChance={0.12} flickerChance={0.12}
/> />
<div className="relative z-10 flex flex-col items-center justify-center gap-12"> <div className="relative z-10 flex flex-col items-center justify-center gap-12">
<h1 className="text-6xl font-bold"> <h1 className="text-center text-6xl font-bold">
<span className="bg-gradient-to-r from-white via-gray-200 to-gray-400 bg-clip-text text-transparent"> <span className="bg-gradient-to-r from-white via-gray-200 to-gray-400 bg-clip-text text-transparent">
Deep Research{" "} Deep Research{" "}
</span> </span>
<AuroraText>at Your Fingertips</AuroraText> <AuroraText>at Your Fingertips</AuroraText>
</h1> </h1>
<p className="text-center text-2xl opacity-75"> <p className="max-w-3xl text-center text-2xl opacity-75">
Discover the revolutionary Multi-Agent Research Assistant that Discover the revolutionary Multi-Agent Research Assistant that
empowers you to dive empowers you to dive deeper and wider into any subject. Equipped with
<br /> the powerful tools like search engines, crawlers, Python, and MCP
deeper and wider into any subject. Equipped with the powerful tools services, DeerFlow provides instant insights, in-depth reports and
like search even captivating podcasts.
<br />
engines, crawlers, Python, and MCP services, DeerFlow provides instant
<br />
insights, in-depth reports and even captivating podcasts.
</p> </p>
<div className="flex gap-6"> <div className="flex gap-6">
<Button className="w-42 text-lg" size="lg" asChild> <Button className="w-42 text-lg" size="lg" asChild>
@@ -219,9 +212,12 @@ function CaseStudySection() {
title="Case Studies" title="Case Studies"
description="See DeerFlow in action through replays." description="See DeerFlow in action through replays."
/> />
<div className="container flex flex-wrap"> <div className="flex w-full flex-wrap">
{caseStudies.map((caseStudy) => ( {caseStudies.map((caseStudy) => (
<div key={caseStudy.title} className="w-[25%] p-2"> <div
key={caseStudy.title}
className="w-full p-2 sm:w-1/2 md:w-1/3 lg:w-[25%]"
>
<BentoCard <BentoCard
{...{ {...{
Icon: caseStudy.icon, Icon: caseStudy.icon,
@@ -322,12 +318,12 @@ const features = [
function CoreFeatureSection() { function CoreFeatureSection() {
return ( return (
<section className="relative container flex flex-col content-around items-center justify-center"> <section className="relative flex w-full flex-col content-around items-center justify-center">
<SectionHeader <SectionHeader
title="Core Features" title="Core Features"
description="Find out what makes DeerFlow effective." description="Find out what makes DeerFlow effective."
/> />
<BentoGrid className="h-[75vh] lg:grid-rows-3"> <BentoGrid className="h-[75vh] w-full lg:grid-rows-3">
{features.map((feature) => ( {features.map((feature) => (
<BentoCard key={feature.name} {...feature} /> <BentoCard key={feature.name} {...feature} />
))} ))}
@@ -338,7 +334,7 @@ function CoreFeatureSection() {
function JoinCommunitySection() { function JoinCommunitySection() {
return ( return (
<section className="container flex flex-col items-center justify-center pb-12"> <section className="flex w-full flex-col items-center justify-center pb-12">
<SectionHeader <SectionHeader
title={ title={
<AuroraText colors={["#60A5FA", "#A5FA60", "#A560FA"]}> <AuroraText colors={["#60A5FA", "#A5FA60", "#A560FA"]}>