From 26459459b4d2bc2fbff64d9f6d7e76c775f6060a Mon Sep 17 00:00:00 2001
From: Arthur Belleville <arthur.belleville@datadoghq.com>
Date: Sat, 21 Feb 2026 17:10:17 +0100
Subject: [PATCH] Match TopBar dark mode background to navbar color

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 apps/main/src/components/TopBar.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/main/src/components/TopBar.tsx b/apps/main/src/components/TopBar.tsx
index 22d6f64..0596e3c 100644
--- a/apps/main/src/components/TopBar.tsx
+++ b/apps/main/src/components/TopBar.tsx
@@ -170,7 +170,7 @@ function NotificationDropdown() {
         <Button
           variant="ghost"
           size="icon"
-          className="relative w-10 h-10 border border-[#EAECF0] rounded-[8px] text-[#0C111D] hover:bg-gray-100"
+          className="relative w-10 h-10 border border-[#EAECF0] dark:border-gray-700 rounded-[8px] text-[#0C111D] dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800"
           aria-label="Notifications"
         >
           <BellIcon className="w-5 h-5" />
@@ -252,7 +252,7 @@ function ProfileDropdown() {
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <button
-          className="flex items-center gap-2 p-1 hover:bg-gray-100 rounded-[8px]"
+          className="flex items-center gap-2 p-1 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-[8px]"
           aria-label="Profile menu"
         >
           <Avatar className="w-10 h-10">
@@ -341,16 +341,16 @@ export function TopBar() {
   };
 
   return (
-    <header className="h-[75px] flex items-center justify-between px-6 gap-4 border-b border-[#EAECF0] bg-white shrink-0">
+    <header className="h-[75px] flex items-center justify-between px-6 gap-4 border-b border-[#EAECF0] dark:border-gray-700 bg-white dark:bg-navbar-background shrink-0">
       <div className="relative flex-1 max-w-sm">
-        <SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" />
+        <SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 dark:text-gray-500 pointer-events-none" />
         <input
           type="text"
           placeholder="Search..."
           value={isSearchRoute ? searchQuery : ""}
           onChange={isSearchRoute ? handleSearchChange : undefined}
           readOnly={!isSearchRoute}
-          className="w-full pl-9 pr-4 py-2 bg-transparent border border-[#EAECF0] rounded-lg text-sm text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary"
+          className="w-full pl-9 pr-4 py-2 bg-transparent border border-[#EAECF0] dark:border-gray-700 rounded-lg text-sm text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary dark:bg-gray-800/50"
         />
       </div>
       <div className="flex items-center gap-3">