Dark theme for Explorer (#2185)

* First dark theme commits for command bar

* Updated theme on sidebar

* Updated tabs, sidebar, splash screen

* settings theme changes

* Dark theme applied to Monaco editor

* Dark theme to stored procedures

* Fixed sidebar scroll

* Updated scroll issue in sidebar

* Command bar items fixed

* Fixed lint errors

* fixed lint errors

* settings side panel fixed

* Second last iteration for css

* Fixed all the issues of css

* Updated the theme icon for now on DE to change the theme from portal/DE itself

* Formatting issue resolved

* Remove CloudShellTerminalComponent changes - revert to master version

* Fixed test issue

* Fixed formatting issue

* Fix tests: update snapshots and revert xterm imports for compatibility

* Fix xterm imports in CloudShellTerminalComponent to use @xterm packages

* Fix Cloud Shell component imports for compatibility

* Update test snapshots

* Fix xterm package consistency across all CloudShell components

* Fix TypeScript compilation errors in CloudShell components and query Documents

- Standardized xterm package imports across CloudShell components to use legacy 'xterm' package
- Fixed Terminal type compatibility issues in CommonUtils.tsx
- Added type casting for enableQueryControl property in queryDocuments.ts to handle Azure Cosmos SDK interface limitations
- Applied code formatting to ensure consistency

* Update failing snapshot tests

- Updated TreeNodeComponent snapshot tests for loading states
- Updated ThroughputInputAutoPilotV3Component snapshots for number formatting changes (10,00,000 -> 1,000,000)
- All snapshot tests now pass

* Fixed test issue

* Fixed test issue

* Updated the buttons for theme

* Updated the Theme changes based on portal theme changes

* Updated review comments

* Updated the duplicate code and fixed the fabric react error

* Few places styling added and resolving few comments

* Fixed errors

* Fixed comments

* Fixed comments

* Fixed comments

* Fixed full text policy issue for mongoru accounts

* Resolved comments for class Name and few others

* Added css for homepage in ru accounts

* Final commit with all the feedback issues resolved

* Lint error resolved

* Updated the review comments and few Ui issues

* Resolved review comments and changed header bg and active state color

* Moved svg code to different file and imported

* css fixed for the hpome page boxed for ru account

* Lint errors

* Fixed boxes issue in ru accounts

* Handled the initial theme from the portal

* Updated snap

* Update snapshots for TreeNodeComponent and CreateCopyJobScreensProvider tests

* Fix duplicate DataExplorerRoot test id causing Playwright strict mode violation

* Fix locale-dependent number formatting in ThroughputInputAutoPilotV3Component

---------

Co-authored-by: Sakshi Gupta <sakshig+microsoft@microsoft.com>
Co-authored-by: Sakshi Gupta <sakshig@microsoft.com>

src/Explorer/Panes/__snapshots__/PanelContainerComponent.test.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`PaneContainerComponent test should be resize if notification console is expanded 1`] = `
 <StyledPanelBase
+  className="themed-panel"
   closeButtonAriaLabel="Close test"
   customWidth="440px"
   data-test="Panel:test"
@@ -18,18 +19,42 @@ exports[`PaneContainerComponent test should be resize if notification console is
   }
   styles={
     {
+      "closeButton": {
+        "color": "var(--colorNeutralForeground1)",
+      },
       "commands": {
+        "backgroundColor": "var(--colorNeutralBackground1)",
         "marginTop": 8,
         "paddingTop": 0,
       },
       "content": {
+        "backgroundColor": "var(--colorNeutralBackground1)",
+        "color": "var(--colorNeutralForeground1)",
         "padding": 0,
       },
+      "footerInner": {
+        "backgroundColor": "var(--colorNeutralBackground1)",
+        "color": "var(--colorNeutralForeground1)",
+      },
       "header": {
+        "backgroundColor": "var(--colorNeutralBackground1)",
+        "color": "var(--colorNeutralForeground1)",
         "padding": "0 0 8px 34px",
       },
+      "main": {
+        "backgroundColor": "var(--colorNeutralBackground1)",
+      },
       "navigation": {
-        "borderBottom": "1px solid #cccccc",
+        "backgroundColor": "var(--colorNeutralBackground1)",
+        "borderBottom": "1px solid var(--colorNeutralStroke1)",
+        "color": "var(--colorNeutralForeground1)",
+      },
+      "overlay": {
+        "backgroundColor": "var(--overlayBackground)",
+      },
+      "root": {},
+      "scrollableContent": {
+        "backgroundColor": "var(--colorNeutralBackground1)",
       },
     }
   }
@@ -41,6 +66,7 @@ exports[`PaneContainerComponent test should be resize if notification console is
 
 exports[`PaneContainerComponent test should not render console with panel 1`] = `
 <StyledPanelBase
+  className="themed-panel"
   closeButtonAriaLabel="Close test"
   customWidth="440px"
   data-test="Panel:test"
@@ -57,18 +83,42 @@ exports[`PaneContainerComponent test should not render console with panel 1`] =
   }
   styles={
     {
+      "closeButton": {
+        "color": "var(--colorNeutralForeground1)",
+      },
       "commands": {
+        "backgroundColor": "var(--colorNeutralBackground1)",
         "marginTop": 8,
         "paddingTop": 0,
       },
       "content": {
+        "backgroundColor": "var(--colorNeutralBackground1)",
+        "color": "var(--colorNeutralForeground1)",
         "padding": 0,
       },
+      "footerInner": {
+        "backgroundColor": "var(--colorNeutralBackground1)",
+        "color": "var(--colorNeutralForeground1)",
+      },
       "header": {
+        "backgroundColor": "var(--colorNeutralBackground1)",
+        "color": "var(--colorNeutralForeground1)",
         "padding": "0 0 8px 34px",
       },
+      "main": {
+        "backgroundColor": "var(--colorNeutralBackground1)",
+      },
       "navigation": {
-        "borderBottom": "1px solid #cccccc",
+        "backgroundColor": "var(--colorNeutralBackground1)",
+        "borderBottom": "1px solid var(--colorNeutralStroke1)",
+        "color": "var(--colorNeutralForeground1)",
+      },
+      "overlay": {
+        "backgroundColor": "var(--overlayBackground)",
+      },
+      "root": {},
+      "scrollableContent": {
+        "backgroundColor": "var(--colorNeutralBackground1)",
       },
     }
   }
@@ -82,6 +132,7 @@ exports[`PaneContainerComponent test should render nothing if content is undefin
 
 exports[`PaneContainerComponent test should render with panel content and header 1`] = `
 <StyledPanelBase
+  className="themed-panel"
   closeButtonAriaLabel="Close test"
   customWidth="440px"
   data-test="Panel:test"
@@ -98,18 +149,42 @@ exports[`PaneContainerComponent test should render with panel content and header
   }
   styles={
     {
+      "closeButton": {
+        "color": "var(--colorNeutralForeground1)",
+      },
       "commands": {
+        "backgroundColor": "var(--colorNeutralBackground1)",
         "marginTop": 8,
         "paddingTop": 0,
       },
       "content": {
+        "backgroundColor": "var(--colorNeutralBackground1)",
+        "color": "var(--colorNeutralForeground1)",
         "padding": 0,
       },
+      "footerInner": {
+        "backgroundColor": "var(--colorNeutralBackground1)",
+        "color": "var(--colorNeutralForeground1)",
+      },
       "header": {
+        "backgroundColor": "var(--colorNeutralBackground1)",
+        "color": "var(--colorNeutralForeground1)",
         "padding": "0 0 8px 34px",
       },
+      "main": {
+        "backgroundColor": "var(--colorNeutralBackground1)",
+      },
       "navigation": {
-        "borderBottom": "1px solid #cccccc",
+        "backgroundColor": "var(--colorNeutralBackground1)",
+        "borderBottom": "1px solid var(--colorNeutralStroke1)",
+        "color": "var(--colorNeutralForeground1)",
+      },
+      "overlay": {
+        "backgroundColor": "var(--overlayBackground)",
+      },
+      "root": {},
+      "scrollableContent": {
+        "backgroundColor": "var(--colorNeutralBackground1)",
       },
     }
   }