From bc5babd2f29af9052bd15a3c245e4b368629cfd6 Mon Sep 17 00:00:00 2001 From: AbuJulaybeeb Date: Sat, 25 Apr 2026 11:23:24 +0100 Subject: [PATCH] feat: implement dark/light mode theme toggle with next-themes --- frontend/package.json | 1 + frontend/src/app/layout.tsx | 32 ++++++---- frontend/src/components/layout/Header.tsx | 6 +- frontend/src/components/ui/Button.tsx | 21 ++++--- frontend/src/components/ui/ThemeToggle.tsx | 23 +++++++ frontend/src/components/ui/index.ts | 1 + frontend/src/contexts/ThemeProvider.tsx | 9 +++ frontend/src/styles/globals.css | 71 ++++++++++++---------- 8 files changed, 110 insertions(+), 54 deletions(-) create mode 100644 frontend/src/components/ui/ThemeToggle.tsx create mode 100644 frontend/src/contexts/ThemeProvider.tsx diff --git a/frontend/package.json b/frontend/package.json index 0c991ec..f4f72e2 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -18,6 +18,7 @@ "framer-motion": "^11.0.3", "lucide-react": "^0.330.0", "next": "14.1.0", + "next-themes": "^0.4.4", "@stellar/stellar-sdk": "^11.3.0", "react": "^18", "react-dom": "^18", diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx index 7df5db2..fbece8d 100644 --- a/frontend/src/app/layout.tsx +++ b/frontend/src/app/layout.tsx @@ -6,6 +6,7 @@ import { NotificationProvider } from "../contexts/NotificationContext"; import { SocialProvider } from "../contexts/SocialContext"; import { LiveNotificationToast } from "../components/notifications/LiveNotificationToast"; import { PageTransition } from "../components/layout/PageTransition"; +import { ThemeProvider } from "../contexts/ThemeProvider"; import "../styles/globals.css"; const inter = Inter({ subsets: ["latin"] }); @@ -21,18 +22,25 @@ export default function RootLayout({ children: React.ReactNode; }>) { return ( - - - - -
- - - {children} - -