diff --git a/src/Common/Upload/Upload.tsx b/src/Common/Upload/Upload.tsx
index 3feb4fdfd..70dfe1930 100644
--- a/src/Common/Upload/Upload.tsx
+++ b/src/Common/Upload/Upload.tsx
@@ -50,7 +50,7 @@ export const Upload: FunctionComponent<UploadProps> = ({
   const title = label + " to upload";
   return (
     <div>
-      <span className="renewUploadItemsHeader">{label}</span>
+      <span className="renewUploadItemsHeader" style={{ color: "var(--colorNeutralForeground1)" }}>{label}</span>
       {tooltip && <InfoTooltip>{tooltip}</InfoTooltip>}
       <Stack horizontal>
         <TextField styles={{ fieldGroup: { width: 300 } }} readOnly value={selectedFilesTitle.toString()} />
diff --git a/src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx b/src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx
index 3f0fa6d2c..0f7eec239 100644
--- a/src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx
+++ b/src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx
@@ -58,7 +58,7 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
           aria-expanded={this.state.isExpanded}
         >
           <Icon iconName={this.state.isExpanded ? "ChevronDown" : "ChevronRight"} />
-          <Label>{this.props.title}</Label>
+          <Label styles={{ root: { color: "var(--colorNeutralForeground1)" } }}>{this.props.title}</Label>
           {this.props.tooltipContent && (
             <TooltipHost
               directionalHint={DirectionalHint.bottomLeftEdge}
@@ -79,6 +79,14 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
                 id={`delete-${this.props.title.split(" ").join("-")}`}
                 iconProps={{ iconName: "Delete" }}
                 style={{ height: 27, marginRight: "20px" }}
+                styles={{
+                  rootHovered: { 
+                    backgroundColor: "transparent",
+                  },
+                  rootPressed: {
+                    backgroundColor: "transparent",
+                  }
+                }}
                 onClick={(event) => {
                   event.stopPropagation();
                   this.props.onDelete();
diff --git a/src/Explorer/Controls/FullTextSeach/FullTextPoliciesComponent.tsx b/src/Explorer/Controls/FullTextSeach/FullTextPoliciesComponent.tsx
index 8972791ce..959cdc998 100644
--- a/src/Explorer/Controls/FullTextSeach/FullTextPoliciesComponent.tsx
+++ b/src/Explorer/Controls/FullTextSeach/FullTextPoliciesComponent.tsx
@@ -33,6 +33,7 @@ export interface FullTextPolicyData {
 const labelStyles = {
   root: {
     fontSize: 12,
+    color: "var(--colorNeutralForeground1)"
   },
 };
 
@@ -222,7 +223,31 @@ export const FullTextPoliciesComponent: React.FunctionComponent<FullTextPolicies
             </Stack>
           </CollapsibleSectionComponent>
         ))}
-      <DefaultButton id={`add-vector-policy`} styles={{ root: { maxWidth: 170, fontSize: 12 } }} onClick={onAdd}>
+      <DefaultButton 
+        id={`add-vector-policy`} 
+        styles={{ 
+          root: { 
+            maxWidth: 170, 
+            fontSize: 12,
+            color: "var(--colorNeutralForeground1)",
+            backgroundColor: "transparent",
+            borderColor: "var(--colorNeutralStroke1)"
+          },
+          rootHovered: {
+            color: "var(--colorNeutralForeground1)",
+            backgroundColor: "transparent",
+            borderColor: "var(--colorNeutralForeground1)"
+          },
+          rootPressed: {
+            color: "var(--colorNeutralForeground1)",
+            backgroundColor: "transparent",
+            borderColor: "var(--colorNeutralForeground1)"
+          },
+          rootDisabled: {
+            backgroundColor: "transparent"
+          }
+        }} 
+        onClick={onAdd}>
         Add full text path
       </DefaultButton>
     </Stack>
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/ComputedPropertiesComponent.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/ComputedPropertiesComponent.tsx
index bb277bd21..5160a768b 100644
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ComputedPropertiesComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ComputedPropertiesComponent.tsx
@@ -116,7 +116,7 @@ export class ComputedPropertiesComponent extends React.Component<
             {unsavedEditorWarningMessage("computedProperties")}
           </MessageBar>
         )}
-        <Text style={{ marginLeft: "30px", marginBottom: "10px" }}>
+        <Text style={{ marginLeft: "30px", marginBottom: "10px", color: "var(--colorNeutralForeground1)" }}>
           <Link target="_blank" href="https://aka.ms/computed-properties-preview/">
             {"Learn more"} <FontIcon iconName="NavigateExternalInline" />
           </Link>
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/ContainerPolicyComponent.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/ContainerPolicyComponent.tsx
index 1257d4a65..2f7d23600 100644
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ContainerPolicyComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ContainerPolicyComponent.tsx
@@ -102,11 +102,57 @@ export const ContainerPolicyComponent: React.FC<ContainerPolicyComponentProps> =
 
   return (
     <div>
-      <Pivot onLinkClick={onPivotChange} selectedKey={ContainerPolicyTabTypes[selectedTab]}>
+      <Pivot 
+        onLinkClick={onPivotChange} 
+        selectedKey={ContainerPolicyTabTypes[selectedTab]}
+        styles={{
+          root: { 
+            color: "var(--colorNeutralForeground1)"
+          },
+          link: { 
+            color: "var(--colorNeutralForeground1)",
+            backgroundColor: "transparent",
+            selectors: {
+              ':hover': {
+                 color: "var(--colorNeutralForeground1)",
+                backgroundColor: "transparent"
+              },
+              ':active': {
+                 color: "var(--colorNeutralForeground1)",
+                backgroundColor: "transparent"
+              }
+            }
+          },
+          linkIsSelected: { 
+            color: "var(--colorNeutralForeground1)",
+            backgroundColor: "transparent",
+            selectors: {
+              ':before': {
+                 color: "var(--colorNeutralForeground1)",
+                backgroundColor: "var(--colorBrandForeground1)"
+              },
+              ':hover': {
+                color: "var(--colorNeutralForeground1)",
+                backgroundColor: "transparent"
+              },
+              ':active': {
+                color: "var(--colorNeutralForeground1)",
+                backgroundColor: "transparent"
+              }
+            }
+          },
+          linkContent: {
+            color: "inherit"
+          },
+          text: {
+            color: "inherit"
+          }
+        }}
+      >
         {isVectorSearchEnabled && (
           <PivotItem
             itemKey={ContainerPolicyTabTypes[ContainerPolicyTabTypes.VectorPolicyTab]}
-            style={{ marginTop: 20 }}
+            style={{ marginTop: 20, color: "var(--colorNeutralForeground1)" }}
             headerText="Vector Policy"
           >
             <Stack {...titleAndInputStackProps} styles={{ root: { position: "relative", maxWidth: "400px" } }}>
@@ -128,7 +174,7 @@ export const ContainerPolicyComponent: React.FC<ContainerPolicyComponentProps> =
         {isFullTextSearchEnabled && (
           <PivotItem
             itemKey={ContainerPolicyTabTypes[ContainerPolicyTabTypes.FullTextPolicyTab]}
-            style={{ marginTop: 20 }}
+            style={{ marginTop: 20, color: "var(--colorNeutralForeground1)" }}
             headerText="Full Text Policy"
           >
             <Stack {...titleAndInputStackProps} styles={{ root: { position: "relative", maxWidth: "400px" } }}>
@@ -144,7 +190,27 @@ export const ContainerPolicyComponent: React.FC<ContainerPolicyComponentProps> =
               ) : (
                 <DefaultButton
                   id={"create-full-text-policy"}
-                  styles={{ root: { fontSize: 12 } }}
+                  styles={{ 
+                    root: { 
+                      fontSize: 12,
+                      color: "var(--colorNeutralForeground1)",
+                      backgroundColor: "transparent",
+                      borderColor: "var(--colorNeutralForeground1)"
+                    },
+                    rootHovered: {
+                      color: "var(--colorNeutralForeground1)",
+                      backgroundColor: "transparent",
+                      borderColor: "var(--colorNeutralForeground1)"
+                    },
+                    rootPressed: {
+                      color: "var(--colorNeutralForeground1)",
+                      backgroundColor: "transparent",
+                      borderColor: "var(--colorNeutralForeground1)"
+                    },
+                    rootDisabled: {
+                      backgroundColor: "transparent"
+                    }
+                  }}
                   onClick={() => {
                     checkAndSendFullTextPolicyToSettings({
                       defaultLanguage: getFullTextLanguageOptions()[0].key as never,
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/PartitionKeyComponent.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/PartitionKeyComponent.tsx
index 7c2c42663..2a32d8c1d 100644
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/PartitionKeyComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/PartitionKeyComponent.tsx
@@ -191,7 +191,7 @@ export const PartitionKeyComponent: React.FC<PartitionKeyComponentProps> = ({
               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>
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputBucketsComponent.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputBucketsComponent.tsx
index a0b85cabf..591e1f137 100644
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputBucketsComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputBucketsComponent.tsx
@@ -65,7 +65,7 @@ export const ThroughputBucketsComponent: FC<ThroughputBucketsComponentProps> = (
 
   return (
     <Stack tokens={{ childrenGap: "m" }} styles={{ root: { width: "70%", maxWidth: 700 } }}>
-      <Label>Throughput Buckets</Label>
+      <Label styles={{ root: { color: "var(--colorNeutralForeground1)" } }}>Throughput Buckets</Label>
       <Stack>
         {throughputBuckets?.map((bucket) => (
           <Stack key={bucket.id} horizontal tokens={{ childrenGap: 8 }} verticalAlign="center">
@@ -77,7 +77,14 @@ export const ThroughputBucketsComponent: FC<ThroughputBucketsComponentProps> = (
               onChange={(newValue) => handleBucketChange(bucket.id, newValue)}
               showValue={false}
               label={`Bucket ${bucket.id}${bucket.id === 1 ? " (Data Explorer Query Bucket)" : ""}`}
-              styles={{ root: { flex: 2, maxWidth: 400 } }}
+              styles={{ 
+                root: { flex: 2, maxWidth: 400 },
+                titleLabel: { 
+                  color: bucket.maxThroughputPercentage === 100 ? 
+                    "var(--colorNeutralForeground4)" : 
+                    "var(--colorNeutralForeground1)" 
+                }
+              }}
               disabled={bucket.maxThroughputPercentage === 100}
             />
             <TextField
diff --git a/src/Explorer/Controls/ThroughputInput/CostEstimateText/CostEstimateText.tsx b/src/Explorer/Controls/ThroughputInput/CostEstimateText/CostEstimateText.tsx
index 4667a1a74..178f2f9b5 100644
--- a/src/Explorer/Controls/ThroughputInput/CostEstimateText/CostEstimateText.tsx
+++ b/src/Explorer/Controls/ThroughputInput/CostEstimateText/CostEstimateText.tsx
@@ -54,8 +54,8 @@ export const CostEstimateText: FunctionComponent<CostEstimateTextProps> = ({
 
   if (isAutoscale) {
     return (
-      <Stack style={{ marginBottom: 6 }}>
-        <Text variant="small">
+      <Stack style={{ marginBottom: 6 , color: "var(--colorNeutralForeground1)" }}>
+        <Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
           {estimatedMonthlyCost} ({currency}){iconWithEstimatedCostDisclaimer}:{" "}
           <b>
             {currencySign + calculateEstimateNumber(monthlyPrice / 10)} -{" "}
@@ -70,7 +70,7 @@ export const CostEstimateText: FunctionComponent<CostEstimateTextProps> = ({
 
   return (
     <Stack style={{ marginBottom: 8 }}>
-      <Text variant="small">
+      <Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
         Estimated cost ({currency}){iconWithEstimatedCostDisclaimer}:{" "}
         <b>
           {currencySign + calculateEstimateNumber(hourlyPrice)} hourly /{" "}
diff --git a/src/Explorer/Controls/ThroughputInput/ThroughputInput.less b/src/Explorer/Controls/ThroughputInput/ThroughputInput.less
index efcb9467a..816145a00 100644
--- a/src/Explorer/Controls/ThroughputInput/ThroughputInput.less
+++ b/src/Explorer/Controls/ThroughputInput/ThroughputInput.less
@@ -10,9 +10,13 @@
   font-size: @mediumFontSize;
   padding: 0 @LargeSpace 0 @SmallSpace;
 }
+// .throughputInputSpacing{
+//   color: "var(--colorNeutralForeground1)";
+// }
 
 .throughputInputSpacing > :not(:last-child) {
   margin-bottom: @DefaultSpace;
+  color: "var(--colorNeutralForeground1)";
 }
 
 .capacitycalculator-link:focus {
diff --git a/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx b/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
index 13a0923f3..13fddab04 100644
--- a/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
+++ b/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
@@ -193,7 +193,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
     <div className="throughputInputContainer throughputInputSpacing">
       <Stack horizontal>
         <span className="mandatoryStar">*&nbsp;</span>
-        <Text aria-label="Throughput header" variant="small" style={{ lineHeight: "20px", fontWeight: 600 }}>
+        <Text aria-label="Throughput header" variant="small" style={{ lineHeight: "20px", fontWeight: 600 , color: "var(--colorNeutralForeground1)"}}>
           {getThroughputLabelText()}
         </Text>
         <InfoTooltip>{PricingUtils.getRuToolTipText()}</InfoTooltip>
@@ -236,14 +236,14 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
 
       {isAutoscaleSelected && (
         <Stack className="throughputInputSpacing">
-          <Text style={{ marginTop: -2, fontSize: 12 }}>
+          <Text style={{ marginTop: -2, fontSize: 12 ,color: "var(--colorNeutralForeground1)" }}>
             Your container throughput will automatically scale up to the maximum value you select, from a minimum of 10%
             of that value.
           </Text>
           <Stack horizontal verticalAlign="end" tokens={{ childrenGap: 8 }}>
             <Stack tokens={{ childrenGap: 4 }}>
               <Stack horizontal verticalAlign="center" tokens={{ childrenGap: 4 }}>
-                <Text variant="small" style={{ lineHeight: "20px", fontWeight: 600 }}>
+                <Text variant="small" style={{ lineHeight: "20px", fontWeight: 600, color: "var(--colorNeutralForeground1)" }}>
                   Minimum RU/s
                 </Text>
                 <InfoTooltip>The minimum RU/s your container will scale to</InfoTooltip>
@@ -260,6 +260,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
                   display: "flex",
                   alignItems: "center",
                   justifyContent: "center",
+                  color: "var(--colorNeutralForeground1)",
                 }}
               >
                 {Math.round(throughput / 10).toString()}
@@ -272,6 +273,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
                 fontSize: 12,
                 fontWeight: 400,
                 paddingBottom: 6,
+                color: "var(--colorNeutralForeground1)"
               }}
             >
               x 10 =
@@ -279,7 +281,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
 
             <Stack tokens={{ childrenGap: 4 }}>
               <Stack horizontal verticalAlign="center" tokens={{ childrenGap: 4 }}>
-                <Text variant="small" style={{ lineHeight: "20px", fontWeight: 600 }}>
+                <Text variant="small" style={{ lineHeight: "20px", fontWeight: 600,color: "var(--colorNeutralForeground1)" }}>
                   Maximum RU/s
                 </Text>
                 <InfoTooltip>{getAutoScaleTooltip()}</InfoTooltip>
@@ -289,7 +291,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
                 type="number"
                 styles={{
                   fieldGroup: { width: 100, height: 27, flexShrink: 0 },
-                  field: { fontSize: 14, fontWeight: 400 },
+                  field: { fontSize: 14, fontWeight: 400 , color: "var(--colorNeutralForeground1)"},
                 }}
                 onChange={(_event, newInput?: string) => onThroughputValueChange(newInput)}
                 step={AutoPilotUtils.autoPilotIncrementStep}
@@ -305,7 +307,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
 
           <CostEstimateText requestUnits={throughput} isAutoscale={isAutoscaleSelected} />
           <Stack className="throughputInputSpacing">
-            <Text variant="small" aria-label="ruDescription">
+            <Text variant="small" aria-label="ruDescription"  style={{color: "var(--colorNeutralForeground1)" }}>
               Estimate your required RU/s with&nbsp;
               <Link
                 className="underlinedLink"
@@ -324,7 +326,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
 
       {!isAutoscaleSelected && (
         <Stack className="throughputInputSpacing">
-          <Text variant="small" aria-label="ruDescription">
+          <Text variant="small" aria-label="ruDescription"  style={{color: "var(--colorNeutralForeground1)" }}>
             Estimate your required RU/s with&nbsp;
             <Link
               className="underlinedLink"
@@ -337,7 +339,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
             .
           </Text>
           <Stack horizontal>
-            <Text variant="small" style={{ lineHeight: "20px", fontWeight: 600 }} aria-label="maxRUDescription">
+            <Text variant="small" style={{ lineHeight: "20px", fontWeight: 600, color: "var(--colorNeutralForeground1)" }} aria-label="maxRUDescription">
               {isDatabase ? "Database" : getCollectionName()} Required RU/s
             </Text>
             <InfoTooltip>{getAutoScaleTooltip()}</InfoTooltip>
diff --git a/src/Explorer/Menus/NotificationConsole/NotificationConsole.less b/src/Explorer/Menus/NotificationConsole/NotificationConsole.less
index fb5aed51c..3277e7234 100644
--- a/src/Explorer/Menus/NotificationConsole/NotificationConsole.less
+++ b/src/Explorer/Menus/NotificationConsole/NotificationConsole.less
@@ -30,11 +30,11 @@
         flex-shrink:0;
 
         &:hover {
-                background-color:@NotificationHigh;
+                background-color: @NotificationHigh;
         }
 
         &:active {
-                background-color:@NotificationHigh;
+                background-color: @NotificationHigh;
         }
         
         &:focus {
@@ -189,4 +189,44 @@
       }
     }
   }
+}
+
+// Dark theme specific overrides
+body.isDarkMode {
+  .notificationConsoleContainer {
+    .notificationConsoleHeader {
+      background-color: var(--colorNeutralBackground2);
+      color: var(--colorNeutralForeground1);
+      
+      &:hover {
+        background-color: var(--colorNeutralBackground3);
+        color: var(--colorNeutralForeground1);
+      }
+
+      &:active {
+        background-color: var(--colorNeutralBackground4);
+        color: var(--colorNeutralForeground1);
+      }
+    }
+
+    .notificationConsoleContents {
+      background-color: var(--colorNeutralBackground1);
+      color: var(--colorNeutralForeground1);
+
+      .clearNotificationsButton {
+        border: @ButtonBorderWidth solid var(--colorNeutralStroke1);
+
+        &:hover {
+          background-color: var(--colorNeutralBackground3);
+          color: var(--colorNeutralForeground1);
+        }
+
+        &:active {
+          border: @ButtonBorderWidth dashed var(--colorBrandForeground1);
+          background-color: var(--colorBrandBackground);
+          color: var(--colorNeutralForegroundOnBrand);
+        }
+      }
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.tsx b/src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.tsx
index 323ed1bca..c0151aae1 100644
--- a/src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.tsx
+++ b/src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.tsx
@@ -349,9 +349,14 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                         label={`Share throughput across ${getCollectionName(true).toLocaleLowerCase()}`}
                         checked={this.state.isSharedThroughputChecked}
                         styles={{
-                          text: { fontSize: 12 },
+                          text: { fontSize: 12, color: "var(--colorNeutralForeground1)" },
                           checkbox: { width: 12, height: 12 },
                           label: { padding: 0, alignItems: "center" },
+                          root: {
+                            selectors: {
+                              ':hover .ms-Checkbox-text': { color: "var(--colorNeutralForeground1)" }
+                            }
+                          }
                         }}
                         onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) =>
                           this.setState({ isSharedThroughputChecked: isChecked })
@@ -648,7 +653,27 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
               {userContext.apiType === "SQL" && (
                 <Stack className="panelGroupSpacing">
                   <DefaultButton
-                    styles={{ root: { padding: 0, width: 200, height: 30 }, label: { fontSize: 12 } }}
+                    styles={{ 
+                      root: { 
+                        padding: 0, 
+                        width: 200, 
+                        height: 30,
+                        backgroundColor: 'var(--colorNeutralBackground2)',
+                        color: 'var(--colorNeutralForeground1)',
+                        borderColor: 'var(--colorNeutralStroke1)'
+                      },
+                      rootHovered: {
+                        backgroundColor: 'var(--colorNeutralBackground3)',
+                        color: 'var(--colorNeutralForeground1)',
+                      },
+                      rootPressed: {
+                        backgroundColor: 'var(--colorBrandBackgroundPressed)',
+                        color: 'var(--colorNeutralForegroundOnBrand)',
+                      },
+                      label: { 
+                        fontSize: 12 
+                      } 
+                    }}
                     hidden={this.state.useHashV1}
                     disabled={this.state.subPartitionKeys.length >= Constants.BackendDefaults.maxNumMultiHashPartition}
                     onClick={() => this.setState({ subPartitionKeys: [...this.state.subPartitionKeys, ""] })}
@@ -656,7 +681,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                     Add hierarchical partition key
                   </DefaultButton>
                   {this.state.subPartitionKeys.length > 0 && (
-                    <Text variant="small">
+                    <Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
                       <Icon iconName="InfoSolid" className="removeIcon" tabIndex={0} /> This feature allows you to
                       partition your data with up to three levels of keys for better data distribution. Requires .NET
                       V3, Java V4 SDK, or preview JavaScript V3 SDK.{" "}
@@ -677,9 +702,14 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                 label={`Provision dedicated throughput for this ${getCollectionName().toLocaleLowerCase()}`}
                 checked={this.state.enableDedicatedThroughput}
                 styles={{
-                  text: { fontSize: 12 },
+                  text: { fontSize: 12, color: "var(--colorNeutralForeground1)" },
                   checkbox: { width: 12, height: 12 },
                   label: { padding: 0, alignItems: "center" },
+                  root: {
+                    selectors: {
+                      ':hover .ms-Checkbox-text': { color: "var(--colorNeutralForeground1)" }
+                    }
+                  }
                 }}
                 onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) =>
                   this.setState({ enableDedicatedThroughput: isChecked })
@@ -768,7 +798,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
 
               <ActionButton
                 iconProps={{ iconName: "Add" }}
-                styles={{ root: { padding: 0 }, label: { fontSize: 12 } }}
+                styles={{ root: { padding: 0 }, label: { fontSize: 12 , color: "var(--colorNeutralForeground1)"}}}
                 onClick={() => this.setState({ uniqueKeys: [...this.state.uniqueKeys, ""] })}
               >
                 Add unique key
@@ -934,9 +964,14 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                       label="Create a Wildcard Index on all fields"
                       checked={this.state.createMongoWildCardIndex}
                       styles={{
-                        text: { fontSize: 12 },
+                        text: { fontSize: 12, color: "var(--colorNeutralForeground1)" },
                         checkbox: { width: 12, height: 12 },
                         label: { padding: 0, alignItems: "center" },
+                        root: {
+                          selectors: {
+                            ':hover .ms-Checkbox-text': { color: "var(--colorNeutralForeground1)" }
+                          }
+                        }
                       }}
                       onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) =>
                         this.setState({ createMongoWildCardIndex: isChecked })
@@ -951,15 +986,20 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                       label="My application uses an older Cosmos .NET or Java SDK version (.NET V1 or Java V2)"
                       checked={this.state.useHashV1}
                       styles={{
-                        text: { fontSize: 12 },
+                        text: { fontSize: 12, color: "var(--colorNeutralForeground1)" },
                         checkbox: { width: 12, height: 12 },
                         label: { padding: 0, alignItems: "center", wordWrap: "break-word", whiteSpace: "break-spaces" },
+                        root: {
+                          selectors: {
+                            ':hover .ms-Checkbox-text': { color: "var(--colorNeutralForeground1)" }
+                          }
+                        }
                       }}
                       onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) =>
                         this.setState({ useHashV1: isChecked, subPartitionKeys: [] })
                       }
                     />
-                    <Text variant="small">
+                    <Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
                       <Icon iconName="InfoSolid" className="removeIcon" /> To ensure compatibility with older SDKs, the
                       created container will use a legacy partitioning scheme that supports partition key values of size
                       only up to 101 bytes. If this is enabled, you will not be able to use hierarchical partition keys.{" "}
diff --git a/src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.tsx b/src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.tsx
index 22532905f..b1e0d50be 100644
--- a/src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.tsx
+++ b/src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.tsx
@@ -224,9 +224,14 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
               <Checkbox
                 title="Provision shared throughput"
                 styles={{
-                  text: { fontSize: 12 },
+                  text: { fontSize: 12, color: "var(--colorNeutralForeground1)" },
                   checkbox: { width: 12, height: 12 },
                   label: { padding: 0, alignItems: "center" },
+                  root: {
+                    selectors: {
+                      ':hover .ms-Checkbox-text': { color: "var(--colorNeutralForeground1)" }
+                    }
+                  }
                 }}
                 label="Provision throughput"
                 checked={databaseCreateNewShared}
diff --git a/src/Explorer/Panes/AddGlobalSecondaryIndexPanel/Components/AdvancedComponent.tsx b/src/Explorer/Panes/AddGlobalSecondaryIndexPanel/Components/AdvancedComponent.tsx
index 17d1cb303..fee5be42f 100644
--- a/src/Explorer/Panes/AddGlobalSecondaryIndexPanel/Components/AdvancedComponent.tsx
+++ b/src/Explorer/Panes/AddGlobalSecondaryIndexPanel/Components/AdvancedComponent.tsx
@@ -32,15 +32,20 @@ export const AdvancedComponent = (props: AdvancedComponentProps): JSX.Element =>
           label="My application uses an older Cosmos .NET or Java SDK version (.NET V1 or Java V2)"
           checked={useHashV1}
           styles={{
-            text: { fontSize: 12 },
+            text: { fontSize: 12, color: "var(--colorNeutralForeground1)" },
             checkbox: { width: 12, height: 12 },
             label: { padding: 0, alignItems: "center", wordWrap: "break-word", whiteSpace: "break-spaces" },
+             root: {
+                    selectors: {
+                      ':hover .ms-Checkbox-text': { color: "var(--colorNeutralForeground1)" }
+                    }
+                  }
           }}
           onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) => {
             useHashV1CheckboxOnChange(isChecked);
           }}
         />
-        <Text variant="small">
+        <Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
           <Icon iconName="InfoSolid" className="removeIcon" /> To ensure compatibility with older SDKs, the created
           container will use a legacy partitioning scheme that supports partition key values of size only up to 101
           bytes. If this is enabled, you will not be able to use hierarchical partition keys.{" "}
diff --git a/src/Explorer/Panes/AddGlobalSecondaryIndexPanel/Components/PartitionKeyComponent.tsx b/src/Explorer/Panes/AddGlobalSecondaryIndexPanel/Components/PartitionKeyComponent.tsx
index f8f01c24b..e382e49f1 100644
--- a/src/Explorer/Panes/AddGlobalSecondaryIndexPanel/Components/PartitionKeyComponent.tsx
+++ b/src/Explorer/Panes/AddGlobalSecondaryIndexPanel/Components/PartitionKeyComponent.tsx
@@ -117,7 +117,7 @@ export const PartitionKeyComponent = (props: PartitionKeyComponentProps): JSX.El
           Add hierarchical partition key
         </DefaultButton>
         {subPartitionKeys.length > 0 && (
-          <Text variant="small">
+          <Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
             <Icon iconName="InfoSolid" className="removeIcon" tabIndex={0} /> This feature allows you to partition your
             data with up to three levels of keys for better data distribution. Requires .NET V3, Java V4 SDK, or preview
             JavaScript V3 SDK.{" "}
diff --git a/src/Explorer/Panes/ChangePartitionKeyPane/ChangePartitionKeyPane.tsx b/src/Explorer/Panes/ChangePartitionKeyPane/ChangePartitionKeyPane.tsx
index 7d619b995..fbe5f8a1a 100644
--- a/src/Explorer/Panes/ChangePartitionKeyPane/ChangePartitionKeyPane.tsx
+++ b/src/Explorer/Panes/ChangePartitionKeyPane/ChangePartitionKeyPane.tsx
@@ -135,7 +135,7 @@ export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
   return (
     <RightPaneForm formError={formError} isExecuting={isExecuting} onSubmit={submit} submitButtonText="OK">
       <Stack tokens={{ childrenGap: 10 }} className="panelMainContent">
-        <Text variant="small">
+        <Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
           When changing a container’s partition key, you will need to create a destination container with the correct
           partition key. You may also select an existing destination container.&nbsp;
           <Link
@@ -346,7 +346,7 @@ export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
                   Add hierarchical partition key
                 </DefaultButton>
                 {subPartitionKeys.length > 0 && (
-                  <Text variant="small">
+                  <Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
                     <Icon iconName="InfoSolid" className="removeIcon" tabIndex={0} /> This feature allows you to
                     partition your data with up to three levels of keys for better data distribution. Requires .NET V3,
                     Java V4 SDK, or preview JavaScript V3 SDK.{" "}
diff --git a/src/Explorer/Panes/LoadQueryPane/LoadQueryPane.tsx b/src/Explorer/Panes/LoadQueryPane/LoadQueryPane.tsx
index 6ace63e2e..3a8dc1ee6 100644
--- a/src/Explorer/Panes/LoadQueryPane/LoadQueryPane.tsx
+++ b/src/Explorer/Panes/LoadQueryPane/LoadQueryPane.tsx
@@ -94,7 +94,14 @@ export const LoadQueryPane: FunctionComponent = (): JSX.Element => {
               value={selectedFileName}
               autoFocus
               readOnly
-              styles={{ fieldGroup: { width: 300 } }}
+              styles={{ 
+                fieldGroup: { width: 300, color: "var(--colorNeutralForeground1)" },
+                subComponentStyles: {
+                  label: {
+                    root: { color: "var(--colorNeutralForeground1)" }
+                  }
+                }
+              }}
             />
             <label htmlFor="importQueryInputId" className="customFileUpload">
               <Image {...imageProps} src={folderIcon} alt="upload files" />
diff --git a/src/Explorer/Panes/PanelComponent.less b/src/Explorer/Panes/PanelComponent.less
index a42580737..c7d42e6fa 100644
--- a/src/Explorer/Panes/PanelComponent.less
+++ b/src/Explorer/Panes/PanelComponent.less
@@ -37,18 +37,18 @@
 
     .panelTextField {
       font-size: @mediumFontSize;
-      border: 1px solid var(--colorNeutralStroke1, #605e5c);
+      border: 1px solid var(--colorNeutralStroke1);
       color: var(--colorNeutralForeground1);
-      background-color: var(--colorNeutralBackground2, @BaseLight);
+      background-color: var(--colorNeutralBackground2);
       padding: 4px 10px;
       width: @newCollectionPaneInputWidth;
 
       &::placeholder {
-        color: var(--colorNeutralForeground3, @BaseMediumHigh);
+        color: var(--colorNeutralForeground3);
       }
 
       &:focus {
-        border-color: var(--colorCompoundBrandStroke1, @SelectionColor);
+        border-color: var(--colorCompoundBrandStroke1);
         outline: none;
       }
     }
@@ -60,7 +60,7 @@
     .panelRadioBtnLabel {
       font-size: @mediumFontSize;
       padding: 0 @LargeSpace 0 @SmallSpace;
-      color: var(--colorNeutralForeground1, @BaseHigh);
+      color: var(--colorNeutralForeground1);
     }
 
     .panelSectionSpinner {
@@ -70,47 +70,42 @@
       transform: translate(-50%, -50%);
     }
 
-    // Override Fluent UI component styles to use theme variables
     .ms-Dropdown {
       .ms-Dropdown-title {
-        background-color: var(--colorNeutralBackground2, @BaseLight);
-        border-color: var(--colorNeutralStroke1, #605e5c);
-        color: var(--colorNeutralForeground1, @BaseHigh);
+        background-color: var(--colorNeutralBackground2);
+        border-color: var(--colorNeutralStroke1);
+        color: var(--colorNeutralForeground1);
       }
 
       .ms-Dropdown-caretDownWrapper {
-        color: var(--colorNeutralForeground1, @BaseHigh);
+        color: var(--colorNeutralForeground1);
       }
     }
 
     .ms-Checkbox {
       .ms-Checkbox-label {
-        color: var(--colorNeutralForeground1, @BaseHigh);
+        color: var(--colorNeutralForeground1);
       }
     }
 
     .ms-TextField {
       .ms-TextField-fieldGroup {
-        background-color: var(--colorNeutralBackground2, @BaseLight);
-        border-color: var(--colorNeutralStroke1, #605e5c);
+        background-color: var(--colorNeutralBackground2);
+        border-color: var(--colorNeutralStroke1);
       }
 
       .ms-TextField-field {
-        background-color: var(--colorNeutralBackground2, @BaseLight);
-        color: var(--colorNeutralForeground1, @BaseHigh);
+        background-color: var(--colorNeutralBackground2);
+        color: var(--colorNeutralForeground1);
 
         &::placeholder {
-          color: var(--colorNeutralForeground3, @BaseMediumHigh);
+          color: var(--colorNeutralForeground3);
         }
       }
     }
 
     .ms-Text {
-      color: var(--colorNeutralForeground1, @BaseHigh);
-    }
-
-    span, label {
-      color: var(--colorNeutralForeground1, @BaseHigh);
+      color: var(--colorNeutralForeground1);
     }
   }
 
@@ -124,14 +119,14 @@
 }
 
 .panelHeader {
-  color: var(--colorNeutralForeground1, @BaseDark);
+  color: var(--colorNeutralForeground1);
   font-size: @largeFontSize;
   font-weight: 400;
 }
 
 .panelInfoErrorContainer {
-  background-color: var(--colorNeutralBackground3, @BaseLow);
-  color: var(--colorNeutralForeground1, @BaseHigh);
+  background-color: var(--colorNeutralBackground3);
+  color: var(--colorNeutralForeground1);
   padding: @DefaultSpace;
   display: inline-flex;
   margin: 20px 34px 0 34px;
@@ -143,15 +138,15 @@
   }
 
   .panelWarningIcon {
-    color: var(--colorPaletteYellowForeground1, @WarningIconColor);
+    color: var(--colorPaletteYellowForeground1);
   }
 
   .panelErrorIcon {
-    color: var(--colorPaletteRedForeground1, @ErrorIconColor);
+    color: var(--colorPaletteRedForeground1);
   }
 
   .panelLargeInfoIcon {
-    color: var(--colorBrandForeground1, @InfoIconColor);
+    color: var(--colorBrandForeground1);
   }
 
   .panelWarningErrorDetailsLinkContainer {
@@ -160,22 +155,22 @@
     padding-left: @MediumSpace;
 
     .paneErrorLink {
-      color: var(--colorBrandForeground1, @LinkColor);
+      color: var(--colorBrandForeground1);
       cursor: pointer;
       font-size: @mediumFontSize;
     }
 
     .panelWarningErrorMessage {
-      color: var(--colorNeutralForeground1, @BaseHigh);
+      color: var(--colorNeutralForeground1);
     }
   }
 }
 
 .panelFooter {
   padding: 16px 34px;
-  border-top: solid 1px var(--colorNeutralStroke1, #bbbbbb);
-  background-color: var(--colorNeutralBackground1, @BaseLight);
-  color: var(--colorNeutralForeground1, @BaseHigh);
+  border-top: solid 1px var(--colorNeutralStroke1);
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
 
   & button {
     height: 30px;
@@ -197,7 +192,7 @@
 
 .addRemoveIcon [alt="editEntity"]:focus,
 .addRemoveIconLabel [alt="editEntity"]:focus {
-  border: 1px dashed var(--colorNeutralStroke1, #605e5c);
+  border: 1px dashed var(--colorNeutralStroke1);
   outline: none;
 }
 
@@ -240,7 +235,7 @@
 }
 
 .removeIcon {
-  color: @InfoIconColor;
+  color: "var(--colorNeutralForeground1)";
 }
 
 .backImageIcon {
@@ -248,7 +243,7 @@
 }
 
 [alt="back"]:focus {
-  border: 1px solid var(--colorCompoundBrandStroke1, @SelectionColor);
+  border: 1px solid var(--colorCompoundBrandStroke1);
   outline: none;
 }
 
@@ -296,4 +291,5 @@
   .ms-Panel-overlay {
     background-color: var(--overlayBackground);
   }
-}
\ No newline at end of file
+}
+
diff --git a/src/Explorer/Panes/SaveQueryPane/SaveQueryPane.tsx b/src/Explorer/Panes/SaveQueryPane/SaveQueryPane.tsx
index b7c43a08f..7c11087a9 100644
--- a/src/Explorer/Panes/SaveQueryPane/SaveQueryPane.tsx
+++ b/src/Explorer/Panes/SaveQueryPane/SaveQueryPane.tsx
@@ -147,7 +147,16 @@ export const SaveQueryPane: FunctionComponent<SaveQueryPaneProps> = ({
       <div className="panelFormWrapper" style={{ flexGrow: 1 }}>
         <div className="panelMainContent">
           {!isSaveQueryEnabled() ? (
-            <Text variant="small">{setupSaveQueriesText}</Text>
+            <Text 
+              variant="small" 
+              styles={{ 
+                root: { 
+                  color: 'var(--colorNeutralForeground1)',
+                } 
+              }}
+            >
+              {setupSaveQueriesText}
+            </Text>
           ) : (
             <TextField
               id="saveQueryInput"
diff --git a/src/Main.tsx b/src/Main.tsx
index 25e186df6..f96fb68d0 100644
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -64,6 +64,7 @@ import "./Shared/appInsights";
 import { useConfig } from "./hooks/useConfig";
 import { useKnockoutExplorer } from "./hooks/useKnockoutExplorer";
 import { isDarkMode } from "./hooks/useTheme";
+import "./less/DarkModeMenus.less";
 import "./less/ThemeSystem.less";
 // Initialize icons before React is loaded
 initializeIcons(undefined, { disableWarnings: true });
@@ -124,11 +125,8 @@ const App = (): JSX.Element => {
             }}
           >
             <div id="freeTierTeachingBubble"> </div>
-            {/* Main Command Bar - Start */}
             <CommandBar container={explorer} />
-            {/* Collections Tree and Tabs - Begin */}
             <SidebarContainer explorer={explorer} />
-            {/* Collections Tree and Tabs - End */}
             <div
               className="dataExplorerErrorConsoleContainer"
               role="contentinfo"
@@ -155,21 +153,17 @@ const App = (): JSX.Element => {
 };
 
 const Root: React.FC = () => {
-  // Force dark theme
   const currentTheme = isDarkMode ? webDarkTheme : webLightTheme;
 
-  // Apply theme to body for Fluent UI v8 components
   useEffect(() => {
     if (isDarkMode) {
       document.body.classList.add("isDarkMode");
       document.body.style.backgroundColor = "var(--colorNeutralBackground1)";
       document.body.style.color = "var(--colorNeutralForeground1)";
-      // loadTheme(appThemeFabric);
     } else {
       document.body.classList.remove("isDarkMode");
       document.body.style.backgroundColor = "";
       document.body.style.color = "";
-      // loadTheme(appThemeFabric);
     }
   }, [isDarkMode]);
 
diff --git a/src/less/DarkModeMenus.less b/src/less/DarkModeMenus.less
new file mode 100644
index 000000000..ea80f298d
--- /dev/null
+++ b/src/less/DarkModeMenus.less
@@ -0,0 +1,57 @@
+
+body.isDarkMode {
+  .ms-Callout.ms-ContextualMenu-Callout {
+    --bodyBackgroundColor: var(--colorNeutralBackground1);
+    --bodyTextColor: var(--colorNeutralForeground1);
+    
+    .ms-Callout-main {
+      background-color: var(--colorNeutralBackground1);
+    }
+  }
+  
+  .ms-ContextualMenu-container,
+  .ms-ContextualMenu-list,
+  .ms-ContextualMenu-list.is-open {
+    background-color: var(--colorNeutralBackground1);
+  }
+  
+  .ms-ContextualMenu-item {
+    background-color: var(--colorNeutralBackground1);
+  }
+  
+  .ms-ContextualMenu-link {
+    color: var(--colorNeutralForeground1);
+    background-color: var(--colorNeutralBackground1);
+    
+    &:hover, &:focus {
+      background-color: var(--colorNeutralBackground3);
+    }
+  }
+  
+  .ms-ContextualMenu-itemText {
+    color: var(--colorNeutralForeground1);
+  }
+  
+  .ms-ContextualMenu-icon {
+    color: var(--colorNeutralForeground1);
+  }
+}
+
+body.isDarkMode {
+  .fui-MenuPopover {
+    background-color: var(--colorNeutralBackground1);
+  }
+  
+  .fui-MenuList {
+    background-color: var(--colorNeutralBackground1);
+  }
+  
+  .fui-MenuItem {
+    color: var(--colorNeutralForeground1);
+    background-color: var(--colorNeutralBackground1);
+    
+    &:hover, &:focus {
+      background-color: var(--colorNeutralBackground3);
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/less/ThemeSystem.less b/src/less/ThemeSystem.less
index 42b280daf..63f72a30c 100644
--- a/src/less/ThemeSystem.less
+++ b/src/less/ThemeSystem.less
@@ -7,6 +7,7 @@
   --colorNeutralForeground1: @BaseHigh;
   --colorNeutralForeground2: @BaseMediumHigh;
   --colorNeutralForeground3: @BaseMedium;
+  --colorNeutralForeground4: @BaseLow;
   --colorNeutralStroke1: @BaseMedium;
   --colorCompoundBrandStroke1: @SelectionColor;
   --colorBrandForeground1: @LinkColor;
@@ -26,6 +27,7 @@ body.isDarkMode {
   --colorNeutralForeground1: #ffffff;
   --colorNeutralForeground2: #d2d2d2;
   --colorNeutralForeground3: #a0a0a0;
+  --colorNeutralForeground4: #6e6e6e;
   --colorNeutralStroke1: #484848;
   --colorCompoundBrandStroke1: #4db6e8;
   --colorBrandForeground1: #4db6e8;
@@ -39,31 +41,31 @@ body.isDarkMode {
 
 // Theme Mixins
 .theme-background() {
-  background-color: var(--colorNeutralBackground1, @BaseLight);
-  color: var(--colorNeutralForeground1, @BaseHigh);
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
 }
 
 .theme-surface() {
-  background-color: var(--colorNeutralBackground2, @BaseLow);
-  color: var(--colorNeutralForeground1, @BaseHigh);
+  background-color: var(--colorNeutralBackground2);
+  color: var(--colorNeutralForeground1);
 }
 
 .theme-border() {
-  border-color: var(--colorNeutralStroke1, @BaseMedium);
+  border-color: var(--colorNeutralStroke1);
 }
 
 .theme-input() {
-  background-color: var(--colorNeutralBackground2, @BaseLow);
-  color: var(--colorNeutralForeground1, @BaseHigh);
-  border: 1px solid var(--colorNeutralStroke1, @BaseMedium);
+  background-color: var(--colorNeutralBackground2);
+  color: var(--colorNeutralForeground1);
+  border: 1px solid var(--colorNeutralStroke1);
 
   &::placeholder {
-    color: var(--colorNeutralForeground3, @BaseMedium);
+    color: var(--colorNeutralForeground3);
   }
 
   &:focus,
   &:focus-within {
-    border-color: var(--colorCompoundBrandStroke1, @SelectionColor);
+    border-color: var(--colorCompoundBrandStroke1);
     outline: none;
   }
 }
@@ -72,21 +74,8 @@ body.isDarkMode {
   .ms-TextField {
     .ms-TextField-fieldGroup {
       &:focus-within {
-        border-color: var(--colorCompoundBrandStroke1, @SelectionColor) ;
+        border-color: var(--colorCompoundBrandStroke1) ;
       }
     }
   }
 }
-
-.theme-panel() {
-  .theme-background();
-  .theme-border();
-}
-
-:global {
-  .ms-Fabric--isFocusVisible .ms-Button:focus::after,
-  .ms-Fabric--isFocusVisible .ms-TextField:focus::after,
-  .ms-Fabric--isFocusVisible *[data-is-focusable="true"]:focus::after {
-    border-color: var(--colorCompoundBrandStroke1, @SelectionColor) ;
-  }
-}