second last iteration for css

src/Explorer/Controls/Dialog.tsx

@@ -179,8 +179,18 @@ export const Dialog: FC = () => {
       title,
       subText,
       styles: {
-        title: { fontSize: DIALOG_TITLE_FONT_SIZE, fontWeight: DIALOG_TITLE_FONT_WEIGHT },
-        subText: { fontSize: DIALOG_SUBTEXT_FONT_SIZE },
+        title: { 
+          fontSize: DIALOG_TITLE_FONT_SIZE, 
+          fontWeight: DIALOG_TITLE_FONT_WEIGHT,
+        },
+        subText: { 
+          fontSize: DIALOG_SUBTEXT_FONT_SIZE,
+          color: 'var(--colorNeutralForeground2)'
+        },
+        content: {
+          backgroundColor: 'var(--colorNeutralBackground1)',
+          color: 'var(--colorNeutralForeground1)'
+        }
       },
       showCloseButton: showCloseButton || false,
       onDismiss,
@@ -188,18 +198,60 @@ export const Dialog: FC = () => {
     modalProps: { isBlocking: isModal, isDarkOverlay: false },
     minWidth: DIALOG_MIN_WIDTH,
     maxWidth: DIALOG_MAX_WIDTH,
+    styles: {
+      main: {
+        backgroundColor: 'var(--colorNeutralBackground1)',
+        selectors: {
+          '.ms-Dialog-title': { color: 'var(--colorNeutralForeground1)' },
+        }
+      }
+    }
   };
 
   const primaryButtonProps: IButtonProps = {
     text: primaryButtonText,
     disabled: primaryButtonDisabled || false,
     onClick: onPrimaryButtonClick,
+    styles: {
+      root: {
+        backgroundColor: "var(--colorBrandBackground)",
+        color: "var(--colorNeutralForegroundOnBrand)",
+        selectors: {
+          ":hover": {
+            backgroundColor: "var(--colorBrandBackgroundHover)",
+            color: "var(--colorNeutralForegroundOnBrand)",
+          },
+          ":active": {
+            backgroundColor: "var(--colorBrandBackgroundPressed)",
+            color: "var(--colorNeutralForegroundOnBrand)",
+          },
+        },
+      },
+    },
   };
   const secondaryButtonProps: IButtonProps =
     secondaryButtonText && onSecondaryButtonClick
       ? {
           text: secondaryButtonText,
           onClick: onSecondaryButtonClick,
+          styles: {
+            root: {
+              backgroundColor: "var(--colorNeutralBackground2)",
+              color: "var(--colorNeutralForeground1)",
+              borderColor: "var(--colorNeutralStroke1)",
+              selectors: {
+                ":hover": {
+                  backgroundColor: "var(--colorNeutralBackground3)",
+                  color: "var(--colorNeutralForeground1)",
+                },
+                ":active": {
+                  backgroundColor: "var(--colorNeutralBackground3)",
+                  color: "var(--colorNeutralForeground1)",
+                  borderColor: "var(--colorCompoundBrandStroke1)",
+                },
+              },
+            },
+          },
         }
       : undefined;
   return visible ? (

src/Explorer/Controls/Settings/SettingsRenderUtils.tsx

@@ -525,18 +525,12 @@ export const getTextFieldStyles = (current: isDirtyTypes, baseline: isDirtyTypes
         backgroundColor: "var(--colorNeutralBackground1)",
         borderColor: StyleConstants.BaseMediumHigh,
       },
-      "input": {
-        color: "var(--colorNeutralForeground1)",
-      },
       "input#autopilotInput": {
         backgroundColor: "var(--colorNeutralBackground4)",
         color: "var(--colorNeutralForeground1)",
       },
     },
   },
-  field: {
-    color: "var(--colorNeutralForeground1)",
-  },
 
   subComponentStyles: {
     label: {

src/Explorer/Controls/ThroughputInput/ThroughputInput.less

@@ -35,7 +35,7 @@
     .ms-TextField {
       .ms-TextField-fieldGroup {
         &:focus-within {
-          border-color: var(--colorCompoundBrandStroke1, @SelectionColor) !important;
+          border-color: var(--colorCompoundBrandStroke1, @SelectionColor);
         }
       }
     }

src/Explorer/Panes/SettingsPane/SettingsPane.tsx

@@ -1248,8 +1248,12 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
                   selectors: {
                     ":hover": {
                       backgroundColor: "var(--colorBrandBackgroundHover)",
-                      color: "var(--colorNeutralForegroundOnBrand)",
+                      color: "var(--colorNeutralForegroundOnBrand)"
                     },
+                    ":active": {
+                      backgroundColor: "var(--colorBrandBackgroundPressed)",
+                      color: "var(--colorNeutralForegroundOnBrand)"
+                    }
                   },
                 },
               }}

src/less/ThemeSystem.less

@@ -12,6 +12,10 @@
   --colorBrandForeground1: @LinkColor;
   --colorPaletteRedForeground1: @ErrorColor;
   --overlayBackground: rgba(0, 0, 0, 0.4);
+  --colorBrandBackground: @SelectionColor;
+  --colorBrandBackgroundHover: @AccentMediumHigh;
+  --colorBrandBackgroundPressed: @AccentMedium;
+  --colorNeutralForegroundOnBrand: @BaseLight;
 }
 
 // Dark theme variables
@@ -27,6 +31,10 @@ body.isDarkMode {
   --colorBrandForeground1: #4db6e8;
   --colorPaletteRedForeground1: #f25d5d;
   --overlayBackground: rgba(0, 0, 0, 0.4);
+  --colorBrandBackground: #0078d4;
+  --colorBrandBackgroundHover: #106ebe;
+  --colorBrandBackgroundPressed: #005a9e;
+  --colorNeutralForegroundOnBrand: #ffffff;
 }
 
 // Theme Mixins