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/Controls/Settings/SettingsSubComponents/PartitionKeyComponent.tsx

@@ -1,6 +1,7 @@
 import {
   DefaultButton,
   FontWeights,
+  IMessageBarStyles,
   Link,
   MessageBar,
   MessageBarType,
@@ -32,6 +33,23 @@ export interface PartitionKeyComponentProps {
   isReadOnly?: boolean; // true: cannot change partition key
 }
 
+const darkThemeMessageBarStyles: Partial<IMessageBarStyles> = {
+  root: {
+    selectors: {
+      "&.ms-MessageBar--warning": {
+        backgroundColor: "var(--colorStatusWarningBackground1)",
+        border: "1px solid var(--colorStatusWarningBorder1)",
+      },
+      ".ms-MessageBar-icon": {
+        color: "var(--colorNeutralForeground1)",
+      },
+      ".ms-MessageBar-text": {
+        color: "var(--colorNeutralForeground1)",
+      },
+    },
+  },
+};
+
 export const PartitionKeyComponent: React.FC<PartitionKeyComponentProps> = ({
   database,
   collection,
@@ -66,13 +84,15 @@ export const PartitionKeyComponent: React.FC<PartitionKeyComponentProps> = ({
   const partitionKeyValue = getPartitionKeyValue();
 
   const textHeadingStyle = {
-    root: { fontWeight: FontWeights.semibold, fontSize: 16 },
+    root: { fontWeight: FontWeights.semibold, fontSize: 16, color: "var(--colorNeutralForeground1)" },
   };
 
   const textSubHeadingStyle = {
-    root: { fontWeight: FontWeights.semibold },
+    root: { fontWeight: FontWeights.semibold, color: "var(--colorNeutralForeground1)" },
+  };
+  const textSubHeadingStyle1 = {
+    root: { color: "var(--colorNeutralForeground1)" },
   };
-
   const startPollingforUpdate = (currentJob: DataTransferJobGetResults) => {
     if (isCurrentJobInProgress(currentJob)) {
       const jobName = currentJob?.properties?.jobName;
@@ -168,26 +188,33 @@ export const PartitionKeyComponent: React.FC<PartitionKeyComponentProps> = ({
             <Text styles={textSubHeadingStyle}>Partitioning</Text>
           </Stack>
           <Stack tokens={{ childrenGap: 5 }}>
-            <Text>{partitionKeyValue}</Text>
-            <Text>{isHierarchicalPartitionedContainer() ? "Hierarchical" : "Non-hierarchical"}</Text>
+            <Text styles={textSubHeadingStyle1}>{partitionKeyValue}</Text>
+            <Text styles={textSubHeadingStyle1}>
+              {isHierarchicalPartitionedContainer() ? "Hierarchical" : "Non-hierarchical"}
+            </Text>
           </Stack>
         </Stack>
       </Stack>
 
       {!isReadOnly && (
         <>
-          <MessageBar messageBarType={MessageBarType.warning}>
+          <MessageBar
+            messageBarType={MessageBarType.warning}
+            messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}
+            styles={darkThemeMessageBarStyles}
+          >
             To safeguard the integrity of the data being copied to the new container, ensure that no updates are made to
             the source container for the entire duration of the partition key change process.
             <Link
               href="https://learn.microsoft.com/azure/cosmos-db/container-copy#how-does-container-copy-work"
               target="_blank"
               underline
+              style={{ color: "var(--colorBrandForeground1)" }}
             >
               Learn more
             </Link>
           </MessageBar>
-          <Text>
+          <Text styles={{ root: { color: "var(--colorNeutralForeground1)" } }}>
             To change the partition key, a new destination container must be created or an existing destination
             container selected. Data will then be copied to the destination container.
           </Text>