diff --git a/src/public/app/layouts/desktop_layout.js b/src/public/app/layouts/desktop_layout.js
index 8d0a667a1..ab8a6d452 100644
--- a/src/public/app/layouts/desktop_layout.js
+++ b/src/public/app/layouts/desktop_layout.js
@@ -124,6 +124,7 @@ export default class DesktopLayout {
             .optChild(launcherPaneIsHorizontal, launcherPane)
             .child(new FlexContainer('row')
                 .css("flex-grow", "1")
+                .id("horizontal-main-container")
                 .optChild(!launcherPaneIsHorizontal, launcherPane)
                 .child(new LeftPaneContainer()
                     .optChild(!launcherPaneIsHorizontal, new QuickSearchWidget())
diff --git a/src/public/stylesheets/theme-next.css b/src/public/stylesheets/theme-next.css
index f7cf991d8..58bf0bf19 100644
--- a/src/public/stylesheets/theme-next.css
+++ b/src/public/stylesheets/theme-next.css
@@ -424,6 +424,10 @@ body.background-effects #launcher-pane .launcher-button {
     background-color: transparent;
 }
 
+body.background-effects #horizontal-main-container {
+    background-color: var(--root-background);
+}
+
 /* Matches when the left pane is collapsed */
 :has(#left-pane.hidden-int) {
     --center-pane-border-radius: 0;