Fix formatting in Utils.test.ts

less/documentDB.less

@@ -406,7 +406,11 @@ body {
   width: 440px;
   min-height: 565px;
 }
-
+.dataExplorerLoaderforcopyJobs{
+   width: 100%;
+   min-height: 565px;
+   right: 0;
+}
 .dataExplorerTabLoaderContainer {
   left: initial;
   top: initial;

src/Common/LoadingOverlay.tsx

@@ -1,4 +1,5 @@
 import { Overlay, Spinner, SpinnerSize } from "@fluentui/react";
+import { useThemeStore } from "hooks/useTheme";
 import React from "react";
 
 interface LoadingOverlayProps {
@@ -7,6 +8,7 @@ interface LoadingOverlayProps {
 }
 
 const LoadingOverlay: React.FC<LoadingOverlayProps> = ({ isLoading, label }) => {
+  const isDarkMode = useThemeStore((state) => state.isDarkMode);
   if (!isLoading) {
     return null;
   }
@@ -15,7 +17,7 @@ const LoadingOverlay: React.FC<LoadingOverlayProps> = ({ isLoading, label }) =>
     <Overlay
       styles={{
         root: {
-          backgroundColor: "rgba(255,255,255,0.9)",
+          backgroundColor: isDarkMode ? "rgba(32, 31, 30, 0.9)" : "rgba(255,255,255,0.9)",
           zIndex: 9999,
           display: "flex",
           alignItems: "center",
@@ -23,7 +25,11 @@ const LoadingOverlay: React.FC<LoadingOverlayProps> = ({ isLoading, label }) =>
         },
       }}
     >
-      <Spinner size={SpinnerSize.large} label={label} styles={{ label: { fontWeight: 600 } }} />
+      <Spinner
+        size={SpinnerSize.large}
+        label={label}
+        styles={{ label: { fontWeight: 600, color: isDarkMode ? "#ffffff" : "#323130" } }}
+      />
     </Overlay>
   );
 };

src/Common/Pager/Pager.css

@@ -11,3 +11,14 @@
   gap: 8px;
   align-items: center;
 }
+
+/* Override dark mode inherit for pagination icons */
+body.isDarkMode .pager-container .ms-Button .ms-Button-icon,
+body.isDarkMode .pager-container .ms-Button i {
+  color: var(--colorBrandForeground1);
+}
+
+body.isDarkMode .pager-container .ms-Button:disabled .ms-Button-icon,
+body.isDarkMode .pager-container .ms-Button:disabled i {
+  color: var(--colorNeutralForegroundDisabled);
+}

src/Common/Pager/index.tsx

@@ -31,6 +31,7 @@ const iconButtonStyles = {
     outline: "none",
   },
 };
+const textStyle: React.CSSProperties = { color: "var(--colorNeutralForeground1)" };
 
 const Pager: React.FC<PagerProps> = ({
   startIndex,
@@ -59,7 +60,7 @@ const Pager: React.FC<PagerProps> = ({
   return (
     <div className={className || "pager-container"}>
       {showItemCount && (
-        <Text>
+        <Text style={textStyle}>
           Showing {startIndex + 1} - {endIndex} of {totalCount} items
         </Text>
       )}
@@ -82,7 +83,7 @@ const Pager: React.FC<PagerProps> = ({
           disabled={disabled || currentPage === 1}
           styles={iconButtonStyles}
         />
-        <Text>
+        <Text style={textStyle}>
           Page {currentPage} of {totalPages}
         </Text>
         <IconButton

src/Explorer/ContainerCopy/CommandBar/CopyJobCommandBar.tsx

@@ -1,24 +1,28 @@
 import { CommandBar as FluentCommandBar, ICommandBarItemProps } from "@fluentui/react";
 import React from "react";
-import { StyleConstants } from "../../../Common/StyleConstants";
+import { useThemeStore } from "../../../hooks/useTheme";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import * as CommandBarUtil from "../../Menus/CommandBar/CommandBarUtil";
+import { getThemeTokens } from "../../Theme/ThemeUtil";
 import { ContainerCopyProps } from "../Types/CopyJobTypes";
 import { getCommandBarButtons } from "./Utils";
 
-const backgroundColor = StyleConstants.BaseLight;
-const rootStyle = {
-  root: {
-    backgroundColor: backgroundColor,
-  },
-};
-
 const CopyJobCommandBar: React.FC<ContainerCopyProps> = ({ explorer }) => {
+  const isDarkMode = useThemeStore((state) => state.isDarkMode);
+  const themeTokens = getThemeTokens(isDarkMode);
+  const backgroundColor = themeTokens.colorNeutralBackground1;
+
+  const rootStyle = {
+    root: {
+      backgroundColor: backgroundColor,
+    },
+  };
+
   const commandBarItems: CommandButtonComponentProps[] = getCommandBarButtons(explorer);
   const controlButtons: ICommandBarItemProps[] = CommandBarUtil.convertButton(commandBarItems, backgroundColor);
 
   return (
-    <div className="commandBarContainer">
+    <div className="commandBarContainer" style={{ backgroundColor }}>
       <FluentCommandBar
         ariaLabel="Use left and right arrow keys to navigate between commands"
         styles={rootStyle}

src/Explorer/ContainerCopy/CommandBar/Utils.test.ts

@@ -82,9 +82,9 @@ describe("CommandBar Utils", () => {
     it("should include feedback button when platform is Portal", () => {
       const buttons = getCommandBarButtons(mockExplorer);
 
-      expect(buttons.length).toBe(3);
+      expect(buttons.length).toBe(4);
 
-      const feedbackButton = buttons[2];
+      const feedbackButton = buttons[3];
       expect(feedbackButton).toBeDefined();
       expect(feedbackButton.ariaLabel).toBe("Provide feedback on copy jobs");
       expect(feedbackButton.tooltipText).toBe("Feedback");
@@ -107,7 +107,7 @@ describe("CommandBar Utils", () => {
       const { getCommandBarButtons: getCommandBarButtonsEmulator } = await import("./Utils");
       const buttons = getCommandBarButtonsEmulator(mockExplorer);
 
-      expect(buttons.length).toBe(2);
+      expect(buttons.length).toBe(3);
     });
 
     it("should call openCreateCopyJobPanel when create button is clicked", () => {
@@ -131,7 +131,7 @@ describe("CommandBar Utils", () => {
 
     it("should call openContainerCopyFeedbackBlade when feedback button is clicked", () => {
       const buttons = getCommandBarButtons(mockExplorer);
-      const feedbackButton = buttons[2];
+      const feedbackButton = buttons[3];
 
       feedbackButton.onCommandClick({} as React.SyntheticEvent);
 
@@ -148,7 +148,10 @@ describe("CommandBar Utils", () => {
       expect(buttons[1].iconAlt).toBe("Refresh");
 
       expect(buttons[2].iconSrc).toBeDefined();
-      expect(buttons[2].iconAlt).toBe("Feedback");
+      expect(buttons[2].iconAlt).toBe("Dark Theme");
+
+      expect(buttons[3].iconSrc).toBeDefined();
+      expect(buttons[3].iconAlt).toBe("Feedback");
     });
 
     it("should handle null MonitorCopyJobsRefState ref gracefully", () => {
@@ -202,12 +205,13 @@ describe("CommandBar Utils", () => {
       });
     });
 
-    it("should maintain button order: create, refresh, feedback", () => {
+    it("should maintain button order: create, refresh, themeToggle, feedback", () => {
       const buttons = getCommandBarButtons(mockExplorer);
 
       expect(buttons[0].tooltipText).toBe("Create Copy Job");
       expect(buttons[1].tooltipText).toBe("Refresh");
-      expect(buttons[2].tooltipText).toBe("Feedback");
+      expect(buttons[2].tooltipText).toBe("Dark Theme");
+      expect(buttons[3].tooltipText).toBe("Feedback");
     });
   });
 
@@ -229,7 +233,7 @@ describe("CommandBar Utils", () => {
       buttons[1].onCommandClick({} as React.SyntheticEvent);
       expect(mockRefreshJobList).toHaveBeenCalled();
 
-      buttons[2].onCommandClick({} as React.SyntheticEvent);
+      buttons[3].onCommandClick({} as React.SyntheticEvent);
       expect(mockOpenContainerCopyFeedbackBlade).toHaveBeenCalled();
     });
   });

src/Explorer/ContainerCopy/CommandBar/Utils.ts

@@ -1,7 +1,10 @@
 import AddIcon from "../../../../images/Add.svg";
 import FeedbackIcon from "../../../../images/Feedback-Command.svg";
+import MoonIcon from "../../../../images/MoonIcon.svg";
 import RefreshIcon from "../../../../images/refresh-cosmos.svg";
+import SunIcon from "../../../../images/SunIcon.svg";
 import { configContext, Platform } from "../../../ConfigContext";
+import { useThemeStore } from "../../../hooks/useTheme";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import Explorer from "../../Explorer";
 import * as Actions from "../Actions/CopyJobActions";
@@ -11,6 +14,7 @@ import { CopyJobCommandBarBtnType } from "../Types/CopyJobTypes";
 
 function getCopyJobBtns(explorer: Explorer): CopyJobCommandBarBtnType[] {
   const monitorCopyJobsRef = MonitorCopyJobsRefState((state) => state.ref);
+  const isDarkMode = useThemeStore.getState().isDarkMode;
   const buttons: CopyJobCommandBarBtnType[] = [
     {
       key: "createCopyJob",
@@ -26,7 +30,15 @@ function getCopyJobBtns(explorer: Explorer): CopyJobCommandBarBtnType[] {
       ariaLabel: ContainerCopyMessages.refreshButtonAriaLabel,
       onClick: () => monitorCopyJobsRef?.refreshJobList(),
     },
+    {
+      key: "themeToggle",
+      iconSrc: isDarkMode ? SunIcon : MoonIcon,
+      label: isDarkMode ? "Light Theme" : "Dark Theme",
+      ariaLabel: isDarkMode ? "Switch to Light Theme" : "Switch to Dark Theme",
+      onClick: () => useThemeStore.getState().toggleTheme(),
+    },
   ];
+
   if (configContext.platform === Platform.Portal) {
     buttons.push({
       key: "feedback",

src/Explorer/ContainerCopy/ContainerCopyPanel.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect } from "react";
-import { SidePanel } from "../../Explorer/Panes/PanelContainerComponent";
 import CopyJobCommandBar from "./CommandBar/CopyJobCommandBar";
 import "./containerCopyStyles.less";
 import { MonitorCopyJobsRefState } from "./MonitorCopyJobs/MonitorCopyJobRefState";
@@ -17,7 +16,6 @@ const ContainerCopyPanel: React.FC<ContainerCopyProps> = ({ explorer }) => {
     <div id="containerCopyWrapper" className="flexContainer hideOverflows">
       <CopyJobCommandBar explorer={explorer} />
       <MonitorCopyJobs ref={monitorCopyJobsRef} explorer={explorer} />
-      <SidePanel />
     </div>
   );
 };

src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/AddManagedIdentity.tsx

@@ -12,7 +12,12 @@ import useToggle from "./hooks/useToggle";
 const managedIdentityTooltip = (
   <Text>
     {ContainerCopyMessages.addManagedIdentity.tooltip.content} &nbsp;
-    <Link href={ContainerCopyMessages.addManagedIdentity.tooltip.href} target="_blank" rel="noopener noreferrer">
+    <Link
+      style={{ color: "var(--colorBrandForeground1)" }}
+      href={ContainerCopyMessages.addManagedIdentity.tooltip.href}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
       {ContainerCopyMessages.addManagedIdentity.tooltip.hrefText}
     </Link>
   </Text>
@@ -26,7 +31,7 @@ const AddManagedIdentity: React.FC<AddManagedIdentityProps> = () => {
 
   return (
     <Stack className="addManagedIdentityContainer" tokens={{ childrenGap: 15, padding: "0 0 0 20px" }}>
-      <Text>
+      <Text className="themeText">
         {ContainerCopyMessages.addManagedIdentity.description}&ensp;
         <Link href={ContainerCopyMessages.addManagedIdentity.descriptionHref} target="_blank" rel="noopener noreferrer">
           {ContainerCopyMessages.addManagedIdentity.descriptionHrefText}

src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/AddReadPermissionToDefaultIdentity.tsx

@@ -13,7 +13,12 @@ import useToggle from "./hooks/useToggle";
 const TooltipContent = (
   <Text>
     {ContainerCopyMessages.readPermissionAssigned.tooltip.content} &nbsp;
-    <Link href={ContainerCopyMessages.readPermissionAssigned.tooltip.href} target="_blank" rel="noopener noreferrer">
+    <Link
+      style={{ color: "var(--colorBrandForeground1)" }}
+      href={ContainerCopyMessages.readPermissionAssigned.tooltip.href}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
       {ContainerCopyMessages.readPermissionAssigned.tooltip.hrefText}
     </Link>
   </Text>

src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/AssignPermissions.tsx

@@ -47,8 +47,8 @@ const PermissionGroup: React.FC<PermissionGroupConfig> = ({ title, description,
       tokens={{ childrenGap: 15 }}
       styles={{
         root: {
-          background: "#fafafa",
-          border: "1px solid #e1e1e1",
+          background: "var(--colorNeutralBackground2)",
+          border: "1px solid var(--colorNeutralStroke1)",
           borderRadius: 8,
           padding: 16,
           boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
@@ -56,11 +56,11 @@ const PermissionGroup: React.FC<PermissionGroupConfig> = ({ title, description,
       }}
     >
       <Stack tokens={{ childrenGap: 5 }}>
-        <Text variant="medium" style={{ fontWeight: 600 }}>
+        <Text variant="medium" style={{ fontWeight: 600, color: "var(--colorNeutralForeground1)" }}>
           {title}
         </Text>
         {description && (
-          <Text variant="small" styles={{ root: { color: "#605E5C" } }}>
+          <Text variant="small" styles={{ root: { color: "var(--colorNeutralForeground2)" } }}>
             {description}
           </Text>
         )}
@@ -100,7 +100,7 @@ const AssignPermissions = () => {
 
   return (
     <Stack className="assignPermissionsContainer" tokens={{ childrenGap: 20 }}>
-      <Text variant="medium">
+      <Text variant="medium" style={{ color: "var(--colorNeutralForeground1)" }}>
         {isSameAccount && copyJobState.migrationType === CopyJobMigrationType.Online
           ? ContainerCopyMessages.assignPermissions.intraAccountOnlineDescription(
               copyJobState?.source?.account?.name || "",

src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/DefaultManagedIdentity.tsx

@@ -12,7 +12,12 @@ import useToggle from "./hooks/useToggle";
 const managedIdentityTooltip = (
   <Text>
     {ContainerCopyMessages.defaultManagedIdentity.tooltip.content} &nbsp;
-    <Link href={ContainerCopyMessages.defaultManagedIdentity.tooltip.href} target="_blank" rel="noopener noreferrer">
+    <Link
+      style={{ color: "var(--colorBrandForeground1)" }}
+      href={ContainerCopyMessages.defaultManagedIdentity.tooltip.href}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
       {ContainerCopyMessages.defaultManagedIdentity.tooltip.hrefText}
     </Link>
   </Text>

src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/PointInTimeRestore.tsx

@@ -13,7 +13,12 @@ import InfoTooltip from "../Components/InfoTooltip";
 const tooltipContent = (
   <Text>
     {ContainerCopyMessages.pointInTimeRestore.tooltip.content} &nbsp;
-    <Link href={ContainerCopyMessages.pointInTimeRestore.tooltip.href} target="_blank" rel="noopener noreferrer">
+    <Link
+      style={{ color: "var(--colorBrandForeground1)" }}
+      href={ContainerCopyMessages.pointInTimeRestore.tooltip.href}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
       {ContainerCopyMessages.pointInTimeRestore.tooltip.hrefText}
     </Link>
   </Text>

src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/__snapshots__/AddManagedIdentity.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`AddManagedIdentity Snapshot Tests renders initial state correctly 1`] =
   class="ms-Stack addManagedIdentityContainer css-109"
 >
   <span
-    class="css-110"
+    class="themeText css-110"
   >
     A system-assigned managed identity is restricted to one per resource and is tied to the lifecycle of this resource. Once enabled, you can grant permissions to the managed identity by using Azure role-based access control (Azure RBAC). The managed identity is authenticated with Microsoft Entra ID, so you don’t have to store any credentials in code.
      
@@ -92,7 +92,7 @@ exports[`AddManagedIdentity Snapshot Tests renders loading state 1`] = `
   class="ms-Stack addManagedIdentityContainer css-109"
 >
   <span
-    class="css-110"
+    class="themeText css-110"
   >
     A system-assigned managed identity is restricted to one per resource and is tied to the lifecycle of this resource. Once enabled, you can grant permissions to the managed identity by using Azure role-based access control (Azure RBAC). The managed identity is authenticated with Microsoft Entra ID, so you don’t have to store any credentials in code.
      
@@ -192,13 +192,13 @@ exports[`AddManagedIdentity Snapshot Tests renders loading state 1`] = `
       </div>
     </div>
     <span
-      class="css-124"
+      class="themeText css-124"
       style="font-weight: 600;"
     >
       Enable system assigned managed identity
     </span>
     <span
-      class="css-110"
+      class="themeText css-110"
     >
       Enable system-assigned managed identity on the test-target-account. To confirm, click the "Yes" button.
     </span>
@@ -261,7 +261,7 @@ exports[`AddManagedIdentity Snapshot Tests renders with toggle on and popover vi
   class="ms-Stack addManagedIdentityContainer css-109"
 >
   <span
-    class="css-110"
+    class="themeText css-110"
   >
     A system-assigned managed identity is restricted to one per resource and is tied to the lifecycle of this resource. Once enabled, you can grant permissions to the managed identity by using Azure role-based access control (Azure RBAC). The managed identity is authenticated with Microsoft Entra ID, so you don’t have to store any credentials in code.
      
@@ -345,13 +345,13 @@ exports[`AddManagedIdentity Snapshot Tests renders with toggle on and popover vi
     style="max-width: 450px;"
   >
     <span
-      class="css-124"
+      class="themeText css-124"
       style="font-weight: 600;"
     >
       Enable system assigned managed identity
     </span>
     <span
-      class="css-110"
+      class="themeText css-110"
     >
       Enable system-assigned managed identity on the test-target-account. To confirm, click the "Yes" button.
     </span>

src/Explorer/ContainerCopy/CreateCopyJob/Screens/Components/PopoverContainer.tsx

@@ -22,10 +22,10 @@ const PopoverContainer: React.FC<PopoverContainerProps> = React.memo(
         style={{ maxWidth: 450 }}
       >
         <LoadingOverlay isLoading={isLoading} label={ContainerCopyMessages.popoverOverlaySpinnerLabel} />
-        <Text variant="mediumPlus" style={{ fontWeight: 600 }}>
+        <Text variant="mediumPlus" className="themeText" style={{ fontWeight: 600 }}>
           {title}
         </Text>
-        <Text>{children}</Text>
+        <Text className="themeText">{children}</Text>
         <Stack horizontal tokens={{ childrenGap: 20 }}>
           <PrimaryButton text={"Yes"} onClick={onPrimary} disabled={isLoading} />
           <DefaultButton text="No" onClick={onCancel} disabled={isLoading} />

src/Explorer/ContainerCopy/CreateCopyJob/Screens/Components/__snapshots__/PopoverContainer.test.tsx.snap

@@ -7,11 +7,11 @@ exports[`PopoverMessage Component Edge Cases should handle empty string title 1`
     style="max-width: 450px;"
   >
     <span
-      class="css-110"
+      class="themeText css-110"
       style="font-weight: 600;"
     />
     <span
-      class="css-111"
+      class="themeText css-111"
     >
       <div>
         Test content
@@ -74,7 +74,7 @@ exports[`PopoverMessage Component Edge Cases should handle null children 1`] = `
     style="max-width: 450px;"
   >
     <span
-      class="css-110"
+      class="themeText css-110"
       style="font-weight: 600;"
     >
       Test Title
@@ -136,7 +136,7 @@ exports[`PopoverMessage Component Edge Cases should handle undefined children 1`
     style="max-width: 450px;"
   >
     <span
-      class="css-110"
+      class="themeText css-110"
       style="font-weight: 600;"
     >
       Test Title
@@ -198,13 +198,13 @@ exports[`PopoverMessage Component Edge Cases should handle very long title 1`] =
     style="max-width: 450px;"
   >
     <span
-      class="css-110"
+      class="themeText css-110"
       style="font-weight: 600;"
     >
       This is a very long title that might cause layout issues or text wrapping in the popover component
     </span>
     <span
-      class="css-111"
+      class="themeText css-111"
     >
       <div>
         Test content
@@ -269,13 +269,13 @@ exports[`PopoverMessage Component Rendering should render correctly when visible
     style="max-width: 450px;"
   >
     <span
-      class="css-110"
+      class="themeText css-110"
       style="font-weight: 600;"
     >
       Test Title
     </span>
     <span
-      class="css-111"
+      class="themeText css-111"
     >
       <div>
         Test content
@@ -338,13 +338,13 @@ exports[`PopoverMessage Component Rendering should render correctly with differe
     style="max-width: 450px;"
   >
     <span
-      class="css-110"
+      class="themeText css-110"
       style="font-weight: 600;"
     >
       Test Title
     </span>
     <span
-      class="css-111"
+      class="themeText css-111"
     >
       <div>
         <p>
@@ -412,13 +412,13 @@ exports[`PopoverMessage Component Rendering should render correctly with differe
     style="max-width: 450px;"
   >
     <span
-      class="css-110"
+      class="themeText css-110"
       style="font-weight: 600;"
     >
       Custom Title
     </span>
     <span
-      class="css-111"
+      class="themeText css-111"
     >
       <div>
         Test content
@@ -485,13 +485,13 @@ exports[`PopoverMessage Component Rendering should render correctly with loading
       data-testid="loading-overlay"
     />
     <span
-      class="css-110"
+      class="themeText css-110"
       style="font-weight: 600;"
     >
       Test Title
     </span>
     <span
-      class="css-111"
+      class="themeText css-111"
     >
       <div>
         Test content

src/Explorer/ContainerCopy/CreateCopyJob/Screens/CreateContainer/AddCollectionPanelWrapper.tsx

@@ -41,7 +41,7 @@ const AddCollectionPanelWrapper: React.FunctionComponent<AddCollectionPanelWrapp
   return (
     <Stack className="addCollectionPanelWrapper">
       <Stack.Item className="addCollectionPanelHeader">
-        <Text>{ContainerCopyMessages.createNewContainerSubHeading}</Text>
+        <Text className="themeText">{ContainerCopyMessages.createNewContainerSubHeading}</Text>
       </Stack.Item>
       <Stack.Item className="addCollectionPanelBody">
         <AddCollectionPanel explorer={explorer} isCopyJobFlow={true} onSubmitSuccess={handleAddCollectionSuccess} />

src/Explorer/ContainerCopy/CreateCopyJob/Screens/CreateContainer/__snapshots__/AddCollectionPanelWrapper.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`AddCollectionPanelWrapper Component Rendering should match snapshot 1`]
       class="ms-StackItem addCollectionPanelHeader css-110"
     >
       <span
-        class="css-111"
+        class="themeText css-111"
       >
         Select the properties for your container.
       </span>
@@ -50,7 +50,7 @@ exports[`AddCollectionPanelWrapper Component Rendering should match snapshot wit
       class="ms-StackItem addCollectionPanelHeader css-110"
     >
       <span
-        class="css-111"
+        class="themeText css-111"
       >
         Select the properties for your container.
       </span>
@@ -91,7 +91,7 @@ exports[`AddCollectionPanelWrapper Component Rendering should match snapshot wit
       class="ms-StackItem addCollectionPanelHeader css-110"
     >
       <span
-        class="css-111"
+        class="themeText css-111"
       >
         Select the properties for your container.
       </span>
@@ -132,7 +132,7 @@ exports[`AddCollectionPanelWrapper Component Rendering should match snapshot wit
       class="ms-StackItem addCollectionPanelHeader css-110"
     >
       <span
-        class="css-111"
+        class="themeText css-111"
       >
         Select the properties for your container.
       </span>

src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectAccount/Components/MigrationTypeCheckbox.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable react/display-name */
-import { Checkbox, Stack } from "@fluentui/react";
+import { Checkbox, ICheckboxStyles, Stack } from "@fluentui/react";
 import React from "react";
 import ContainerCopyMessages from "../../../../ContainerCopyMessages";
 
@@ -9,8 +9,25 @@ interface MigrationTypeCheckboxProps {
   onChange: (_ev?: React.FormEvent, checked?: boolean) => void;
 }
 
-export const MigrationTypeCheckbox: React.FC<MigrationTypeCheckboxProps> = React.memo(({ checked, onChange }) => (
-  <Stack horizontal horizontalAlign="space-between" className="migrationTypeRow">
-    <Checkbox label={ContainerCopyMessages.migrationTypeCheckboxLabel} checked={checked} onChange={onChange} />
-  </Stack>
-));
+const checkboxStyles: ICheckboxStyles = {
+  text: { color: "var(--colorNeutralForeground1)" },
+  checkbox: { borderColor: "var(--colorNeutralStroke1)" },
+  root: {
+    selectors: {
+      ":hover .ms-Checkbox-text": { color: "var(--colorNeutralForeground1)" },
+    },
+  },
+};
+
+export const MigrationTypeCheckbox: React.FC<MigrationTypeCheckboxProps> = React.memo(({ checked, onChange }) => {
+  return (
+    <Stack horizontal horizontalAlign="space-between" className="migrationTypeRow">
+      <Checkbox
+        label={ContainerCopyMessages.migrationTypeCheckboxLabel}
+        checked={checked}
+        onChange={onChange}
+        styles={checkboxStyles}
+      />
+    </Stack>
+  );
+});

src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectAccount/SelectAccount.tsx

@@ -21,7 +21,7 @@ const SelectAccount = React.memo(() => {
 
   return (
     <Stack data-test="Panel:SelectAccountContainer" className="selectAccountContainer" tokens={{ childrenGap: 15 }}>
-      <Text>{ContainerCopyMessages.selectAccountDescription}</Text>
+      <Text className="themeText">{ContainerCopyMessages.selectAccountDescription}</Text>
 
       <SubscriptionDropdown />
 

src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectAccount/__snapshots__/SelectAccount.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`SelectAccount Component Rendering should render correctly with snapshot
   data-test="Panel:SelectAccountContainer"
 >
   <span
-    class="css-110"
+    class="themeText css-110"
   >
     Please select a source account from which to copy.
   </span>

src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectSourceAndTargetContainers/SelectSourceAndTargetContainers.tsx

@@ -48,7 +48,7 @@ const SelectSourceAndTargetContainers = ({ showAddCollectionPanel }: SelectSourc
 
   return (
     <Stack className="selectSourceAndTargetContainers" tokens={{ childrenGap: 25 }}>
-      <span>{ContainerCopyMessages.selectSourceAndTargetContainersDescription}</span>
+      <span className="themeText">{ContainerCopyMessages.selectSourceAndTargetContainersDescription}</span>
       <DatabaseContainerSection
         heading={ContainerCopyMessages.sourceContainerSubHeading}
         databaseOptions={sourceDatabaseOptions}

src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectSourceAndTargetContainers/components/DatabaseContainerSection.tsx

@@ -41,7 +41,11 @@ export const DatabaseContainerSection = ({
           onChange={containerOnChange}
         />
         {handleOnDemandCreateContainer && (
-          <ActionButton className="create-container-link-btn" onClick={() => handleOnDemandCreateContainer()}>
+          <ActionButton
+            className="create-container-link-btn"
+            style={{ color: "var(--colorBrandForeground1)" }}
+            onClick={() => handleOnDemandCreateContainer()}
+          >
             {ContainerCopyMessages.createContainerButtonLabel}
           </ActionButton>
         )}

src/Explorer/ContainerCopy/MonitorCopyJobs/Components/CopyJobDetails.tsx

@@ -1,5 +1,6 @@
 import { DetailsList, DetailsListLayoutMode, IColumn, Stack, Text } from "@fluentui/react";
 import React, { memo } from "react";
+import { useThemeStore } from "../../../../hooks/useTheme";
 import ContainerCopyMessages from "../../ContainerCopyMessages";
 import { CopyJobStatusType } from "../../Enums/CopyJobEnums";
 import { CopyJobType } from "../../Types/CopyJobTypes";
@@ -63,6 +64,19 @@ const getCopyJobDetailsListColumns = (): IColumn[] => {
 };
 
 const CopyJobDetails: React.FC<CopyJobDetailsProps> = ({ job }) => {
+  const isDarkMode = useThemeStore((state) => state.isDarkMode);
+
+  const errorMessageStyle: React.CSSProperties = {
+    whiteSpace: "pre-wrap",
+    ...(isDarkMode && {
+      whiteSpace: "pre-wrap",
+      backgroundColor: "var(--colorNeutralBackground2)",
+      color: "var(--colorNeutralForeground1)",
+      padding: "10px",
+      borderRadius: "4px",
+    }),
+  };
+
   const selectedContainers = [
     {
       sourceContainerName: job?.Source?.containerName || "N/A",
@@ -77,10 +91,10 @@ const CopyJobDetails: React.FC<CopyJobDetailsProps> = ({ job }) => {
     <Stack className="copyJobDetailsContainer" tokens={{ childrenGap: 15 }} data-testid="copy-job-details">
       {job.Error ? (
         <Stack.Item data-testid="error-stack" style={sectionCss.verticalAlign}>
-          <Text className="bold" style={sectionCss.headingText}>
+          <Text className="bold themeText" style={sectionCss.headingText}>
             {ContainerCopyMessages.errorTitle}
           </Text>
-          <Text as="pre" style={{ whiteSpace: "pre-wrap" }}>
+          <Text as="pre" style={errorMessageStyle}>
             {job.Error.message}
           </Text>
         </Stack.Item>
@@ -88,16 +102,16 @@ const CopyJobDetails: React.FC<CopyJobDetailsProps> = ({ job }) => {
       <Stack.Item data-testid="selectedcollection-stack">
         <Stack tokens={{ childrenGap: 15 }}>
           <Stack.Item style={sectionCss.verticalAlign}>
-            <Text className="bold">{ContainerCopyMessages.MonitorJobs.Columns.lastUpdatedTime}</Text>
-            <Text>{job.LastUpdatedTime}</Text>
+            <Text className="bold themeText">{ContainerCopyMessages.MonitorJobs.Columns.lastUpdatedTime}</Text>
+            <Text className="themeText">{job.LastUpdatedTime}</Text>
           </Stack.Item>
           <Stack.Item style={sectionCss.verticalAlign}>
-            <Text className="bold">{ContainerCopyMessages.sourceAccountLabel}</Text>
-            <Text>{job.Source?.remoteAccountName}</Text>
+            <Text className="bold themeText">{ContainerCopyMessages.sourceAccountLabel}</Text>
+            <Text className="themeText">{job.Source?.remoteAccountName}</Text>
           </Stack.Item>
           <Stack.Item style={sectionCss.verticalAlign}>
-            <Text className="bold">{ContainerCopyMessages.MonitorJobs.Columns.mode}</Text>
-            <Text>{job.Mode}</Text>
+            <Text className="bold themeText">{ContainerCopyMessages.MonitorJobs.Columns.mode}</Text>
+            <Text className="themeText">{job.Mode}</Text>
           </Stack.Item>
         </Stack>
       </Stack.Item>

src/Explorer/ContainerCopy/MonitorCopyJobs/Components/CopyJobStatusWithIcon.tsx

@@ -1,30 +1,14 @@
-import { FontIcon, getTheme, mergeStyles, mergeStyleSets, Spinner, SpinnerSize, Stack, Text } from "@fluentui/react";
+import { FontIcon, mergeStyles, Spinner, SpinnerSize, Stack, Text } from "@fluentui/react";
 import PropTypes from "prop-types";
 import React from "react";
 import ContainerCopyMessages from "../../ContainerCopyMessages";
 import { CopyJobStatusType } from "../../Enums/CopyJobEnums";
 
-const theme = getTheme();
-
 const iconClass = mergeStyles({
   fontSize: "16px",
   marginRight: "8px",
 });
 
-const classNames = mergeStyleSets({
-  [CopyJobStatusType.Pending]: [{ color: theme.semanticColors.bodySubtext }, iconClass],
-  [CopyJobStatusType.InProgress]: [{ color: theme.palette.themePrimary }, iconClass],
-  [CopyJobStatusType.Running]: [{ color: theme.palette.themePrimary }, iconClass],
-  [CopyJobStatusType.Partitioning]: [{ color: theme.palette.themePrimary }, iconClass],
-  [CopyJobStatusType.Paused]: [{ color: theme.palette.themePrimary }, iconClass],
-  [CopyJobStatusType.Skipped]: [{ color: theme.semanticColors.bodySubtext }, iconClass],
-  [CopyJobStatusType.Cancelled]: [{ color: theme.semanticColors.bodySubtext }, iconClass],
-  [CopyJobStatusType.Failed]: [{ color: theme.semanticColors.errorIcon }, iconClass],
-  [CopyJobStatusType.Faulted]: [{ color: theme.semanticColors.errorIcon }, iconClass],
-  [CopyJobStatusType.Completed]: [{ color: theme.semanticColors.successIcon }, iconClass],
-  unknown: [{ color: theme.semanticColors.bodySubtext }, iconClass],
-});
-
 const iconMap: Partial<Record<CopyJobStatusType, string>> = {
   [CopyJobStatusType.Pending]: "Clock",
   [CopyJobStatusType.Paused]: "CirclePause",
@@ -35,6 +19,17 @@ const iconMap: Partial<Record<CopyJobStatusType, string>> = {
   [CopyJobStatusType.Completed]: "CompletedSolid",
 };
 
+// Icon colors for different statuses
+const statusIconColors: Partial<Record<CopyJobStatusType, string>> = {
+  [CopyJobStatusType.Failed]: "var(--colorPaletteRedForeground1)",
+  [CopyJobStatusType.Faulted]: "var(--colorPaletteRedForeground1)",
+  [CopyJobStatusType.Completed]: "#107c10", // Green color for success
+  [CopyJobStatusType.InProgress]: "var(--colorBrandForeground1)",
+  [CopyJobStatusType.Running]: "var(--colorBrandForeground1)",
+  [CopyJobStatusType.Partitioning]: "var(--colorBrandForeground1)",
+  [CopyJobStatusType.Paused]: "var(--colorBrandForeground1)",
+};
+
 export interface CopyJobStatusWithIconProps {
   status: CopyJobStatusType;
 }
@@ -47,19 +42,17 @@ const CopyJobStatusWithIcon: React.FC<CopyJobStatusWithIconProps> = React.memo((
     CopyJobStatusType.InProgress,
     CopyJobStatusType.Partitioning,
   ].includes(status);
+  const iconColor = statusIconColors[status] || "var(--colorNeutralForeground2)";
+  const iconStyle = mergeStyles(iconClass, { color: iconColor });
 
   return (
     <Stack horizontal verticalAlign="center">
       {isSpinnerStatus ? (
         <Spinner size={SpinnerSize.small} style={{ marginRight: "8px" }} />
       ) : (
-        <FontIcon
-          aria-label={status}
-          iconName={iconMap[status] || "UnknownSolid"}
-          className={classNames[status] || classNames.unknown}
-        />
+        <FontIcon aria-label={status} iconName={iconMap[status] || "UnknownSolid"} className={iconStyle} />
       )}
-      <Text>{statusText}</Text>
+      <Text className="themeText">{statusText}</Text>
     </Stack>
   );
 });

src/Explorer/ContainerCopy/MonitorCopyJobs/Components/CopyJobsList.tsx

@@ -15,6 +15,8 @@ import {
 } from "@fluentui/react";
 import React, { useEffect } from "react";
 import Pager from "../../../../Common/Pager";
+import { useThemeStore } from "../../../../hooks/useTheme";
+import { getThemeTokens } from "../../../Theme/ThemeUtil";
 import { openCopyJobDetailsPanel } from "../../Actions/CopyJobActions";
 import { CopyJobType, HandleJobActionClickType } from "../../Types/CopyJobTypes";
 import { getColumns } from "./CopyJobColumns";
@@ -26,13 +28,15 @@ interface CopyJobsListProps {
 }
 
 const styles = {
-  container: { height: "calc(100vh - 25em)" } as React.CSSProperties,
+  container: { height: "100%" } as React.CSSProperties,
   stackItem: { position: "relative", marginBottom: "20px" } as React.CSSProperties,
 };
 
 const PAGE_SIZE = 10;
 
 const CopyJobsList: React.FC<CopyJobsListProps> = ({ jobs, handleActionClick, pageSize = PAGE_SIZE }) => {
+  const isDarkMode = useThemeStore((state) => state.isDarkMode);
+  const themeTokens = getThemeTokens(isDarkMode);
   const [startIndex, setStartIndex] = React.useState(0);
   const [sortedJobs, setSortedJobs] = React.useState<CopyJobType[]>(jobs);
   const [sortedColumnKey, setSortedColumnKey] = React.useState<string | undefined>(undefined);
@@ -87,11 +91,28 @@ const CopyJobsList: React.FC<CopyJobsListProps> = ({ jobs, handleActionClick, pa
               enableShimmer={false}
               constrainMode={ConstrainMode.unconstrained}
               layoutMode={DetailsListLayoutMode.justified}
-              onRenderDetailsHeader={(props, defaultRender) => (
-                <Sticky stickyPosition={StickyPositionType.Header} isScrollSynced>
-                  {defaultRender({ ...props })}
-                </Sticky>
-              )}
+              onRenderDetailsHeader={(props, defaultRender) => {
+                const bgColor = themeTokens.colorNeutralBackground3;
+                const textColor = themeTokens.colorNeutralForeground1;
+                return (
+                  <Sticky stickyPosition={StickyPositionType.Header} isScrollSynced stickyBackgroundColor={bgColor}>
+                    <div style={{ backgroundColor: bgColor }}>
+                      {defaultRender({
+                        ...props,
+                        styles: {
+                          root: {
+                            backgroundColor: bgColor,
+                            selectors: {
+                              ".ms-DetailsHeader-cellTitle": { color: textColor },
+                              ".ms-DetailsHeader-cellName": { color: textColor },
+                            },
+                          },
+                        },
+                      })}
+                    </div>
+                  </Sticky>
+                );
+              }}
             />
           </ScrollablePane>
         </Stack.Item>

src/Explorer/ContainerCopy/MonitorCopyJobs/Components/__snapshots__/CopyJobStatusWithIcon.test.tsx.snap

@@ -13,7 +13,7 @@ exports[`CopyJobStatusWithIcon Spinner Status Types renders InProgress with spin
     />
   </div>
   <span
-    class="css-112"
+    class="themeText css-112"
   >
     Running
   </span>
@@ -33,7 +33,7 @@ exports[`CopyJobStatusWithIcon Spinner Status Types renders Partitioning with sp
     />
   </div>
   <span
-    class="css-112"
+    class="themeText css-112"
   >
     Running
   </span>
@@ -53,7 +53,7 @@ exports[`CopyJobStatusWithIcon Spinner Status Types renders Running with spinner
     />
   </div>
   <span
-    class="css-112"
+    class="themeText css-112"
   >
     Running
   </span>
@@ -66,7 +66,7 @@ exports[`CopyJobStatusWithIcon Static Icon Status Types - Snapshot Tests renders
 >
   <i
     aria-label="Cancelled"
-    class="ms-Icon root-105 css-118 mocked-style-Cancelled"
+    class="ms-Icon root-105 css-118 mocked-styles"
     data-icon-name="StatusErrorFull"
     role="img"
     style="font-family: "FabricMDL2Icons-4";"
@@ -74,7 +74,7 @@ exports[`CopyJobStatusWithIcon Static Icon Status Types - Snapshot Tests renders
     
   </i>
   <span
-    class="css-112"
+    class="themeText css-112"
   >
     Cancelled
   </span>
@@ -87,7 +87,7 @@ exports[`CopyJobStatusWithIcon Static Icon Status Types - Snapshot Tests renders
 >
   <i
     aria-label="Completed"
-    class="ms-Icon root-105 css-120 mocked-style-Completed"
+    class="ms-Icon root-105 css-120 mocked-styles"
     data-icon-name="CompletedSolid"
     role="img"
     style="font-family: "FabricMDL2Icons-5";"
@@ -95,7 +95,7 @@ exports[`CopyJobStatusWithIcon Static Icon Status Types - Snapshot Tests renders
     
   </i>
   <span
-    class="css-112"
+    class="themeText css-112"
   >
     Completed
   </span>
@@ -108,7 +108,7 @@ exports[`CopyJobStatusWithIcon Static Icon Status Types - Snapshot Tests renders
 >
   <i
     aria-label="Failed"
-    class="ms-Icon root-105 css-118 mocked-style-Failed"
+    class="ms-Icon root-105 css-118 mocked-styles"
     data-icon-name="StatusErrorFull"
     role="img"
     style="font-family: "FabricMDL2Icons-4";"
@@ -116,7 +116,7 @@ exports[`CopyJobStatusWithIcon Static Icon Status Types - Snapshot Tests renders
     
   </i>
   <span
-    class="css-112"
+    class="themeText css-112"
   >
     Failed
   </span>
@@ -129,7 +129,7 @@ exports[`CopyJobStatusWithIcon Static Icon Status Types - Snapshot Tests renders
 >
   <i
     aria-label="Faulted"
-    class="ms-Icon root-105 css-118 mocked-style-Faulted"
+    class="ms-Icon root-105 css-118 mocked-styles"
     data-icon-name="StatusErrorFull"
     role="img"
     style="font-family: "FabricMDL2Icons-4";"
@@ -137,7 +137,7 @@ exports[`CopyJobStatusWithIcon Static Icon Status Types - Snapshot Tests renders
     
   </i>
   <span
-    class="css-112"
+    class="themeText css-112"
   >
     Failed
   </span>
@@ -150,7 +150,7 @@ exports[`CopyJobStatusWithIcon Static Icon Status Types - Snapshot Tests renders
 >
   <i
     aria-label="Paused"
-    class="ms-Icon root-105 css-114 mocked-style-Paused"
+    class="ms-Icon root-105 css-114 mocked-styles"
     data-icon-name="CirclePause"
     role="img"
     style="font-family: "FabricMDL2Icons-11";"
@@ -158,7 +158,7 @@ exports[`CopyJobStatusWithIcon Static Icon Status Types - Snapshot Tests renders
     
   </i>
   <span
-    class="css-112"
+    class="themeText css-112"
   >
     Paused
   </span>
@@ -171,7 +171,7 @@ exports[`CopyJobStatusWithIcon Static Icon Status Types - Snapshot Tests renders
 >
   <i
     aria-label="Pending"
-    class="ms-Icon root-105 css-111 mocked-style-Pending"
+    class="ms-Icon root-105 css-111 mocked-styles"
     data-icon-name="Clock"
     role="img"
     style="font-family: "FabricMDL2Icons-2";"
@@ -179,7 +179,7 @@ exports[`CopyJobStatusWithIcon Static Icon Status Types - Snapshot Tests renders
     
   </i>
   <span
-    class="css-112"
+    class="themeText css-112"
   >
     Queued
   </span>
@@ -192,7 +192,7 @@ exports[`CopyJobStatusWithIcon Static Icon Status Types - Snapshot Tests renders
 >
   <i
     aria-label="Skipped"
-    class="ms-Icon root-105 css-116 mocked-style-Skipped"
+    class="ms-Icon root-105 css-116 mocked-styles"
     data-icon-name="StatusCircleBlock2"
     role="img"
     style="font-family: "FabricMDL2Icons-9";"
@@ -200,7 +200,7 @@ exports[`CopyJobStatusWithIcon Static Icon Status Types - Snapshot Tests renders
     
   </i>
   <span
-    class="css-112"
+    class="themeText css-112"
   >
     Cancelled
   </span>

src/Explorer/ContainerCopy/containerCopyStyles.less

@@ -1,6 +1,30 @@
 @import "../../../less/Common/Constants.less";
 
+// Common theme-aware classes
+.themeText {
+  color: var(--colorNeutralForeground1);
+}
+
+.themeTextSecondary {
+  color: var(--colorNeutralForeground2);
+}
+
+.themeLinkText {
+  color: var(--colorBrandForeground1);
+}
+
+.themeBackground {
+  background-color: var(--colorNeutralBackground1);
+}
+
+.themeBackgroundSecondary {
+  background-color: var(--colorNeutralBackground2);
+}
+
 #containerCopyWrapper {
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
+
   .centerContent {
     justify-content: center;
     align-items: center;
@@ -9,20 +33,30 @@
     .noCopyJobsMessage {
       font-weight: 600;
       margin: 0 auto;
-      color: @FocusColor;
+      color: var(--colorNeutralForeground2);
     }
     button.createCopyJobButton {
-      color: @LinkColor;
+      color: var(--colorBrandForeground1);
     }
   }
 }
 .createCopyJobScreensContainer {
   height: 100%;
   padding: 1em 1.5em;
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
 
   .pointInTimeRestoreContainer, .onlineCopyContainer {
     position: relative;
   }
+
+  .toggle-label {
+    color: var(--colorNeutralForeground1);
+  }
+
+  .accordionHeaderText {
+    color: var(--colorNeutralForeground1);
+  }
   
   label {
     padding: 0;
@@ -71,7 +105,7 @@
   }
   .foreground {
     z-index: 10;
-    background-color: #f9f9f9;
+    background-color: var(--colorNeutralBackground2);
     padding: 20px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     transform: translate(0%, -9%);
@@ -83,11 +117,12 @@
   .create-container-link-btn {
     padding: 0;
     height: 25px;
-    color: @LinkColor;
+    color: var(--colorBrandForeground1);
 
     &:focus {
       outline: none;
     }
+
   }
 
   /* Create collection panel */
@@ -105,7 +140,6 @@
   width: 100%;
   max-width: 100%;
   margin: 0 auto;
-
   .ms-DetailsList {
     width: 100%;
 
@@ -114,33 +148,33 @@
         padding: @DefaultSpace 20px;
         font-weight: 600;
         font-size: @DefaultFontSize;
-        color: @BaseHigh;
-        background-color: @BaseLow;
-        border-bottom: @ButtonBorderWidth solid @BaseMedium;
+        color: var(--colorNeutralForeground1);
+        background-color: var(--colorNeutralBackground2);
+        border-bottom: @ButtonBorderWidth solid var(--colorNeutralStroke1);
 
         &:hover {
-          background-color: @BaseMediumLow;
+          background-color: var(--colorNeutralBackground3);
         }
       }
     }
 
     .ms-DetailsRow {
-      border-bottom: @ButtonBorderWidth solid @BaseMedium;
+      border-bottom: @ButtonBorderWidth solid var(--colorNeutralStroke1);
 
       &:hover {
-        background-color: @BaseMediumLow;
+        background-color: var(--colorNeutralBackground2);
       }
 
       .ms-DetailsRow-cell {
         padding: @MediumSpace 20px;
         font-size: @DefaultFontSize;
-        color: @BaseHigh;
+        color: var(--colorNeutralForeground1);
         min-height: 48px;
         display: flex;
         align-items: center;
 
         .jobNameLink {
-          color: @LinkColor;
+          color: var(--colorBrandForeground1);
           text-overflow: ellipsis;
           white-space: nowrap;
           overflow: hidden;
@@ -168,7 +202,7 @@
     }
     .ms-DetailsRow-cell {
       font-size: @DefaultFontSize;
-      color: @BaseHigh;
+      color: var(--colorNeutralForeground1);
     }
   }
 }

src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputBucketsComponent.tsx

@@ -103,7 +103,10 @@ export const ThroughputBucketsComponent: FC<ThroughputBucketsComponentProps> = (
               offText="Inactive"
               checked={bucket.maxThroughputPercentage !== 100}
               onChange={(event, checked) => onToggle(bucket.id, checked)}
-              styles={{ root: { marginBottom: 0 }, text: { fontSize: 12 } }}
+              styles={{
+                root: { marginBottom: 0 },
+                text: { fontSize: 12, color: "var(--colorNeutralForeground1)" },
+              }}
             ></Toggle>
           </Stack>
         ))}

src/Explorer/Controls/VectorSearch/VectorEmbeddingPoliciesComponent.tsx

@@ -53,6 +53,7 @@ type VectorEmbeddingPolicyProperty = "dataType" | "distanceFunction" | "indexTyp
 const labelStyles = {
   root: {
     fontSize: 12,
+    color: "var(--colorNeutralForeground1)",
   },
 };
 
@@ -63,6 +64,8 @@ const textFieldStyles: IStyleFunctionOrObject<ITextFieldStyleProps, ITextFieldSt
   field: {
     fontSize: 12,
     padding: "0 8px",
+    backgroundColor: "var(--colorNeutralBackground1)",
+    color: "var(--colorNeutralForeground1)",
   },
 };
 

src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.tsx

@@ -853,7 +853,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
 
               {!isSynapseLinkEnabled() && (
                 <Stack className="panelGroupSpacing">
-                  <Text variant="small">
+                  <Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
                     Azure Synapse Link is required for creating an analytical store{" "}
                     {getCollectionName().toLocaleLowerCase()}. Enable Synapse Link for this Cosmos DB account. <br />
                     <Link

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

@@ -475,6 +475,11 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
         className="panelGroupSpacing"
       >
         <Text
+          style={
+            {
+              "color": "var(--colorNeutralForeground1)",
+            }
+          }
           variant="small"
         >
           Azure Synapse Link is required for creating an analytical store

src/Explorer/Panes/PanelLoadingScreen.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import LoadingIndicator_3Squares from "../../../images/LoadingIndicator_3Squares.gif";
 
 export const PanelLoadingScreen: React.FunctionComponent = () => (
-  <div id="loadingScreen" className="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer">
+  <div id="loadingScreen" className="dataExplorerLoaderContainer dataExplorerLoaderforcopyJobs">
     <img className="dataExplorerLoader" src={LoadingIndicator_3Squares} />
   </div>
 );

src/Main.tsx

@@ -2,9 +2,18 @@
 import "./ReactDevTools";
 
 // CSS Dependencies
-import { initializeIcons } from "@fluentui/react";
+import { initializeIcons, loadTheme, useTheme } from "@fluentui/react";
+import { FluentProvider, makeStyles, webDarkTheme, webLightTheme } from "@fluentui/react-components";
+import { Platform } from "ConfigContext";
+import ContainerCopyPanel from "Explorer/ContainerCopy/ContainerCopyPanel";
+import Explorer from "Explorer/Explorer";
+import { QuickstartCarousel } from "Explorer/Quickstart/QuickstartCarousel";
+import { MongoQuickstartTutorial } from "Explorer/Quickstart/Tutorials/MongoQuickstartTutorial";
+import { SQLQuickstartTutorial } from "Explorer/Quickstart/Tutorials/SQLQuickstartTutorial";
+import { userContext } from "UserContext";
 import "allotment/dist/style.css";
 import "bootstrap/dist/css/bootstrap.css";
+import { useCarousel } from "hooks/useCarousel";
 import React from "react";
 import ReactDOM from "react-dom";
 import "../externals/jquery-ui.min.css";
@@ -15,8 +24,13 @@ import "../externals/jquery.dataTables.min.css";
 import "../externals/jquery.typeahead.min.css";
 import "../externals/jquery.typeahead.min.js";
 // Image Dependencies
+import { SidePanel } from "Explorer/Panes/PanelContainerComponent";
+import { QueryCopilotCarousel } from "Explorer/QueryCopilot/CopilotCarousel";
+import { SidebarContainer } from "Explorer/Sidebar";
+import { KeyboardShortcutRoot } from "KeyboardShortcuts";
 import "allotment/dist/style.css";
 import "../images/CosmosDB_rgb_ui_lighttheme.ico";
+import hdeConnectImage from "../images/HdeConnectCosmosDB.svg";
 import "../images/favicon.ico";
 import "../less/TableStyles/CustomizeColumns.less";
 import "../less/TableStyles/EntityEditor.less";
@@ -28,29 +42,175 @@ import "../less/infobox.less";
 import "../less/menus.less";
 import "../less/messagebox.less";
 import "../less/resourceTree.less";
+import * as StyleConstants from "./Common/StyleConstants";
 import "./Explorer/Controls/Accordion/AccordionComponent.less";
 import "./Explorer/Controls/CollapsiblePanel/CollapsiblePanelComponent.less";
+import { Dialog } from "./Explorer/Controls/Dialog";
 import "./Explorer/Controls/ErrorDisplayComponent/ErrorDisplayComponent.less";
 import "./Explorer/Controls/JsonEditor/JsonEditorComponent.less";
 import "./Explorer/Controls/Notebook/NotebookTerminalComponent.less";
 import "./Explorer/Controls/TreeComponent/treeComponent.less";
+import { ErrorBoundary } from "./Explorer/ErrorBoundary";
 import "./Explorer/Graph/GraphExplorerComponent/graphExplorer.less";
 import "./Explorer/Menus/CommandBar/CommandBarComponent.less";
+import { CommandBar } from "./Explorer/Menus/CommandBar/CommandBarComponentAdapter";
 import "./Explorer/Menus/CommandBar/ConnectionStatusComponent.less";
 import "./Explorer/Menus/CommandBar/MemoryTrackerComponent.less";
 import "./Explorer/Menus/NotificationConsole/NotificationConsole.less";
+import { NotificationConsole } from "./Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
 import "./Explorer/Panes/PanelComponent.less";
 import "./Explorer/SplashScreen/SplashScreen.less";
 import "./Libs/jquery";
-import { MetricScenarioProvider } from "./Metrics/MetricScenarioProvider";
-import Root from "./RootComponents/Root";
+import MetricScenario from "./Metrics/MetricEvents";
+import { MetricScenarioProvider, useMetricScenario } from "./Metrics/MetricScenarioProvider";
+import { ApplicationMetricPhase } from "./Metrics/ScenarioConfig";
+import { useInteractive } from "./Metrics/useMetricPhases";
+import { appThemeFabric } from "./Platform/Fabric/FabricTheme";
 import "./Shared/appInsights";
+import { useConfig } from "./hooks/useConfig";
+import { useKnockoutExplorer } from "./hooks/useKnockoutExplorer";
+import { useThemeStore } from "./hooks/useTheme";
 import "./less/DarkModeMenus.less";
 import "./less/ThemeSystem.less";
-
 // Initialize icons before React is loaded
 initializeIcons(undefined, { disableWarnings: true });
 
+const useStyles = makeStyles({
+  root: {
+    height: "100vh",
+    width: "100vw",
+    backgroundColor: "var(--colorNeutralBackground1)",
+    color: "var(--colorNeutralForeground1)",
+  },
+});
+
+const App = (): JSX.Element => {
+  const config = useConfig();
+  const styles = useStyles();
+  // theme is used for application-wide styling
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const theme = useTheme();
+
+  // Load Fabric theme and styles only once when platform is Fabric
+  React.useEffect(() => {
+    if (config?.platform === Platform.Fabric) {
+      loadTheme(appThemeFabric);
+      import("../less/documentDBFabric.less");
+    }
+    StyleConstants.updateStyles();
+  }, [config?.platform]);
+
+  const explorer = useKnockoutExplorer(config?.platform);
+
+  // Scenario-based health tracking: start ApplicationLoad and complete phases.
+  const { startScenario, completePhase } = useMetricScenario();
+  React.useEffect(() => {
+    startScenario(MetricScenario.ApplicationLoad);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  React.useEffect(() => {
+    if (explorer) {
+      completePhase(MetricScenario.ApplicationLoad, ApplicationMetricPhase.ExplorerInitialized);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [explorer]);
+
+  if (!explorer) {
+    return <LoadingExplorer />;
+  }
+
+  return (
+    <div id="Main" className={styles.root}>
+      <KeyboardShortcutRoot>
+        <div className="flexContainer" aria-hidden="false">
+          {userContext.features.enableContainerCopy && userContext.apiType === "SQL" ? (
+            <ContainerCopyPanel explorer={explorer} />
+          ) : (
+            <DivExplorer explorer={explorer} />
+          )}
+        </div>
+      </KeyboardShortcutRoot>
+    </div>
+  );
+};
+
+const DivExplorer: React.FC<{ explorer: Explorer }> = ({ explorer }) => {
+  const isCarouselOpen = useCarousel((state) => state.shouldOpen);
+  const isCopilotCarouselOpen = useCarousel((state) => state.showCopilotCarousel);
+  useInteractive(MetricScenario.ApplicationLoad);
+
+  return (
+    <div
+      className="flexContainer"
+      style={{
+        flex: 1,
+        display: "flex",
+        flexDirection: "column",
+        backgroundColor: "var(--colorNeutralBackground1)",
+        color: "var(--colorNeutralForeground1)",
+      }}
+      aria-hidden="false"
+      data-test="DataExplorerRoot"
+    >
+      <div
+        id="divExplorer"
+        className="flexContainer hideOverflows"
+        style={{
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+          backgroundColor: "var(--colorNeutralBackground1)",
+          color: "var(--colorNeutralForeground1)",
+        }}
+      >
+        <div id="freeTierTeachingBubble"> </div>
+        <CommandBar container={explorer} />
+        <SidebarContainer explorer={explorer} />
+        <div
+          className="dataExplorerErrorConsoleContainer"
+          role="contentinfo"
+          aria-label="Notification console"
+          id="explorerNotificationConsole"
+          style={{
+            backgroundColor: "var(--colorNeutralBackground1)",
+            color: "var(--colorNeutralForeground1)",
+          }}
+        >
+          <NotificationConsole />
+        </div>
+      </div>
+      <SidePanel />
+      <Dialog />
+      {<QuickstartCarousel isOpen={isCarouselOpen} />}
+      {<SQLQuickstartTutorial />}
+      {<MongoQuickstartTutorial />}
+      {<QueryCopilotCarousel isOpen={isCopilotCarouselOpen} explorer={explorer} />}
+    </div>
+  );
+};
+
+const Root: React.FC = () => {
+  // Use React state to track isDarkMode and subscribe to changes
+  const [isDarkMode, setIsDarkMode] = React.useState(useThemeStore.getState().isDarkMode);
+  const currentTheme = isDarkMode ? webDarkTheme : webLightTheme;
+
+  // Subscribe to theme changes
+  React.useEffect(() => {
+    return useThemeStore.subscribe((state) => {
+      setIsDarkMode(state.isDarkMode);
+    });
+  }, []);
+
+  return (
+    <ErrorBoundary>
+      <FluentProvider theme={currentTheme}>
+        <App />
+      </FluentProvider>
+    </ErrorBoundary>
+  );
+};
+
 const mainElement = document.getElementById("Main");
 if (mainElement) {
   ReactDOM.render(
@@ -60,3 +220,24 @@ if (mainElement) {
     mainElement,
   );
 }
+
+function LoadingExplorer(): JSX.Element {
+  const styles = useStyles();
+  return (
+    <div className={styles.root}>
+      <div className="splashLoaderContainer">
+        <div className="splashLoaderContentContainer">
+          <p className="connectExplorerContent">
+            <img src={hdeConnectImage} alt="Azure Cosmos DB" />
+          </p>
+          <p className="splashLoaderTitle" id="explorerLoadingStatusTitle">
+            Welcome to Azure Cosmos DB
+          </p>
+          <p className="splashLoaderText" id="explorerLoadingStatusText" role="alert">
+            Connecting...
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

src/Metrics/MetricScenarioProvider.tsx

@@ -3,7 +3,7 @@ import MetricScenario from "./MetricEvents";
 import { MetricPhase } from "./ScenarioConfig";
 import { scenarioMonitor } from "./ScenarioMonitor";
 
-export interface MetricScenarioContextValue {
+interface MetricScenarioContextValue {
   startScenario: (scenario: MetricScenario) => void;
   startPhase: (scenario: MetricScenario, phase: MetricPhase) => void;
   completePhase: (scenario: MetricScenario, phase: MetricPhase) => void;

src/RootComponents/App.test.tsx

@@ -1,317 +0,0 @@
-import { loadTheme } from "@fluentui/react";
-import "@testing-library/jest-dom";
-import { render, screen, waitFor } from "@testing-library/react";
-import React from "react";
-import { updateStyles } from "../Common/StyleConstants";
-import { Platform } from "../ConfigContext";
-import { useConfig } from "../hooks/useConfig";
-import { useKnockoutExplorer } from "../hooks/useKnockoutExplorer";
-import { MetricScenarioContextValue, useMetricScenario } from "../Metrics/MetricScenarioProvider";
-import App from "./App";
-
-const mockUserContext = {
-  features: { enableContainerCopy: false },
-  apiType: "SQL",
-};
-
-jest.mock("@fluentui/react", () => ({
-  loadTheme: jest.fn(),
-  makeStyles: jest.fn(() => () => ({
-    root: "mock-app-root-class",
-  })),
-  MessageBarType: {
-    error: "error",
-    warning: "warning",
-    info: "info",
-    success: "success",
-  },
-  SpinnerSize: {
-    xSmall: "xSmall",
-    small: "small",
-    medium: "medium",
-    large: "large",
-  },
-}));
-
-jest.mock("../Common/StyleConstants", () => ({
-  StyleConstants: {
-    BaseMedium: "#000000",
-    AccentMediumHigh: "#0078d4",
-    AccentMedium: "#106ebe",
-    AccentLight: "#deecf9",
-    AccentAccentExtra: "#0078d4",
-    FabricAccentMediumHigh: "#0078d4",
-    FabricAccentMedium: "#106ebe",
-    FabricAccentLight: "#deecf9",
-    PortalAccentMediumHigh: "#0078d4",
-    PortalAccentMedium: "#106ebe",
-    PortalAccentLight: "#deecf9",
-  },
-  updateStyles: jest.fn(),
-}));
-
-jest.mock("./LoadingExplorer", () => {
-  const MockLoadingExplorer = () => {
-    return <div data-testid="mock-loading-explorer">Loading Explorer</div>;
-  };
-  MockLoadingExplorer.displayName = "MockLoadingExplorer";
-  return MockLoadingExplorer;
-});
-
-jest.mock("./ExplorerContainer", () => {
-  const MockExplorerContainer = ({ explorer }: { explorer: unknown }) => {
-    return (
-      <div data-testid="mock-explorer-container">Explorer Container - {explorer ? "with explorer" : "no explorer"}</div>
-    );
-  };
-  MockExplorerContainer.displayName = "MockExplorerContainer";
-  return MockExplorerContainer;
-});
-
-jest.mock("../Explorer/ContainerCopy/ContainerCopyPanel", () => {
-  const MockContainerCopyPanel = ({ explorer }: { explorer: unknown }) => {
-    return (
-      <div data-testid="mock-container-copy-panel">
-        Container Copy Panel - {explorer ? "with explorer" : "no explorer"}
-      </div>
-    );
-  };
-  MockContainerCopyPanel.displayName = "MockContainerCopyPanel";
-  return MockContainerCopyPanel;
-});
-
-jest.mock("../KeyboardShortcuts", () => ({
-  KeyboardShortcutRoot: ({ children }: { children: React.ReactNode }) => (
-    <div data-testid="mock-keyboard-shortcut-root">{children}</div>
-  ),
-}));
-
-jest.mock("../UserContext", () => ({
-  get userContext() {
-    return mockUserContext;
-  },
-}));
-
-const mockConfig = {
-  platform: Platform.Portal,
-};
-
-const mockExplorer = {
-  id: "test-explorer",
-  name: "Test Explorer",
-};
-
-jest.mock("../hooks/useConfig", () => ({
-  useConfig: jest.fn(() => mockConfig),
-}));
-
-jest.mock("../hooks/useKnockoutExplorer", () => ({
-  useKnockoutExplorer: jest.fn(),
-}));
-
-jest.mock("../Metrics/MetricScenarioProvider", () => ({
-  useMetricScenario: jest.fn(() => ({
-    startScenario: jest.fn(),
-    completePhase: jest.fn(),
-  })),
-}));
-
-jest.mock("../Metrics/MetricEvents", () => ({
-  __esModule: true,
-  default: {
-    ApplicationLoad: "ApplicationLoad",
-  },
-}));
-
-jest.mock("../Metrics/ScenarioConfig", () => ({
-  ApplicationMetricPhase: {
-    ExplorerInitialized: "ExplorerInitialized",
-  },
-  CommonMetricPhase: {
-    Interactive: "Interactive",
-  },
-}));
-
-jest.mock("../Platform/Fabric/FabricTheme", () => ({
-  appThemeFabric: { name: "fabric-theme" },
-}));
-
-describe("App", () => {
-
-  afterEach(() => {
-    jest.clearAllMocks();
-    mockUserContext.features = { enableContainerCopy: false };
-    mockUserContext.apiType = "SQL";
-  });
-  let mockStartScenario: jest.Mock;
-  let mockCompletePhase: jest.Mock;
-  let mockUseKnockoutExplorer: jest.Mock;
-  let mockUseConfig: jest.Mock;
-  let mockLoadTheme: jest.Mock;
-  let mockUpdateStyles: jest.Mock;
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-
-    mockStartScenario = jest.fn();
-    mockCompletePhase = jest.fn();
-
-    mockUseKnockoutExplorer = jest.mocked(useKnockoutExplorer);
-    mockUseConfig = jest.mocked(useConfig);
-    mockLoadTheme = jest.mocked(loadTheme);
-    mockUpdateStyles = jest.mocked(updateStyles);
-    
-    const mockUseMetricScenario = jest.mocked(useMetricScenario);
-    mockUseMetricScenario.mockReturnValue({
-        startScenario: mockStartScenario,
-        completePhase: mockCompletePhase
-    } as unknown as MetricScenarioContextValue);
-
-    mockUseConfig.mockReturnValue(mockConfig);
-    mockUseKnockoutExplorer.mockReturnValue(null);
-  });
-
-  test("should render loading explorer when explorer is not ready", () => {
-    mockUseKnockoutExplorer.mockReturnValue(null);
-
-    render(<App />);
-
-    expect(screen.getByTestId("mock-loading-explorer")).toBeInTheDocument();
-    expect(screen.queryByTestId("mock-explorer-container")).not.toBeInTheDocument();
-  });
-
-  test("should render explorer container when explorer is ready", () => {
-    mockUseKnockoutExplorer.mockReturnValue(mockExplorer);
-
-    render(<App />);
-
-    expect(screen.getByTestId("mock-explorer-container")).toBeInTheDocument();
-    expect(screen.queryByTestId("mock-loading-explorer")).not.toBeInTheDocument();
-  });
-
-  test("should start metric scenario on mount", () => {
-    render(<App />);
-
-    expect(mockStartScenario).toHaveBeenCalledWith("ApplicationLoad");
-    expect(mockStartScenario).toHaveBeenCalledTimes(1);
-  });
-
-  test("should complete metric phase when explorer is initialized", async () => {
-    const { rerender } = render(<App />);
-
-    expect(mockCompletePhase).not.toHaveBeenCalled();
-
-    mockUseKnockoutExplorer.mockReturnValue(mockExplorer);
-    rerender(<App />);
-
-    await waitFor(() => {
-      expect(mockCompletePhase).toHaveBeenCalledWith("ApplicationLoad", "ExplorerInitialized");
-    });
-  });
-
-  test("should load fabric theme when platform is Fabric", () => {
-    const fabricConfig = { platform: Platform.Fabric };
-    mockUseConfig.mockReturnValue(fabricConfig);
-    mockUseKnockoutExplorer.mockReturnValue(mockExplorer);
-
-    render(<App />);
-
-    expect(mockLoadTheme).toHaveBeenCalledWith({ name: "fabric-theme" });
-  });
-
-  test("should not load fabric theme when platform is not Fabric", () => {
-    const portalConfig = { platform: Platform.Portal };
-    mockUseConfig.mockReturnValue(portalConfig);
-
-    render(<App />);
-
-    expect(mockLoadTheme).not.toHaveBeenCalled();
-  });
-
-  test("should always call updateStyles", () => {
-    render(<App />);
-
-    expect(mockUpdateStyles).toHaveBeenCalled();
-  });
-
-  test("should render container copy panel when container copy is enabled and API is SQL", () => {
-    mockUserContext.features = { enableContainerCopy: true };
-    mockUserContext.apiType = "SQL";
-    
-    mockUseKnockoutExplorer.mockReturnValue(mockExplorer);
-
-    render(<App />);
-
-    expect(screen.getByTestId("mock-container-copy-panel")).toBeInTheDocument();
-    expect(screen.queryByTestId("mock-explorer-container")).not.toBeInTheDocument();
-  });
-
-  test("should render explorer container when container copy is disabled", () => {
-    mockUserContext.features = { enableContainerCopy: false };
-    mockUserContext.apiType = "SQL";
-    
-    mockUseKnockoutExplorer.mockReturnValue(mockExplorer);
-
-    render(<App />);
-
-    expect(screen.getByTestId("mock-explorer-container")).toBeInTheDocument();
-    expect(screen.queryByTestId("mock-container-copy-panel")).not.toBeInTheDocument();
-  });
-
-  test("should render explorer container when API is not SQL", () => {
-    mockUserContext.features = { enableContainerCopy: true };
-    mockUserContext.apiType = "MongoDB";
-    
-    mockUseKnockoutExplorer.mockReturnValue(mockExplorer);
-
-    render(<App />);
-
-    expect(screen.getByTestId("mock-explorer-container")).toBeInTheDocument();
-    expect(screen.queryByTestId("mock-container-copy-panel")).not.toBeInTheDocument();
-  });
-
-  test("should have correct DOM structure", () => {
-    mockUseKnockoutExplorer.mockReturnValue(mockExplorer);
-
-    const { container } = render(<App />);
-
-    const mainDiv = container.querySelector("#Main");
-    expect(mainDiv).toBeInTheDocument();
-    expect(mainDiv).toHaveClass("mock-app-root-class");
-
-    expect(screen.getByTestId("mock-keyboard-shortcut-root")).toBeInTheDocument();
-
-    const flexContainer = container.querySelector(".flexContainer");
-    expect(flexContainer).toBeInTheDocument();
-    expect(flexContainer).toHaveAttribute("aria-hidden", "false");
-  });
-
-  test("should handle config changes for Fabric platform", () => {
-    const { rerender } = render(<App />);
-
-    const fabricConfig = { platform: Platform.Fabric };
-    mockUseConfig.mockReturnValue(fabricConfig);
-
-    rerender(<App />);
-
-    expect(mockLoadTheme).toHaveBeenCalledWith({ name: "fabric-theme" });
-  });
-
-  test("should pass explorer to child components", () => {
-    mockUseKnockoutExplorer.mockReturnValue(mockExplorer);
-
-    render(<App />);
-
-    expect(screen.getByText("Explorer Container - with explorer")).toBeInTheDocument();
-  });
-
-  test("should handle null config gracefully", () => {
-    mockUseConfig.mockReturnValue(null);
-    mockUseKnockoutExplorer.mockReturnValue(mockExplorer);
-
-    expect(() => render(<App />)).not.toThrow();
-
-    expect(mockLoadTheme).not.toHaveBeenCalled();
-    expect(mockUpdateStyles).toHaveBeenCalled();
-  });
-});

src/RootComponents/App.tsx

@@ -1,73 +0,0 @@
-import { loadTheme, makeStyles } from "@fluentui/react";
-import React from "react";
-import * as StyleConstants from "../Common/StyleConstants";
-import { Platform } from "../ConfigContext";
-import ContainerCopyPanel from "../Explorer/ContainerCopy/ContainerCopyPanel";
-import { useConfig } from "../hooks/useConfig";
-import { useKnockoutExplorer } from "../hooks/useKnockoutExplorer";
-import { KeyboardShortcutRoot } from "../KeyboardShortcuts";
-import MetricScenario from "../Metrics/MetricEvents";
-import { useMetricScenario } from "../Metrics/MetricScenarioProvider";
-import { ApplicationMetricPhase } from "../Metrics/ScenarioConfig";
-import { appThemeFabric } from "../Platform/Fabric/FabricTheme";
-import { userContext } from "../UserContext";
-import ExplorerContainer from "./ExplorerContainer";
-import LoadingExplorer from "./LoadingExplorer";
-
-const useStyles = makeStyles({
-  root: {
-    height: "100vh",
-    width: "100vw",
-    backgroundColor: "var(--colorNeutralBackground1)",
-    color: "var(--colorNeutralForeground1)",
-  },
-});
-
-const App = (): JSX.Element => {
-  const config = useConfig();
-  const styles = useStyles();
-  // Load Fabric theme and styles only once when platform is Fabric
-  React.useEffect(() => {
-    if (config?.platform === Platform.Fabric) {
-      loadTheme(appThemeFabric);
-      import("../../less/documentDBFabric.less");
-    }
-    StyleConstants.updateStyles();
-  }, [config?.platform]);
-
-  const explorer = useKnockoutExplorer(config?.platform);
-
-  // Scenario-based health tracking: start ApplicationLoad and complete phases.
-  const { startScenario, completePhase } = useMetricScenario();
-  React.useEffect(() => {
-    startScenario(MetricScenario.ApplicationLoad);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  React.useEffect(() => {
-    if (explorer) {
-      completePhase(MetricScenario.ApplicationLoad, ApplicationMetricPhase.ExplorerInitialized);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [explorer]);
-
-  if (!explorer) {
-    return <LoadingExplorer />;
-  }
-
-  return (
-    <div id="Main" className={styles.root}>
-      <KeyboardShortcutRoot>
-        <div className="flexContainer" aria-hidden="false">
-          {userContext.features.enableContainerCopy && userContext.apiType === "SQL" ? (
-            <ContainerCopyPanel explorer={explorer} />
-          ) : (
-            <ExplorerContainer explorer={explorer} />
-          )}
-        </div>
-      </KeyboardShortcutRoot>
-    </div>
-  );
-};
-
-export default App;

src/RootComponents/ExplorerContainer.test.tsx

@@ -1,183 +0,0 @@
-import "@testing-library/jest-dom";
-import { render, screen } from "@testing-library/react";
-import React from "react";
-import Explorer from "../Explorer/Explorer";
-import { useCarousel } from "../hooks/useCarousel";
-import { useInteractive } from "../Metrics/useMetricPhases";
-import ExplorerContainer from "./ExplorerContainer";
-
-jest.mock("../Explorer/Controls/Dialog", () => ({
-  Dialog: () => <div data-testid="mock-dialog">Dialog</div>,
-}));
-
-jest.mock("../Explorer/Menus/CommandBar/CommandBarComponentAdapter", () => ({
-  CommandBar: ({ container }: { container: Explorer }) => (
-    <div data-testid="mock-command-bar">CommandBar - {container ? "with explorer" : "no explorer"}</div>
-  ),
-}));
-
-jest.mock("../Explorer/Menus/NotificationConsole/NotificationConsoleComponent", () => ({
-  NotificationConsole: () => <div data-testid="mock-notification-console">NotificationConsole</div>,
-}));
-
-jest.mock("../Explorer/Panes/PanelContainerComponent", () => ({
-  SidePanel: () => <div data-testid="mock-side-panel">SidePanel</div>,
-}));
-
-jest.mock("../Explorer/QueryCopilot/CopilotCarousel", () => ({
-  QueryCopilotCarousel: ({ isOpen, explorer }: { isOpen: boolean; explorer: Explorer }) => (
-    <div data-testid="mock-copilot-carousel">
-      CopilotCarousel - {isOpen ? "open" : "closed"} - {explorer ? "with explorer" : "no explorer"}
-    </div>
-  ),
-}));
-
-jest.mock("../Explorer/Quickstart/QuickstartCarousel", () => ({
-  QuickstartCarousel: ({ isOpen }: { isOpen: boolean }) => (
-    <div data-testid="mock-quickstart-carousel">QuickstartCarousel - {isOpen ? "open" : "closed"}</div>
-  ),
-}));
-
-jest.mock("../Explorer/Quickstart/Tutorials/MongoQuickstartTutorial", () => ({
-  MongoQuickstartTutorial: () => <div data-testid="mock-mongo-tutorial">MongoQuickstartTutorial</div>,
-}));
-
-jest.mock("../Explorer/Quickstart/Tutorials/SQLQuickstartTutorial", () => ({
-  SQLQuickstartTutorial: () => <div data-testid="mock-sql-tutorial">SQLQuickstartTutorial</div>,
-}));
-
-jest.mock("../Explorer/Sidebar", () => ({
-  SidebarContainer: ({ explorer }: { explorer: Explorer }) => (
-    <div data-testid="mock-sidebar-container">SidebarContainer - {explorer ? "with explorer" : "no explorer"}</div>
-  ),
-}));
-
-jest.mock("../hooks/useCarousel", () => ({
-  useCarousel: jest.fn((selector) => {
-    if (selector.toString().includes("shouldOpen")) {
-      return true;
-    }
-    if (selector.toString().includes("showCopilotCarousel")) {
-      return false;
-    }
-    return false;
-  }),
-}));
-
-jest.mock("../Metrics/useMetricPhases", () => ({
-  useInteractive: jest.fn(),
-}));
-
-jest.mock("../Metrics/MetricEvents", () => ({
-  __esModule: true,
-  default: {
-    ApplicationLoad: "ApplicationLoad",
-  },
-}));
-
-describe("ExplorerContainer", () => {
-  let mockExplorer: Explorer;
-
-  beforeEach(() => {
-    mockExplorer = {
-      id: "test-explorer",
-      name: "Test Explorer",
-    } as unknown as Explorer;
-
-    jest.clearAllMocks();
-  });
-
-  test("should render explorer container with all components", () => {
-    const { container } = render(<ExplorerContainer explorer={mockExplorer} />);
-
-    const mainContainer = container.querySelector('[data-test="DataExplorerRoot"]');
-    expect(mainContainer).toBeInTheDocument();
-    expect(mainContainer).toHaveClass("flexContainer");
-
-    expect(screen.getByTestId("mock-command-bar")).toBeInTheDocument();
-    expect(screen.getByTestId("mock-sidebar-container")).toBeInTheDocument();
-    expect(screen.getByTestId("mock-notification-console")).toBeInTheDocument();
-    expect(screen.getByTestId("mock-side-panel")).toBeInTheDocument();
-    expect(screen.getByTestId("mock-dialog")).toBeInTheDocument();
-    expect(screen.getByTestId("mock-quickstart-carousel")).toBeInTheDocument();
-    expect(screen.getByTestId("mock-sql-tutorial")).toBeInTheDocument();
-    expect(screen.getByTestId("mock-mongo-tutorial")).toBeInTheDocument();
-    expect(screen.getByTestId("mock-copilot-carousel")).toBeInTheDocument();
-  });
-
-  test("should pass explorer to components that need it", () => {
-    render(<ExplorerContainer explorer={mockExplorer} />);
-
-    expect(screen.getByText("CommandBar - with explorer")).toBeInTheDocument();
-    expect(screen.getByText("SidebarContainer - with explorer")).toBeInTheDocument();
-    expect(screen.getByText("CopilotCarousel - closed - with explorer")).toBeInTheDocument();
-  });
-
-  test("should have correct DOM structure", () => {
-    const { container } = render(<ExplorerContainer explorer={mockExplorer} />);
-
-    const mainContainer = container.querySelector('[data-test="DataExplorerRoot"]');
-    expect(mainContainer).toBeInTheDocument();
-    expect(mainContainer).toHaveAttribute("aria-hidden", "false");
-
-    const divExplorer = container.querySelector("#divExplorer");
-    expect(divExplorer).toBeInTheDocument();
-    expect(divExplorer).toHaveClass("flexContainer", "hideOverflows");
-
-    const freeTierBubble = container.querySelector("#freeTierTeachingBubble");
-    expect(freeTierBubble).toBeInTheDocument();
-
-    const notificationContainer = container.querySelector("#explorerNotificationConsole");
-    expect(notificationContainer).toBeInTheDocument();
-    expect(notificationContainer).toHaveClass("dataExplorerErrorConsoleContainer");
-    expect(notificationContainer).toHaveAttribute("role", "contentinfo");
-    expect(notificationContainer).toHaveAttribute("aria-label", "Notification console");
-  });
-
-  test("should apply correct inline styles", () => {
-    const { container } = render(<ExplorerContainer explorer={mockExplorer} />);
-
-    const mainContainer = container.querySelector('[data-test="DataExplorerRoot"]');
-    expect(mainContainer).toHaveStyle({
-      flex: "1",
-      display: "flex",
-      flexDirection: "column",
-      backgroundColor: "var(--colorNeutralBackground1)",
-      color: "var(--colorNeutralForeground1)",
-    });
-
-    const divExplorer = container.querySelector("#divExplorer");
-    expect(divExplorer).toHaveStyle({
-      flex: "1",
-      display: "flex",
-      flexDirection: "column",
-    });
-  });
-
-  test("should handle carousel states correctly", () => {
-    const mockUseCarousel = jest.mocked(useCarousel);
-
-    mockUseCarousel.mockImplementation((selector: { toString: () => string | string[] }) => {
-      if (selector.toString().includes("shouldOpen")) {
-        return false;
-      }
-      if (selector.toString().includes("showCopilotCarousel")) {
-        return true;
-      }
-      return false;
-    });
-
-    render(<ExplorerContainer explorer={mockExplorer} />);
-
-    expect(screen.getByText("QuickstartCarousel - closed")).toBeInTheDocument();
-    expect(screen.getByText("CopilotCarousel - open - with explorer")).toBeInTheDocument();
-  });
-
-  test("should call useInteractive hook with correct metric", () => {
-    const mockUseInteractive = jest.mocked(useInteractive);
-
-    render(<ExplorerContainer explorer={mockExplorer} />);
-
-    expect(mockUseInteractive).toHaveBeenCalledWith("ApplicationLoad");
-  });
-});

src/RootComponents/ExplorerContainer.tsx

@@ -1,71 +0,0 @@
-import React from "react";
-import { Dialog } from "../Explorer/Controls/Dialog";
-import Explorer from "../Explorer/Explorer";
-import { CommandBar } from "../Explorer/Menus/CommandBar/CommandBarComponentAdapter";
-import { NotificationConsole } from "../Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
-import { SidePanel } from "../Explorer/Panes/PanelContainerComponent";
-import { QueryCopilotCarousel } from "../Explorer/QueryCopilot/CopilotCarousel";
-import { QuickstartCarousel } from "../Explorer/Quickstart/QuickstartCarousel";
-import { MongoQuickstartTutorial } from "../Explorer/Quickstart/Tutorials/MongoQuickstartTutorial";
-import { SQLQuickstartTutorial } from "../Explorer/Quickstart/Tutorials/SQLQuickstartTutorial";
-import { SidebarContainer } from "../Explorer/Sidebar";
-import { useCarousel } from "../hooks/useCarousel";
-import MetricScenario from "../Metrics/MetricEvents";
-import { useInteractive } from "../Metrics/useMetricPhases";
-
-const ExplorerContainer: React.FC<{ explorer: Explorer }> = ({ explorer }) => {
-  const isCarouselOpen = useCarousel((state) => state.shouldOpen);
-  const isCopilotCarouselOpen = useCarousel((state) => state.showCopilotCarousel);
-  useInteractive(MetricScenario.ApplicationLoad);
-
-  return (
-    <div
-      className="flexContainer"
-      style={{
-        flex: 1,
-        display: "flex",
-        flexDirection: "column",
-        backgroundColor: "var(--colorNeutralBackground1)",
-        color: "var(--colorNeutralForeground1)",
-      }}
-      aria-hidden="false"
-      data-test="DataExplorerRoot"
-    >
-      <div
-        id="divExplorer"
-        className="flexContainer hideOverflows"
-        style={{
-          flex: 1,
-          display: "flex",
-          flexDirection: "column",
-          backgroundColor: "var(--colorNeutralBackground1)",
-          color: "var(--colorNeutralForeground1)",
-        }}
-      >
-        <div id="freeTierTeachingBubble"> </div>
-        <CommandBar container={explorer} />
-        <SidebarContainer explorer={explorer} />
-        <div
-          className="dataExplorerErrorConsoleContainer"
-          role="contentinfo"
-          aria-label="Notification console"
-          id="explorerNotificationConsole"
-          style={{
-            backgroundColor: "var(--colorNeutralBackground1)",
-            color: "var(--colorNeutralForeground1)",
-          }}
-        >
-          <NotificationConsole />
-        </div>
-      </div>
-      <SidePanel />
-      <Dialog />
-      {<QuickstartCarousel isOpen={isCarouselOpen} />}
-      {<SQLQuickstartTutorial />}
-      {<MongoQuickstartTutorial />}
-      {<QueryCopilotCarousel isOpen={isCopilotCarouselOpen} explorer={explorer} />}
-    </div>
-  );
-};
-
-export default ExplorerContainer;

src/RootComponents/LoadingExplorer.test.tsx

@@ -1,71 +0,0 @@
-import "@testing-library/jest-dom";
-import { render, screen } from "@testing-library/react";
-import React from "react";
-import LoadingExplorer from "./LoadingExplorer";
-
-jest.mock("../../images/HdeConnectCosmosDB.svg", () => "test-hde-connect-image.svg");
-
-jest.mock("@fluentui/react-components", () => ({
-  makeStyles: jest.fn(() => () => ({
-    root: "mock-root-class",
-  })),
-}));
-
-describe("LoadingExplorer", () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  test("should render loading explorer component", () => {
-    render(<LoadingExplorer />);
-
-    const container = screen.getByRole("alert");
-    expect(container).toBeInTheDocument();
-    expect(container).toHaveTextContent("Connecting...");
-  });
-
-  test("should display welcome title", () => {
-    render(<LoadingExplorer />);
-
-    const title = screen.getByText("Welcome to Azure Cosmos DB");
-    expect(title).toBeInTheDocument();
-    expect(title).toHaveAttribute("id", "explorerLoadingStatusTitle");
-  });
-
-  test("should display connecting status text", () => {
-    render(<LoadingExplorer />);
-
-    const statusText = screen.getByText("Connecting...");
-    expect(statusText).toBeInTheDocument();
-    expect(statusText).toHaveAttribute("id", "explorerLoadingStatusText");
-    expect(statusText).toHaveAttribute("role", "alert");
-  });
-
-  test("should render Azure Cosmos DB image", () => {
-    render(<LoadingExplorer />);
-
-    const image = screen.getByAltText("Azure Cosmos DB");
-    expect(image).toBeInTheDocument();
-    expect(image).toHaveAttribute("src", "test-hde-connect-image.svg");
-  });
-
-  test("should have correct class structure", () => {
-    render(<LoadingExplorer />);
-
-    const splashContainer = document.querySelector(".splashLoaderContainer");
-    expect(splashContainer).toBeInTheDocument();
-
-    const contentContainer = document.querySelector(".splashLoaderContentContainer");
-    expect(contentContainer).toBeInTheDocument();
-
-    const connectContent = document.querySelector(".connectExplorerContent");
-    expect(connectContent).toBeInTheDocument();
-  });
-
-  test("should apply CSS classes correctly", () => {
-    const { container } = render(<LoadingExplorer />);
-
-    const rootDiv = container.firstChild as HTMLElement;
-    expect(rootDiv).toHaveClass("mock-root-class");
-  });
-});

src/RootComponents/LoadingExplorer.tsx

@@ -1,36 +0,0 @@
-import { makeStyles } from "@fluentui/react-components";
-import React from "react";
-import hdeConnectImage from "../../images/HdeConnectCosmosDB.svg";
-
-const useStyles = makeStyles({
-  root: {
-    height: "100vh",
-    width: "100vw",
-    backgroundColor: "var(--colorNeutralBackground1)",
-    color: "var(--colorNeutralForeground1)",
-  },
-});
-
-function LoadingExplorer(): JSX.Element {
-  const styles = useStyles();
-
-  return (
-    <div className={styles.root}>
-      <div className="splashLoaderContainer">
-        <div className="splashLoaderContentContainer">
-          <p className="connectExplorerContent">
-            <img src={hdeConnectImage} alt="Azure Cosmos DB" />
-          </p>
-          <p className="splashLoaderTitle" id="explorerLoadingStatusTitle">
-            Welcome to Azure Cosmos DB
-          </p>
-          <p className="splashLoaderText" id="explorerLoadingStatusText" role="alert">
-            Connecting...
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default LoadingExplorer;

src/RootComponents/Root.test.tsx

@@ -1,107 +0,0 @@
-import "@testing-library/jest-dom";
-import { render, screen } from "@testing-library/react";
-import React from "react";
-import Root from "./Root";
-
-jest.mock("../Explorer/ErrorBoundary", () => ({
-  ErrorBoundary: ({ children }: { children: React.ReactNode }) => (
-    <div data-testid="mock-error-boundary">{children}</div>
-  ),
-}));
-
-jest.mock("@fluentui/react-components", () => ({
-  FluentProvider: ({ children, theme }: { children: React.ReactNode; theme: { colorNeutralBackground1: string } }) => (
-    <div
-      data-testid="mock-fluent-provider"
-      data-theme={theme.colorNeutralBackground1 === "dark" ? "webDarkTheme" : "webLightTheme"}
-    >
-      {children}
-    </div>
-  ),
-  webLightTheme: { colorNeutralBackground1: "light" },
-  webDarkTheme: { colorNeutralBackground1: "dark" },
-}));
-
-jest.mock("./App", () => ({
-  __esModule: true,
-  default: () => <div data-testid="mock-app">App</div>,
-}));
-
-const createMockStore = (isDarkMode: boolean = false) => ({
-  getState: jest.fn(() => ({ isDarkMode })),
-  subscribe: jest.fn(() => jest.fn()),
-});
-
-const mockThemeStore = createMockStore(false);
-
-jest.mock("../hooks/useTheme", () => ({
-  get useThemeStore() {
-    return mockThemeStore;
-  },
-}));
-
-describe("Root", () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  test("should render Root component with all child components", () => {
-    render(<Root />);
-
-    expect(screen.getByTestId("mock-error-boundary")).toBeInTheDocument();
-    expect(screen.getByTestId("mock-fluent-provider")).toBeInTheDocument();
-    expect(screen.getByTestId("mock-app")).toBeInTheDocument();
-  });
-
-  test("should have correct component hierarchy", () => {
-    render(<Root />);
-
-    const errorBoundary = screen.getByTestId("mock-error-boundary");
-    const fluentProvider = screen.getByTestId("mock-fluent-provider");
-    const app = screen.getByTestId("mock-app");
-
-    expect(errorBoundary).toContainElement(fluentProvider);
-    expect(fluentProvider).toContainElement(app);
-  });
-
-  test("should subscribe to theme changes on mount", () => {
-    render(<Root />);
-
-    expect(mockThemeStore.subscribe).toHaveBeenCalled();
-    expect(mockThemeStore.subscribe).toHaveBeenCalledWith(expect.any(Function));
-  });
-
-  test("should get initial theme state", () => {
-    render(<Root />);
-
-    expect(mockThemeStore.getState).toHaveBeenCalled();
-  });
-
-  test("should handle component unmounting", () => {
-    const mockUnsubscribe = jest.fn();
-    mockThemeStore.subscribe.mockReturnValue(mockUnsubscribe);
-
-    const { unmount } = render(<Root />);
-
-    unmount();
-
-    expect(mockUnsubscribe).toHaveBeenCalled();
-  });
-
-  test("should call getState to initialize theme", () => {
-    render(<Root />);
-
-    expect(mockThemeStore.getState).toHaveBeenCalledTimes(1);
-  });
-
-  test("should handle theme subscription properly", () => {
-    render(<Root />);
-
-    expect(mockThemeStore.subscribe).toHaveBeenCalledTimes(1);
-    expect(mockThemeStore.getState).toHaveBeenCalled();
-  });
-
-  test("should render without errors", () => {
-    expect(() => render(<Root />)).not.toThrow();
-  });
-});

src/RootComponents/Root.tsx

@@ -1,28 +0,0 @@
-import { FluentProvider, webDarkTheme, webLightTheme } from "@fluentui/react-components";
-import React from "react";
-import { ErrorBoundary } from "../Explorer/ErrorBoundary";
-import { useThemeStore } from "../hooks/useTheme";
-import App from "./App";
-
-const Root: React.FC = () => {
-  // Use React state to track isDarkMode and subscribe to changes
-  const [isDarkMode, setIsDarkMode] = React.useState(useThemeStore.getState().isDarkMode);
-  const currentTheme = isDarkMode ? webDarkTheme : webLightTheme;
-
-  // Subscribe to theme changes
-  React.useEffect(() => {
-    return useThemeStore.subscribe((state) => {
-      setIsDarkMode(state.isDarkMode);
-    });
-  }, []);
-
-  return (
-    <ErrorBoundary>
-      <FluentProvider theme={currentTheme}>
-        <App />
-      </FluentProvider>
-    </ErrorBoundary>
-  );
-};
-
-export default Root;

src/less/DarkModeMenus.less

@@ -438,7 +438,6 @@ body.isDarkMode {
 
   button {
     &:not(.ms-Button):not(.ms-IconButton) {
-      background-color: var(--colorNeutralBackground1);
       color: var(--colorNeutralForeground1);
       
       &:hover {