From 6274553a575ab47e352f47c88f439a605d5a207c Mon Sep 17 00:00:00 2001
From: Tushar <80577646+TusharThakur04@users.noreply.github.com>
Date: Sat, 28 Mar 2026 23:51:52 +0530
Subject: [PATCH] fix: resolve dark theme for mobile-sidebar

---
 .../SidebarMobile/SidebarMobile.jsx           |  9 +++++----
 src/styles/dark.scss                          | 20 -------------------
 2 files changed, 5 insertions(+), 24 deletions(-)

diff --git a/src/components/SidebarMobile/SidebarMobile.jsx b/src/components/SidebarMobile/SidebarMobile.jsx
index ce5869a7173c..dd9077fe09c4 100644
--- a/src/components/SidebarMobile/SidebarMobile.jsx
+++ b/src/components/SidebarMobile/SidebarMobile.jsx
@@ -45,7 +45,7 @@ export default class SidebarMobile extends Component {
           onTouchEnd={this._handleTouchEnd}
         />
 
-        <div className="relative w-[285px] h-screen overflow-x-hidden py-1 bg-white shadow-[0_0_15px_rgba(0,0,0,0.2)]">
+        <div className="relative w-[285px] h-screen overflow-x-hidden py-1 bg-white dark:bg-[#121212] shadow-[0_0_15px_rgba(0,0,0,0.2)]">
           <button
             className="sidebar-mobile__close absolute cursor-pointer border-none right-[22px] top-[10px] text-[1.3em] bg-[#175d96] text-white w-[30px] h-[30px] flex items-center justify-center rounded-full transition-colors duration-150 [-webkit-tap-highlight-color:transparent] hover:bg-[#135d96]"
             onClick={toggle.bind(null, false)}
@@ -93,7 +93,8 @@ export default class SidebarMobile extends Component {
             className={clsx(
               "uppercase pt-[0.75em] px-4 pb-[0.25em] font-semibold block text-[1.1rem]",
               active ? "text-[#465E69]" : "text-[#2B3A42]",
-              index > 0 && "border-t border-gray-200",
+              index > 0 && "border-t border-gray-200 dark:border-[#343434]",
+              "dark:text-[#cadbe6]",
             )}
             key={section.url}
             to={section.url}
@@ -131,8 +132,8 @@ export default class SidebarMobile extends Component {
           className={clsx(
             "block py-[0.5em] px-[17px] capitalize [-webkit-tap-highlight-color:transparent] ml-[20px]",
             active
-              ? "text-gray-900 font-semibold bg-[#f1f4f4]"
-              : "text-gray-600 hover:text-gray-600 active:text-gray-900 active:font-semibold active:bg-[#f1f4f4]",
+              ? "text-gray-900 font-semibold bg-[#f1f4f4] dark:text-white dark:bg-[#222424]"
+              : "text-gray-600 dark:text-[#a3a3a3] hover:text-gray-600 active:text-gray-900 active:font-semibold active:bg-[#f1f4f4] dark:active:bg-[#222424] dark:active:text-white",
           )}
           to={url}
           onClick={this.props.toggle.bind(null, false)}
diff --git a/src/styles/dark.scss b/src/styles/dark.scss
index 63ec251e2a54..cad11536d3a7 100644
--- a/src/styles/dark.scss
+++ b/src/styles/dark.scss
@@ -127,26 +127,6 @@
     }
   }
 
-  // Mobile
-  .sidebar-mobile__content {
-    background-color: #121212;
-  }
-  .sidebar-mobile__section-header {
-    color: #cadbe6;
-  }
-  .sidebar-mobile__page {
-    color: #a3a3a3;
-  }
-  .sidebar-mobile__page--active,
-  .sidebar-mobile__page:active {
-    background-color: #222424;
-  }
-  .sidebar-mobile__content
-    div:not(:first-of-type)
-    .sidebar-mobile__section-header {
-    border-color: #343434;
-  }
-
   .footer-openjsf-logo {
     filter: invert(1);
   }