Dark theme for Explorer (#2185)

* First dark theme commits for command bar

* Updated theme on sidebar

* Updated tabs, sidebar, splash screen

* settings theme changes

* Dark theme applied to Monaco editor

* Dark theme to stored procedures

* Fixed sidebar scroll

* Updated scroll issue in sidebar

* Command bar items fixed

* Fixed lint errors

* fixed lint errors

* settings side panel fixed

* Second last iteration for css

* Fixed all the issues of css

* Updated the theme icon for now on DE to change the theme from portal/DE itself

* Formatting issue resolved

* Remove CloudShellTerminalComponent changes - revert to master version

* Fixed test issue

* Fixed formatting issue

* Fix tests: update snapshots and revert xterm imports for compatibility

* Fix xterm imports in CloudShellTerminalComponent to use @xterm packages

* Fix Cloud Shell component imports for compatibility

* Update test snapshots

* Fix xterm package consistency across all CloudShell components

* Fix TypeScript compilation errors in CloudShell components and query Documents

- Standardized xterm package imports across CloudShell components to use legacy 'xterm' package
- Fixed Terminal type compatibility issues in CommonUtils.tsx
- Added type casting for enableQueryControl property in queryDocuments.ts to handle Azure Cosmos SDK interface limitations
- Applied code formatting to ensure consistency

* Update failing snapshot tests

- Updated TreeNodeComponent snapshot tests for loading states
- Updated ThroughputInputAutoPilotV3Component snapshots for number formatting changes (10,00,000 -> 1,000,000)
- All snapshot tests now pass

* Fixed test issue

* Fixed test issue

* Updated the buttons for theme

* Updated the Theme changes based on portal theme changes

* Updated review comments

* Updated the duplicate code and fixed the fabric react error

* Few places styling added and resolving few comments

* Fixed errors

* Fixed comments

* Fixed comments

* Fixed comments

* Fixed full text policy issue for mongoru accounts

* Resolved comments for class Name and few others

* Added css for homepage in ru accounts

* Final commit with all the feedback issues resolved

* Lint error resolved

* Updated the review comments and few Ui issues

* Resolved review comments and changed header bg and active state color

* Moved svg code to different file and imported

* css fixed for the hpome page boxed for ru account

* Lint errors

* Fixed boxes issue in ru accounts

* Handled the initial theme from the portal

* Updated snap

* Update snapshots for TreeNodeComponent and CreateCopyJobScreensProvider tests

* Fix duplicate DataExplorerRoot test id causing Playwright strict mode violation

* Fix locale-dependent number formatting in ThroughputInputAutoPilotV3Component

---------

Co-authored-by: Sakshi Gupta <sakshig+microsoft@microsoft.com>
Co-authored-by: Sakshi Gupta <sakshig@microsoft.com>

src/Explorer/Menus/CommandBar/CommandBarComponent.less

@@ -4,11 +4,10 @@
   padding: @SmallSpace 0px @SmallSpace 0px;
   .flex-display();
   span {
-    border-left: @ButtonBorderWidth solid @BaseMediumHigh;
     margin: 0 10px 0 10px;
   }
 }
 
 .commandBarContainer {
-  border-bottom: 1px solid @BaseMedium;
+  border-bottom: 1px solid var(--colorNeutralStroke1);
 }

src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx

@@ -4,6 +4,7 @@
  * and update any knockout observables passed from the parent.
  */
 import { CommandBar as FluentCommandBar, ICommandBarItemProps } from "@fluentui/react";
+import { makeStyles, useFluent } from "@fluentui/react-components";
 import { useNotebook } from "Explorer/Notebook/useNotebook";
 import { useDataPlaneRbac } from "Explorer/Panes/SettingsPane/SettingsPane";
 import { KeyboardActionGroup, useKeyboardActionGroup } from "KeyboardShortcuts";
@@ -12,7 +13,6 @@ import { userContext } from "UserContext";
 import * as React from "react";
 import create, { UseStore } from "zustand";
 import { ConnectionStatusType, PoolIdType } from "../../../Common/Constants";
-import { StyleConstants } from "../../../Common/StyleConstants";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import Explorer from "../../Explorer";
 import { useSelectedNode } from "../../useSelectedNode";
@@ -37,12 +37,49 @@ export const useCommandBar: UseStore<CommandBarStore> = create((set) => ({
   setIsHidden: (isHidden: boolean) => set((state) => ({ ...state, isHidden })),
 }));
 
+const useStyles = makeStyles({
+  commandBarContainer: {
+    borderBottom: "1px solid var(--colorNeutralStroke1)",
+    // backgroundColor: "var(--colorNeutralBackground1)",
+  },
+  toolbarButton: {
+    backgroundColor: "transparent",
+    "&:hover": {
+      backgroundColor: "var(--colorNeutralBackground2)",
+    },
+    "&:active": {
+      backgroundColor: "var(--colorNeutralBackground3)",
+    },
+  },
+  buttonIcon: {
+    width: "16px",
+    height: "16px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    "& img": {
+      width: "100%",
+      height: "100%",
+      objectFit: "contain",
+    },
+  },
+});
+
 export const CommandBar: React.FC<Props> = ({ container }: Props) => {
   const selectedNodeState = useSelectedNode();
   const buttons = useCommandBar((state) => state.contextButtons);
   const isHidden = useCommandBar((state) => state.isHidden);
-  const backgroundColor = StyleConstants.BaseLight;
+  // targetDocument is used by referenced components
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { targetDocument } = useFluent();
   const setKeyboardHandlers = useKeyboardActionGroup(KeyboardActionGroup.COMMAND_BAR);
+  const styles = useStyles();
+
+  const { connectionInfo, isPhoenixNotebooks, isPhoenixFeatures } = useNotebook((state) => ({
+    connectionInfo: state.connectionInfo,
+    isPhoenixNotebooks: state.isPhoenixNotebooks,
+    isPhoenixFeatures: state.isPhoenixFeatures,
+  }));
 
   // Subscribe to the store changes that affect button creation
   const dataPlaneRbacEnabled = useDataPlaneRbac((state) => state.dataPlaneRbacEnabled);
@@ -59,12 +96,15 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
         ? CommandBarComponentButtonFactory.createPostgreButtons(container)
         : CommandBarComponentButtonFactory.createVCoreMongoButtons(container);
     return (
-      <div className="commandBarContainer" style={{ display: isHidden ? "none" : "initial" }}>
+      <div className={styles.commandBarContainer} style={{ display: isHidden ? "none" : "initial" }}>
         <FluentCommandBar
           ariaLabel="Use left and right arrow keys to navigate between commands"
-          items={CommandBarUtil.convertButton(buttons, backgroundColor)}
+          items={CommandBarUtil.convertButton(buttons, "var(--colorNeutralBackground1)")}
           styles={{
-            root: { backgroundColor: backgroundColor },
+            root: {
+              backgroundColor: "var(--colorNeutralBackground1)",
+              color: "var(--colorNeutralForeground1)",
+            },
           }}
           overflowButtonProps={{ ariaLabel: "More commands" }}
         />
@@ -77,50 +117,69 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
   );
   const controlButtons = CommandBarComponentButtonFactory.createControlCommandBarButtons(container);
 
-  const uiFabricStaticButtons = CommandBarUtil.convertButton(staticButtons, backgroundColor);
+  const uiFabricStaticButtons = CommandBarUtil.convertButton(staticButtons, "var(--colorNeutralBackground1)");
   if (buttons && buttons.length > 0) {
     uiFabricStaticButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
   }
 
-  const uiFabricTabsButtons: ICommandBarItemProps[] = CommandBarUtil.convertButton(contextButtons, backgroundColor);
+  const uiFabricTabsButtons: ICommandBarItemProps[] = CommandBarUtil.convertButton(
+    contextButtons,
+    "var(--colorNeutralBackground1)",
+  );
 
   if (uiFabricTabsButtons.length > 0) {
     uiFabricStaticButtons.push(CommandBarUtil.createDivider("commandBarDivider"));
   }
 
-  const uiFabricControlButtons = CommandBarUtil.convertButton(controlButtons, backgroundColor);
+  const uiFabricControlButtons = CommandBarUtil.convertButton(controlButtons, "var(--colorNeutralBackground1)");
   uiFabricControlButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
 
-  const connectionInfo = useNotebook((state) => state.connectionInfo);
-
-  if (
-    (useNotebook.getState().isPhoenixNotebooks || useNotebook.getState().isPhoenixFeatures) &&
-    connectionInfo?.status !== ConnectionStatusType.Connect
-  ) {
+  // Add connection status if needed (using the hook values we got at the top level)
+  if ((isPhoenixNotebooks || isPhoenixFeatures) && connectionInfo?.status !== ConnectionStatusType.Connect) {
     uiFabricControlButtons.unshift(
       CommandBarUtil.createConnectionStatus(container, PoolIdType.DefaultPoolId, "connectionStatus"),
     );
   }
 
-  const rootStyle = isFabric()
-    ? {
-        root: {
-          backgroundColor: "transparent",
-          padding: "2px 8px 0px 8px",
+  const rootStyle = {
+    root: {
+      backgroundColor: "var(--colorNeutralBackground1)",
+      color: "var(--colorNeutralForeground1)",
+      padding: isFabric() ? "2px 8px 0px 8px" : undefined,
+    },
+    button: {
+      backgroundColor: "var(--colorNeutralBackground1)",
+      color: "var(--colorNeutralForeground1)",
+      selectors: {
+        ":hover": {
+          backgroundColor: "var(--colorNeutralBackground2)",
+          color: "var(--colorNeutralForeground1)",
         },
-      }
-    : {
-        root: {
-          backgroundColor: backgroundColor,
+        ":active": {
+          backgroundColor: "var(--colorNeutralBackground3)",
+          color: "var(--colorNeutralForeground1)",
         },
-      };
+      },
+    },
+    menuIcon: {
+      color: "var(--colorNeutralForeground1)",
+    },
+    item: {
+      backgroundColor: "var(--colorNeutralBackground1)",
+      color: "var(--colorNeutralForeground1)",
+    },
+    link: {
+      backgroundColor: "var(--colorNeutralBackground1)",
+      color: "var(--colorNeutralForeground1)",
+    },
+  };
 
   const allButtons = staticButtons.concat(contextButtons).concat(controlButtons);
   const keyboardHandlers = CommandBarUtil.createKeyboardHandlers(allButtons);
   setKeyboardHandlers(keyboardHandlers);
 
   return (
-    <div className="commandBarContainer" style={{ display: isHidden ? "none" : "initial" }}>
+    <div className={styles.commandBarContainer} style={{ display: isHidden ? "none" : "initial" }}>
       <FluentCommandBar
         ariaLabel="Use left and right arrow keys to navigate between commands"
         items={uiFabricStaticButtons.concat(uiFabricTabsButtons)}

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -1,3 +1,4 @@
+import { OpenFullScreen } from "Explorer/OpenFullScreen";
 import { KeyboardAction } from "KeyboardShortcuts";
 import { isDataplaneRbacSupported } from "Utils/APITypeUtils";
 import * as React from "react";
@@ -24,12 +25,12 @@ import { useSidePanel } from "../../../hooks/useSidePanel";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import Explorer from "../../Explorer";
 import { useNotebook } from "../../Notebook/useNotebook";
-import { OpenFullScreen } from "../../OpenFullScreen";
 import { BrowseQueriesPane } from "../../Panes/BrowseQueriesPane/BrowseQueriesPane";
 import { LoadQueryPane } from "../../Panes/LoadQueryPane/LoadQueryPane";
 import { SettingsPane, useDataPlaneRbac } from "../../Panes/SettingsPane/SettingsPane";
 import { useDatabases } from "../../useDatabases";
 import { SelectedNodeState, useSelectedNode } from "../../useSelectedNode";
+import { ThemeToggleButton } from "./ThemeToggleButton";
 
 let counter = 0;
 
@@ -166,6 +167,7 @@ export function createContextCommandBarButtons(
 
 export function createControlCommandBarButtons(container: Explorer): CommandButtonComponentProps[] {
   const buttons: CommandButtonComponentProps[] = [
+    ThemeToggleButton(),
     {
       iconSrc: SettingsIcon,
       iconAlt: "Settings",
@@ -361,6 +363,22 @@ export function createScriptCommandButtons(selectedNodeState: SelectedNodeState)
       disabled:
         useSelectedNode.getState().isQueryCopilotCollectionSelected() ||
         selectedNodeState.isDatabaseNodeOrNoneSelected(),
+      styles: {
+        root: {
+          backgroundColor: "var(--colorNeutralBackground1)",
+          color: "var(--colorNeutralForeground1)",
+          selectors: {
+            ":hover": {
+              backgroundColor: "var(--colorNeutralBackground1Hover)",
+              color: "var(--colorNeutralForeground1Hover)",
+            },
+            ":active": {
+              backgroundColor: "var(--colorNeutralBackground1Pressed)",
+              color: "var(--colorNeutralForeground1Pressed)",
+            },
+          },
+        },
+      },
     };
     buttons.push(newStoredProcedureBtn);
   }
@@ -381,6 +399,22 @@ export function createScriptCommandButtons(selectedNodeState: SelectedNodeState)
       disabled:
         useSelectedNode.getState().isQueryCopilotCollectionSelected() ||
         selectedNodeState.isDatabaseNodeOrNoneSelected(),
+      styles: {
+        root: {
+          backgroundColor: "var(--colorNeutralBackground1)",
+          color: "var(--colorNeutralForeground1)",
+          selectors: {
+            ":hover": {
+              backgroundColor: "var(--colorNeutralBackground1Hover)",
+              color: "var(--colorNeutralForeground1Hover)",
+            },
+            ":active": {
+              backgroundColor: "var(--colorNeutralBackground1Pressed)",
+              color: "var(--colorNeutralForeground1Pressed)",
+            },
+          },
+        },
+      },
     };
     buttons.push(newUserDefinedFunctionBtn);
   }
@@ -401,6 +435,22 @@ export function createScriptCommandButtons(selectedNodeState: SelectedNodeState)
       disabled:
         useSelectedNode.getState().isQueryCopilotCollectionSelected() ||
         selectedNodeState.isDatabaseNodeOrNoneSelected(),
+      styles: {
+        root: {
+          backgroundColor: "var(--colorNeutralBackground1)",
+          color: "var(--colorNeutralForeground1)",
+          selectors: {
+            ":hover": {
+              backgroundColor: "var(--colorNeutralBackground1Hover)",
+              color: "var(--colorNeutralForeground1Hover)",
+            },
+            ":active": {
+              backgroundColor: "var(--colorNeutralBackground1Pressed)",
+              color: "var(--colorNeutralForeground1Pressed)",
+            },
+          },
+        },
+      },
     };
     buttons.push(newTriggerBtn);
   }

src/Explorer/Menus/CommandBar/CommandBarUtil.tsx

@@ -53,7 +53,7 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
       const result: ICommandBarItemProps = {
         iconProps: {
           style: {
-            width: StyleConstants.CommandBarIconWidth, // 16
+            width: StyleConstants.CommandBarIconWidth,
             alignSelf: btn.iconName ? "baseline" : undefined,
             filter: getFilter(btn.disabled),
           },
@@ -79,7 +79,7 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
         "data-test": `CommandBar/Button:${label}`,
         buttonStyles: {
           root: {
-            backgroundColor: backgroundColor,
+            backgroundColor: "var(--colorNeutralBackground1)",
             height: buttonHeightPx,
             paddingRight: 0,
             paddingLeft: 0,
@@ -87,15 +87,29 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
             minWidth: 24,
             marginLeft: isSplit ? 0 : 5,
             marginRight: isSplit ? 0 : 5,
+            color: "var(--colorNeutralForeground1)",
+            selectors: {
+              "&:hover": {
+                backgroundColor: "var(--colorNeutralBackground1Hover)",
+                color: "var(--colorNeutralForeground1)",
+              },
+              "&:active": {
+                backgroundColor: "var(--colorNeutralBackground1Pressed)",
+                color: "var(--colorNeutralForeground1)",
+              },
+            },
           },
           rootDisabled: {
-            backgroundColor: backgroundColor,
+            backgroundColor: "var(--colorNeutralBackground1)",
             pointerEvents: "auto",
+            color: "var(--colorNeutralForegroundDisabled)",
           },
           splitButtonMenuButton: {
-            backgroundColor: backgroundColor,
+            backgroundColor: "var(--colorNeutralBackground1)",
             selectors: {
-              ":hover": { backgroundColor: hoverColor },
+              ":hover": {
+                backgroundColor: "var(--colorNeutralBackground1Hover)",
+              },
             },
             width: 16,
           },
@@ -104,13 +118,22 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
               configContext.platform == Platform.Fabric
                 ? StyleConstants.DefaultFontSize
                 : StyleConstants.mediumFontSize,
+            color: "var(--colorNeutralForeground1)",
+          },
+          rootHovered: {
+            backgroundColor: "var(--colorNeutralBackground1Hover)",
+            color: "var(--colorNeutralForeground1)",
+          },
+          rootPressed: {
+            backgroundColor: "var(--colorNeutralBackground1Pressed)",
+            color: "var(--colorNeutralForeground1)",
           },
-          rootHovered: { backgroundColor: hoverColor },
-          rootPressed: { backgroundColor: hoverColor },
           splitButtonMenuButtonExpanded: {
-            backgroundColor: StyleConstants.AccentExtra,
+            backgroundColor: "var(--colorNeutralBackground1Pressed)",
             selectors: {
-              ":hover": { backgroundColor: hoverColor },
+              ":hover": {
+                backgroundColor: "var(--colorNeutralBackground1Hover)",
+              },
             },
           },
           splitButtonDivider: {
@@ -119,6 +142,7 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
           icon: {
             paddingLeft: 0,
             paddingRight: 0,
+            color: "var(--colorNeutralForeground1)",
           },
           splitButtonContainer: {
             marginLeft: 5,

src/Explorer/Menus/CommandBar/ThemeToggleButton.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import MoonIcon from "../../../../images/MoonIcon.svg";
+import SunIcon from "../../../../images/SunIcon.svg";
+import { useThemeStore } from "../../../hooks/useTheme";
+import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
+
+export const ThemeToggleButton = (): CommandButtonComponentProps => {
+  const [darkMode, setDarkMode] = React.useState(useThemeStore.getState().isDarkMode);
+
+  React.useEffect(() => {
+    const unsubscribe = useThemeStore.subscribe((state) => {
+      setDarkMode(state.isDarkMode);
+    });
+    return unsubscribe;
+  }, []);
+
+  const tooltipText = darkMode ? "Switch to Light Theme" : "Switch to Dark Theme";
+
+  return {
+    iconSrc: darkMode ? SunIcon : MoonIcon,
+    iconAlt: "Theme Toggle",
+    onCommandClick: useThemeStore.getState().toggleTheme,
+    commandButtonLabel: undefined,
+    ariaLabel: tooltipText,
+    tooltipText: tooltipText,
+    hasPopup: false,
+    disabled: false,
+  };
+};

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);
+        }
+      }
+    }
+  }
 }

src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx

@@ -152,6 +152,82 @@ export class NotificationConsoleComponent extends React.Component<
                 selectedKey={this.state.selectedFilter}
                 options={NotificationConsoleComponent.FilterOptions}
                 onChange={this.onFilterSelected.bind(this)}
+                styles={{
+                  root: {
+                    color: "var(--colorNeutralForeground1)",
+                  },
+                  label: {
+                    color: "var(--colorNeutralForeground1)",
+                  },
+                  dropdown: {
+                    backgroundColor: "var(--colorNeutralBackground2)",
+                    borderColor: "var(--colorNeutralStroke1)",
+                    color: "var(--colorNeutralForeground1)",
+                  },
+                  title: {
+                    backgroundColor: "var(--colorNeutralBackground2)",
+                    color: "var(--colorNeutralForeground1)",
+                    borderColor: "var(--colorNeutralStroke1)",
+                    fontSize: "14px",
+                    selectors: {
+                      "&:hover": {
+                        backgroundColor: "var(--colorNeutralBackground3)",
+                        color: "var(--colorNeutralForeground1)",
+                        borderColor: "var(--colorNeutralStroke1)",
+                      },
+                      "&:focus": {
+                        backgroundColor: "var(--colorNeutralBackground2)",
+                        color: "var(--colorNeutralForeground1)",
+                        borderColor: "var(--colorBrandStroke1)",
+                      },
+                      "&:after": {
+                        borderColor: "var(--colorNeutralStroke1)",
+                      },
+                      span: {
+                        color: "var(--colorNeutralForeground1)",
+                      },
+                    },
+                  },
+                  caretDown: {
+                    color: "var(--colorNeutralForeground1)",
+                  },
+                  callout: {
+                    backgroundColor: "var(--colorNeutralBackground2)",
+                    border: "1px solid var(--colorNeutralStroke1)",
+                  },
+                  dropdownItems: {
+                    backgroundColor: "var(--colorNeutralBackground2)",
+                  },
+                  dropdownItem: {
+                    backgroundColor: "transparent",
+                    color: "var(--colorNeutralForeground1)",
+                    selectors: {
+                      "&:hover": {
+                        backgroundColor: "var(--colorNeutralBackground4)",
+                        color: "var(--colorNeutralForeground1)",
+                      },
+                      "&:focus": {
+                        backgroundColor: "var(--colorNeutralBackground4)",
+                        color: "var(--colorNeutralForeground1)",
+                      },
+                      ".ms-Dropdown-optionText": {
+                        color: "var(--colorNeutralForeground1)",
+                      },
+                    },
+                  },
+                  dropdownItemSelected: {
+                    backgroundColor: "var(--colorBrandBackground)",
+                    color: "var(--colorNeutralForegroundOnBrand)",
+                    selectors: {
+                      ".ms-Dropdown-optionText": {
+                        color: "var(--colorNeutralForegroundOnBrand)",
+                      },
+                    },
+                  },
+                  dropdownOptionText: {
+                    color: "var(--colorNeutralForeground1)",
+                  },
+                }}
               />
               <span className="consoleSplitter" />
               <span

src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap

@@ -152,6 +152,84 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
             ]
           }
           selectedKey="All"
+          styles={
+            {
+              "callout": {
+                "backgroundColor": "var(--colorNeutralBackground2)",
+                "border": "1px solid var(--colorNeutralStroke1)",
+              },
+              "caretDown": {
+                "color": "var(--colorNeutralForeground1)",
+              },
+              "dropdown": {
+                "backgroundColor": "var(--colorNeutralBackground2)",
+                "borderColor": "var(--colorNeutralStroke1)",
+                "color": "var(--colorNeutralForeground1)",
+              },
+              "dropdownItem": {
+                "backgroundColor": "transparent",
+                "color": "var(--colorNeutralForeground1)",
+                "selectors": {
+                  "&:focus": {
+                    "backgroundColor": "var(--colorNeutralBackground4)",
+                    "color": "var(--colorNeutralForeground1)",
+                  },
+                  "&:hover": {
+                    "backgroundColor": "var(--colorNeutralBackground4)",
+                    "color": "var(--colorNeutralForeground1)",
+                  },
+                  ".ms-Dropdown-optionText": {
+                    "color": "var(--colorNeutralForeground1)",
+                  },
+                },
+              },
+              "dropdownItemSelected": {
+                "backgroundColor": "var(--colorBrandBackground)",
+                "color": "var(--colorNeutralForegroundOnBrand)",
+                "selectors": {
+                  ".ms-Dropdown-optionText": {
+                    "color": "var(--colorNeutralForegroundOnBrand)",
+                  },
+                },
+              },
+              "dropdownItems": {
+                "backgroundColor": "var(--colorNeutralBackground2)",
+              },
+              "dropdownOptionText": {
+                "color": "var(--colorNeutralForeground1)",
+              },
+              "label": {
+                "color": "var(--colorNeutralForeground1)",
+              },
+              "root": {
+                "color": "var(--colorNeutralForeground1)",
+              },
+              "title": {
+                "backgroundColor": "var(--colorNeutralBackground2)",
+                "borderColor": "var(--colorNeutralStroke1)",
+                "color": "var(--colorNeutralForeground1)",
+                "fontSize": "14px",
+                "selectors": {
+                  "&:after": {
+                    "borderColor": "var(--colorNeutralStroke1)",
+                  },
+                  "&:focus": {
+                    "backgroundColor": "var(--colorNeutralBackground2)",
+                    "borderColor": "var(--colorBrandStroke1)",
+                    "color": "var(--colorNeutralForeground1)",
+                  },
+                  "&:hover": {
+                    "backgroundColor": "var(--colorNeutralBackground3)",
+                    "borderColor": "var(--colorNeutralStroke1)",
+                    "color": "var(--colorNeutralForeground1)",
+                  },
+                  "span": {
+                    "color": "var(--colorNeutralForeground1)",
+                  },
+                },
+              },
+            }
+          }
         />
         <span
           className="consoleSplitter"
@@ -338,6 +416,84 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
             ]
           }
           selectedKey="All"
+          styles={
+            {
+              "callout": {
+                "backgroundColor": "var(--colorNeutralBackground2)",
+                "border": "1px solid var(--colorNeutralStroke1)",
+              },
+              "caretDown": {
+                "color": "var(--colorNeutralForeground1)",
+              },
+              "dropdown": {
+                "backgroundColor": "var(--colorNeutralBackground2)",
+                "borderColor": "var(--colorNeutralStroke1)",
+                "color": "var(--colorNeutralForeground1)",
+              },
+              "dropdownItem": {
+                "backgroundColor": "transparent",
+                "color": "var(--colorNeutralForeground1)",
+                "selectors": {
+                  "&:focus": {
+                    "backgroundColor": "var(--colorNeutralBackground4)",
+                    "color": "var(--colorNeutralForeground1)",
+                  },
+                  "&:hover": {
+                    "backgroundColor": "var(--colorNeutralBackground4)",
+                    "color": "var(--colorNeutralForeground1)",
+                  },
+                  ".ms-Dropdown-optionText": {
+                    "color": "var(--colorNeutralForeground1)",
+                  },
+                },
+              },
+              "dropdownItemSelected": {
+                "backgroundColor": "var(--colorBrandBackground)",
+                "color": "var(--colorNeutralForegroundOnBrand)",
+                "selectors": {
+                  ".ms-Dropdown-optionText": {
+                    "color": "var(--colorNeutralForegroundOnBrand)",
+                  },
+                },
+              },
+              "dropdownItems": {
+                "backgroundColor": "var(--colorNeutralBackground2)",
+              },
+              "dropdownOptionText": {
+                "color": "var(--colorNeutralForeground1)",
+              },
+              "label": {
+                "color": "var(--colorNeutralForeground1)",
+              },
+              "root": {
+                "color": "var(--colorNeutralForeground1)",
+              },
+              "title": {
+                "backgroundColor": "var(--colorNeutralBackground2)",
+                "borderColor": "var(--colorNeutralStroke1)",
+                "color": "var(--colorNeutralForeground1)",
+                "fontSize": "14px",
+                "selectors": {
+                  "&:after": {
+                    "borderColor": "var(--colorNeutralStroke1)",
+                  },
+                  "&:focus": {
+                    "backgroundColor": "var(--colorNeutralBackground2)",
+                    "borderColor": "var(--colorBrandStroke1)",
+                    "color": "var(--colorNeutralForeground1)",
+                  },
+                  "&:hover": {
+                    "backgroundColor": "var(--colorNeutralBackground3)",
+                    "borderColor": "var(--colorNeutralStroke1)",
+                    "color": "var(--colorNeutralForeground1)",
+                  },
+                  "span": {
+                    "color": "var(--colorNeutralForeground1)",
+                  },
+                },
+              },
+            }
+          }
         />
         <span
           className="consoleSplitter"