dark mode for header

less/hostedexplorer.less

@@ -17,6 +17,38 @@
     position: fixed;
     top: -200px;
 }
+body.isDarkMode .ms-Layer {
+    .ms-Callout-main {
+        background-color: @BaseHigh !important;
+    }
+
+    .ms-Callout-beak {
+        background-color: @BaseHigh !important;
+    }
+
+    .ms-ContextualMenu {
+        background-color: @BaseHigh !important;
+    }
+
+    .ms-Dropdown-items {
+        background-color: @BaseHigh !important;
+    }
+
+    .ms-Dropdown-item {
+        background-color: @BaseHigh !important;
+        color: @BaseLight !important;
+
+        &:hover {
+            background-color: @BaseMediumHigh !important;
+            color: @BaseLight !important;
+        }
+
+        &.is-selected {
+            background-color: @BaseMediumHigh !important;
+            color: @BaseLight !important;
+        }
+    }
+}
 
 html {
     font-family: wf_segoe-ui_normal, "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
@@ -129,6 +161,65 @@ body {
         }
     }
 
+    &.isDarkMode .accountSwitchContextualMenu {
+        background-color: @BaseHigh;
+
+        .ms-Callout-main {
+            background-color: @BaseHigh;
+        }
+
+        .ms-ContextualMenu-item {
+            background-color: @BaseHigh;
+        }
+
+        .ms-Dropdown {
+            .ms-Dropdown-title {
+                background-color: @BaseDark;
+                color: @BaseLight;
+                border-color: @BaseMediumHigh;
+            }
+
+            .ms-Dropdown-caretDownWrapper {
+                color: @BaseLight;
+            }
+
+            &:hover .ms-Dropdown-title {
+                background-color: @BaseHigh;
+                color: @BaseLight;
+                border-color: @BaseMedium;
+            }
+        }
+
+        .ms-Label {
+            color: @BaseLight;
+        }
+    }
+
+    &.isDarkMode .ms-Dropdown-callout {
+        .ms-Callout-main {
+            background-color: @BaseHigh;
+        }
+
+        .ms-Dropdown-items {
+            background-color: @BaseHigh;
+        }
+
+        .ms-Dropdown-item {
+            background-color: @BaseHigh;
+            color: @BaseLight;
+
+            &:hover {
+                background-color: @BaseMediumHigh;
+                color: @BaseLight;
+            }
+
+            &.is-selected {
+                background-color: @BaseMediumHigh;
+                color: @BaseLight;
+            }
+        }
+    }
+
     .fixedleftpane {
         background: @BaseLow;
         height: 100vh;

src/HostedExplorer.tsx

@@ -1,5 +1,6 @@
 import { initializeIcons } from "@fluentui/react";
 import { useBoolean } from "@fluentui/react-hooks";
+import { MessageTypes } from "Contracts/MessageTypes";
 import { AadAuthorizationFailure } from "Platform/Hosted/Components/AadAuthorizationFailure";
 import * as React from "react";
 import { render } from "react-dom";
@@ -21,9 +22,33 @@ import "./Shared/appInsights";
 import { useAADAuth } from "./hooks/useAADAuth";
 import { useConfig } from "./hooks/useConfig";
 import { useTokenMetadata } from "./hooks/usePortalAccessToken";
+import { THEME_MODE_DARK, useThemeStore } from "./hooks/useTheme";
 
 initializeIcons();
 
+if (typeof window !== "undefined") {
+  window.addEventListener("message", (event) => {
+    const messageData = event.data?.data || event.data;
+    const messageType = messageData?.type;
+
+    if (messageType === MessageTypes.UpdateTheme) {
+      const themeData = messageData?.params?.theme || messageData?.theme;
+      if (themeData && themeData.mode !== undefined) {
+        const isDark = themeData.mode === THEME_MODE_DARK;
+        useThemeStore.setState({
+          isDarkMode: isDark,
+          themeMode: themeData.mode,
+        });
+        if (isDark) {
+          document.body.classList.add("isDarkMode");
+        } else {
+          document.body.classList.remove("isDarkMode");
+        }
+      }
+    }
+  });
+}
+
 const App: React.FunctionComponent = () => {
   // For handling encrypted portal tokens sent via query paramter
   const params = new URLSearchParams(window.location.search);

src/Platform/Hosted/Components/AccountSwitcher.tsx

@@ -1,7 +1,7 @@
 // TODO: Renable this rule for the file or turn it off everywhere
 /* eslint-disable react/display-name */
 
-import { DefaultButton, IButtonStyles, IContextualMenuItem } from "@fluentui/react";
+import { DefaultButton, IButtonStyles, IContextualMenuItem, IContextualMenuProps } from "@fluentui/react";
 import * as React from "react";
 import { FunctionComponent, useEffect, useState } from "react";
 import { StyleConstants } from "../../../Common/StyleConstants";
@@ -92,14 +92,16 @@ export const AccountSwitcher: FunctionComponent<Props> = ({ armToken, setDatabas
     },
   ];
 
-  return (
+  const menuProps: IContextualMenuProps = {
-    <DefaultButton
-      text={buttonText}
-      menuProps={{
     directionalHintFixed: true,
     className: "accountSwitchContextualMenu",
     items,
-      }}
+  };
+
+  return (
+    <DefaultButton
+      text={buttonText}
+      menuProps={menuProps}
       styles={buttonStyles}
       className="accountSwitchButton"
       id="accountSwitchButton"

src/Platform/Hosted/Components/SwitchAccount.tsx

@@ -31,9 +31,6 @@ export const SwitchAccount: FunctionComponent<Props> = ({
       }}
       defaultSelectedKey={selectedAccount?.name}
       placeholder={accounts && accounts.length === 0 ? "No Accounts Found" : "Select an Account"}
-      styles={{
-        callout: "accountSwitchAccountDropdownMenu",
-      }}
     />
   );
 };

src/Platform/Hosted/Components/SwitchSubscription.tsx

@@ -30,9 +30,6 @@ export const SwitchSubscription: FunctionComponent<Props> = ({
       }}
       defaultSelectedKey={selectedSubscription?.subscriptionId}
       placeholder={subscriptions && subscriptions.length === 0 ? "No Subscriptions Found" : "Select a Subscription"}
-      styles={{
-        callout: "accountSwitchSubscriptionDropdownMenu",
-      }}
     />
   );
 };