From d14b97f8ea7a6d3de1f01b46d643225063719e33 Mon Sep 17 00:00:00 2001
From: Debjit Chauhan <DebjitChauhan5@gmail.com>
Date: Sun, 9 Aug 2026 22:47:08 +0530
Subject: [PATCH] fix(navigation): apply theme-consistent scrollbar styling to
 mobile dropdown

Fixes #7904

The .mobile-dropdown scrollbar was using hardcoded gray values
(#cbced1 track, #868e96 thumb) instead of the theme variables
used by the global page scrollbar in app.style.js.

Replace with props.theme.scrollbarColor for the thumb and
props.theme.body for the track, and add the Firefox
scrollbar-color property for cross-browser consistency.

Signed-off-by: Debjit Chauhan <DebjitChauhan5@gmail.com>
---
 src/sections/General/Navigation/navigation.style.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/sections/General/Navigation/navigation.style.js b/src/sections/General/Navigation/navigation.style.js
index 40b82a8beb6348..056436c08b8acb 100644
--- a/src/sections/General/Navigation/navigation.style.js
+++ b/src/sections/General/Navigation/navigation.style.js
@@ -555,6 +555,7 @@ const NavigationWrap = styled.header`
       max-height: 400px;
       overflow-y: scroll;
       scrollbar-width: thin;
+      scrollbar-color: ${(props) => props.theme.scrollbarColor} ${(props) => props.theme.body};
       transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
     }
     .mobile-dropdown::-webkit-scrollbar {
@@ -562,11 +563,11 @@ const NavigationWrap = styled.header`
       width: 6px;
     }
     .mobile-dropdown::-webkit-scrollbar-track {
-      background-color: #cbced1;
+      background-color: ${(props) => props.theme.body};
       border-radius: 3px;
     }
     .mobile-dropdown::-webkit-scrollbar-thumb {
-      background-color: #868e96;
+      background-color: ${(props) => props.theme.scrollbarColor};
       border-radius: 3px;
     }
     .expand {