From 8eade71456e0e4f35068b9dcbb856231b281a3a1 Mon Sep 17 00:00:00 2001
From: Sakshi Gupta <sakshig@microsoft.com>
Date: Fri, 2 Jan 2026 14:36:42 +0530
Subject: [PATCH] dark mode for header

---
 less/hostedexplorer.less                      | 91 +++++++++++++++++++
 src/HostedExplorer.tsx                        | 25 +++++
 .../Hosted/Components/AccountSwitcher.tsx     | 14 +--
 .../Hosted/Components/SwitchAccount.tsx       |  3 -
 .../Hosted/Components/SwitchSubscription.tsx  |  3 -
 5 files changed, 124 insertions(+), 12 deletions(-)

diff --git a/less/hostedexplorer.less b/less/hostedexplorer.less
index a3de43b5a..d9da52aad 100644
--- a/less/hostedexplorer.less
+++ b/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;
diff --git a/src/HostedExplorer.tsx b/src/HostedExplorer.tsx
index d5c27c2df..5cf7fd1c9 100644
--- a/src/HostedExplorer.tsx
+++ b/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);
diff --git a/src/Platform/Hosted/Components/AccountSwitcher.tsx b/src/Platform/Hosted/Components/AccountSwitcher.tsx
index dfff7fe5c..9a0689f3f 100644
--- a/src/Platform/Hosted/Components/AccountSwitcher.tsx
+++ b/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
     },
   ];
 
+  const menuProps: IContextualMenuProps = {
+    directionalHintFixed: true,
+    className: "accountSwitchContextualMenu",
+    items,
+  };
+
   return (
     <DefaultButton
       text={buttonText}
-      menuProps={{
-        directionalHintFixed: true,
-        className: "accountSwitchContextualMenu",
-        items,
-      }}
+      menuProps={menuProps}
       styles={buttonStyles}
       className="accountSwitchButton"
       id="accountSwitchButton"
diff --git a/src/Platform/Hosted/Components/SwitchAccount.tsx b/src/Platform/Hosted/Components/SwitchAccount.tsx
index ef195ee07..e9a95ef4a 100644
--- a/src/Platform/Hosted/Components/SwitchAccount.tsx
+++ b/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",
-      }}
     />
   );
 };
diff --git a/src/Platform/Hosted/Components/SwitchSubscription.tsx b/src/Platform/Hosted/Components/SwitchSubscription.tsx
index c784c5f5b..564de70a0 100644
--- a/src/Platform/Hosted/Components/SwitchSubscription.tsx
+++ b/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",
-      }}
     />
   );
 };