diff --git a/public/app/core/components/AppChrome/AppChrome.tsx b/public/app/core/components/AppChrome/AppChrome.tsx
index bc132207698..43ed6700e4c 100644
--- a/public/app/core/components/AppChrome/AppChrome.tsx
+++ b/public/app/core/components/AppChrome/AppChrome.tsx
@@ -231,7 +231,7 @@ const getStyles = (theme: GrafanaTheme2, headerLevels: number, headerHeight: num
       zIndex: theme.zIndex.navbarFixed,
       left: 0,
       right: 0,
-      background: theme.colors.background.primary,
+      background: theme.colors.background.canvas,
       flexDirection: 'column',
     }),
     topNavMenuDocked: css({
diff --git a/public/app/core/components/AppChrome/MegaMenu/MegaMenuHeader.tsx b/public/app/core/components/AppChrome/MegaMenu/MegaMenuHeader.tsx
index fb44b927f7a..d4e7b151135 100644
--- a/public/app/core/components/AppChrome/MegaMenu/MegaMenuHeader.tsx
+++ b/public/app/core/components/AppChrome/MegaMenu/MegaMenuHeader.tsx
@@ -69,6 +69,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
   header: css({
     alignItems: 'center',
     borderBottom: `1px solid ${theme.colors.border.weak}`,
+    background: theme.colors.background.canvas,
     display: 'flex',
     gap: theme.spacing(1),
     justifyContent: 'space-between',