From 83c9a27a96139a8ec46c02dc15693a937f07c127 Mon Sep 17 00:00:00 2001
From: suryacp23 <suryacp.com@gmail.com>
Date: Thu, 16 Jul 2026 16:17:10 +0530
Subject: [PATCH] bottom nav theme changed

---
 src/screens/ConsoleLayout.tsx |  8 ++++----
 src/screens/screen.css        | 14 ++++++++++++++
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/screens/ConsoleLayout.tsx b/src/screens/ConsoleLayout.tsx
index bb1ed28..ffa3d79 100644
--- a/src/screens/ConsoleLayout.tsx
+++ b/src/screens/ConsoleLayout.tsx
@@ -66,16 +66,16 @@ export function ConsoleLayout() {
                 <>
                   <span
                     className={cn(
-                      'flex items-center justify-center h-7 w-14 rounded-pill transition-colors duration-150',
-                      isActive ? 'bg-sunrise-100 text-sunrise-600' : 'text-faint',
+                      'flex items-center justify-center h-7 w-14 rounded-pill transition-colors duration-150 bottom-nav-icon',
+                      isActive ? 'active' : 'text-faint',
                     )}
                   >
                     <Icon size={20} />
                   </span>
                   <span
                     className={cn(
-                      'text-2xs leading-none transition-colors duration-150',
-                      isActive ? 'font-semibold text-sunrise-600' : 'font-medium text-faint',
+                      'text-2xs leading-none transition-colors duration-150 bottom-nav-text',
+                      isActive ? 'font-semibold active' : 'font-medium text-faint',
                     )}
                   >
                     {t.label}
diff --git a/src/screens/screen.css b/src/screens/screen.css
index 12a32fd..19a0507 100644
--- a/src/screens/screen.css
+++ b/src/screens/screen.css
@@ -17,4 +17,18 @@
 .sidebar-item.active {
     color: var(--nav-item-active);
     background: var(--nav-item-active-bg);
+}
+
+.bottom-nav-icon,
+.bottom-nav-text {
+    color: var(--text-faint); /* fallback */
+}
+
+.bottom-nav-icon.active {
+    color: var(--nav-item-active);
+    background: var(--nav-item-active-bg);
+}
+
+.bottom-nav-text.active {
+    color: var(--nav-item-active);
 }
\ No newline at end of file