From 3127f3e5d0237ce816b1e5cc391b8d1b1afaa7f7 Mon Sep 17 00:00:00 2001 From: omolobamoyinoluwa-max Date: Fri, 24 Apr 2026 08:07:58 +0100 Subject: [PATCH] Implement light mode design with enhanced theme switching - Update ThemeProvider configuration to enable system theme detection - Enhance ThemeToggle component with dropdown menu and system option - Add theme toggle to mobile navbar for better accessibility - Improve light/dark mode switching animations and transitions - Ensure all components use semantic color tokens for optimal theming - Add support for light, dark, and system theme preferences Resolves: Implement light mode design issue --- app/layout.tsx | 3 ++- components/navbar.tsx | 3 +++ components/ui/ThemeToggle.tsx | 40 ++++++++++++++++++++++++++++------- 3 files changed, 37 insertions(+), 9 deletions(-) diff --git a/app/layout.tsx b/app/layout.tsx index 7c9ceeb..78224a0 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -37,7 +37,8 @@ export default function RootLayout({ {children} diff --git a/components/navbar.tsx b/components/navbar.tsx index e9ba224..54ec162 100644 --- a/components/navbar.tsx +++ b/components/navbar.tsx @@ -102,6 +102,9 @@ export function Navbar() { Testimonials
+
+ +
{address ? ( + + + + + + setTheme("light")}> + + Light + + setTheme("dark")}> + + Dark + + setTheme("system")}> + + System + + + ); }