settings side pannel fixed

less/documentDB.less

@@ -1740,7 +1740,7 @@ input::-webkit-calendar-picker-indicator {
   flex: 1;
   padding-left: 34px;
   padding-right: 34px;
-  color: @BaseDark;
+  color: var(--colorNeutralForeground1);
   overflow-y: auto;
   overflow-x: auto;
   margin: (2 * @MediumSpace) 0px;
@@ -1749,7 +1749,7 @@ input::-webkit-calendar-picker-indicator {
 .contextual-pane .panelMainContent {
   padding-left: 34px;
   padding-right: 34px;
-  color: @BaseDark;
+  // color: @BaseDark;
   margin: (2 * @MediumSpace) 0px;
 }
 

less/hostedexplorer.less

@@ -255,7 +255,7 @@ body {
                 flex: 1;
                 padding-left: 34px;
                 padding-right: 34px;
-                color: @BaseDark;
+                color: var(--colorNeutralForeground1);
                 overflow-y: auto;
                 overflow-x: hidden;
                 margin: (2 * @MediumSpace) 0px;

src/Explorer/Panes/PanelComponent.less

@@ -4,9 +4,8 @@
   display: flex;
   flex-direction: column;
   min-height: 100%;
-  background-color: var(--colorNeutralBackground1, @BaseLight);
+  color: var(--colorNeutralForeground2);
-  color: var(--colorNeutralForeground1, @BaseHigh);
+  background-color: var(--colorNeutralBackground1);
-
   .panelMainContent {
     flex-grow: 1;
     padding: 0 34px;
@@ -27,19 +26,19 @@
       margin: auto 0 auto @SmallSpace;
       cursor: default;
       vertical-align: middle;
-      color: var(--colorNeutralForeground1, @BaseHigh);
+      color: var(--colorNeutralForeground1);
     }
 
     .panelTextBold {
       font-weight: 600;
       line-height: 20px;
-      color: var(--colorNeutralForeground1, @BaseHigh);
+      color: var(--colorNeutralForeground1);
     }
 
     .panelTextField {
       font-size: @mediumFontSize;
       border: 1px solid var(--colorNeutralStroke1, #605e5c);
-      color: var(--colorNeutralForeground1, @BaseHigh);
+      color: var(--colorNeutralForeground1);
       background-color: var(--colorNeutralBackground2, @BaseLight);
       padding: 4px 10px;
       width: @newCollectionPaneInputWidth;
@@ -270,5 +269,31 @@
 }
 
 .panelSeparator::before {
-  background-color: #edebe9;
+  background-color: var(--colorNeutralStroke1);
+}
+
+.dark-theme-panel {
+  &.ms-Panel {
+    .ms-Panel-main {
+      background-color: var(--colorNeutralBackground1);
+    }
+    
+    .ms-Panel-overlay {
+      background-color: var(--overlayBackground);
+    }
+    
+    .ms-Panel-content {
+      background-color: var(--colorNeutralBackground1);
+    }
+  }
+}
+
+:global {
+  .ms-Panel-root {
+    background-color: transparent;
+  }
+
+  .ms-Panel-overlay {
+    background-color: var(--overlayBackground);
+  }
 }

src/Explorer/Panes/PanelContainerComponent.tsx

@@ -62,13 +62,48 @@ export class PanelContainerComponent extends React.Component<PanelContainerProps
         closeButtonAriaLabel={`Close ${this.props.headerText}`}
         customWidth={this.props.panelWidth ? this.props.panelWidth : "440px"}
         headerClassName="panelHeader"
+        className="dark-theme-panel"
         onRenderNavigationContent={this.props.onRenderNavigationContent}
         isFooterAtBottom={true}
         styles={{
-          navigation: { borderBottom: "1px solid #cccccc" },
+          navigation: { 
-          content: { padding: 0 },
+            borderBottom: "1px solid var(--colorNeutralStroke1)",
-          header: { padding: "0 0 8px 34px" },
+            backgroundColor: "var(--colorNeutralBackground1)",
-          commands: { marginTop: 8, paddingTop: 0 },
+            color: "var(--colorNeutralForeground1)"
+          },
+          content: { 
+            padding: 0,
+            backgroundColor: "var(--colorNeutralBackground1)",
+            color: "var(--colorNeutralForeground1)"
+          },
+          header: { 
+            padding: "0 0 8px 34px",
+            backgroundColor: "var(--colorNeutralBackground1)",
+            color: "var(--colorNeutralForeground1)"
+          },
+          commands: { 
+            marginTop: 8, 
+            paddingTop: 0,
+            backgroundColor: "var(--colorNeutralBackground1)"
+          },
+          root: {
+          },
+          overlay: {
+            backgroundColor: "var(--overlayBackground)"
+          },
+          main: {
+            backgroundColor: "var(--colorNeutralBackground1)"
+          },
+          scrollableContent: {
+            backgroundColor: "var(--colorNeutralBackground1)"
+          },
+          footerInner: {
+            backgroundColor: "var(--colorNeutralBackground1)",
+            color: "var(--colorNeutralForeground1)"
+          },
+          closeButton: {
+            color: "var(--colorNeutralForeground1)"
+          }
         }}
         style={{ height: this.state.height }}
       >

src/Main.tsx

@@ -64,6 +64,7 @@ import "./Shared/appInsights";
 import { useConfig } from "./hooks/useConfig";
 import { useKnockoutExplorer } from "./hooks/useKnockoutExplorer";
 import { isDarkMode } from "./hooks/useTheme";
+import "./less/ThemeSystem.less";
 // Initialize icons before React is loaded
 initializeIcons(undefined, { disableWarnings: true });
 

src/less/ThemeSystem.less

@@ -1,7 +1,4 @@
-@import "Common/Constants";
+@import "../../less/Common/Constants";
-
-// Theme System
-// Define CSS Custom Properties
 :root {
   // Light theme variables
   --colorNeutralBackground1: @BaseLight;
@@ -14,6 +11,7 @@
   --colorCompoundBrandStroke1: @SelectionColor;
   --colorBrandForeground1: @LinkColor;
   --colorPaletteRedForeground1: @ErrorColor;
+  --overlayBackground: rgba(0, 0, 0, 0.4);
 }
 
 // Dark theme variables
@@ -28,6 +26,7 @@ body.isDarkMode {
   --colorCompoundBrandStroke1: #4db6e8;
   --colorBrandForeground1: #4db6e8;
   --colorPaletteRedForeground1: #f25d5d;
+  --overlayBackground: rgba(0, 0, 0, 0.4);
 }
 
 // Theme Mixins
@@ -61,7 +60,6 @@ body.isDarkMode {
   }
 }
 
-// Global Fluent UI input overrides
 :global {
   .ms-TextField {
     .ms-TextField-fieldGroup {
@@ -72,13 +70,11 @@ body.isDarkMode {
   }
 }
 
-// Common component theme mixins
 .theme-panel() {
   .theme-background();
   .theme-border();
 }
 
-// Override Fluent UI focus states
 :global {
   .ms-Fabric--isFocusVisible .ms-Button:focus::after,
   .ms-Fabric--isFocusVisible .ms-TextField:focus::after,