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/Theme/ThemeUtil.tsx

@@ -4,16 +4,19 @@ import {
   FluentProvider,
   FluentProviderSlots,
   Theme,
+  createDarkTheme,
   createLightTheme,
   makeStyles,
   mergeClasses,
   shorthands,
   themeToTokensObject,
+  webDarkTheme,
   webLightTheme,
 } from "@fluentui/react-components";
 import { Platform, configContext } from "ConfigContext";
 import React from "react";
 import { appThemeFabricTealBrandRamp } from "../../Platform/Fabric/FabricTheme";
+import { useTheme } from "../../hooks/useTheme";
 
 export const LayoutConstants = {
   rowHeight: 32,
@@ -47,6 +50,7 @@ export const CosmosFluentProvider: React.FC<CosmosFluentProviderProps> = ({ chil
   // As we convert components to Fluent UI 9, if we end up with nested FluentProviders, the inner FluentProvider will be a no-op.
   const { isInFluentProvider } = React.useContext(FluentProviderContext);
   const styles = useDefaultRootStyles();
+  const { isDarkMode } = useTheme();
 
   if (isInFluentProvider) {
     // We're already in a fluent context, don't create another.
@@ -61,7 +65,7 @@ export const CosmosFluentProvider: React.FC<CosmosFluentProviderProps> = ({ chil
   return (
     <FluentProviderContext.Provider value={{ isInFluentProvider: true }}>
       <FluentProvider
-        theme={getPlatformTheme(configContext.platform)}
+        theme={getPlatformTheme(configContext.platform, isDarkMode)}
         className={mergeClasses(styles.fluentProvider, className)}
         {...props}
       >
@@ -114,7 +118,16 @@ const cosmosTheme = {
   sidebarInitialWidth: "300px",
 };
 
-export const tokens = themeToTokensObject({ ...webLightTheme, ...cosmosTheme, ...sizeMappings[LayoutSize.Compact] });
+// Get the current theme tokens based on the root theme
+export const getThemeTokens = (isDarkMode: boolean) =>
+  themeToTokensObject({
+    ...(isDarkMode ? webDarkTheme : webLightTheme),
+    ...cosmosTheme,
+    ...sizeMappings[LayoutSize.Compact],
+  });
+
+// Initialize with light theme, will be updated by the provider
+export const tokens = getThemeTokens(false);
 
 export const cosmosShorthands = {
   border: () => shorthands.border("1px", "solid", tokens.colorNeutralStroke2),
@@ -124,11 +137,10 @@ export const cosmosShorthands = {
   borderLeft: () => shorthands.borderLeft("1px", "solid", tokens.colorNeutralStroke2),
 };
 
-export function getPlatformTheme(platform: Platform): CosmosTheme {
+export function getPlatformTheme(platform: Platform, isDarkMode: boolean = false): CosmosTheme {
+  const createTheme = isDarkMode ? createDarkTheme : createLightTheme;
   const baseTheme =
-    platform === Platform.Fabric
-      ? createLightTheme(appThemeFabricTealBrandRamp)
-      : createLightTheme(appThemePortalBrandRamp);
+    platform === Platform.Fabric ? createTheme(appThemeFabricTealBrandRamp) : createTheme(appThemePortalBrandRamp);
 
   return {
     ...baseTheme,