diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss
index 9791be902f4..bef7ddc4507 100644
--- a/res/css/structures/_RoomSubList.scss
+++ b/res/css/structures/_RoomSubList.scss
@@ -152,7 +152,7 @@ limitations under the License.
     &.mx_IndicatorScrollbar_topOverflow::before {
         top: 0;
         transition: background-image 0.1s ease-in;
-        background: linear-gradient(to top, rgba(242,245,248,0), rgba(242,245,248,1));
+        background: linear-gradient(to top, rgba(242,245,248,0), $header-panel-bg-color);
     }
 
 /*
diff --git a/res/css/views/rooms/_RoomBreadcrumbs.scss b/res/css/views/rooms/_RoomBreadcrumbs.scss
index ba4aec3b6e7..296850c2666 100644
--- a/res/css/views/rooms/_RoomBreadcrumbs.scss
+++ b/res/css/views/rooms/_RoomBreadcrumbs.scss
@@ -36,7 +36,7 @@ limitations under the License.
         top: 0;
         right: 0;
         height: 100%;
-        background: linear-gradient(to right, rgba(242,245,248,0), rgba(242,245,248,1));
+        background: linear-gradient(to right, rgba(242,245,248,0), $header-panel-bg-color);
     }
 
     .mx_RoomBreadcrumbs_animate {
diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss
index 9911f30d7ba..fa83a0bdfb5 100644
--- a/res/themes/light/css/_light.scss
+++ b/res/themes/light/css/_light.scss
@@ -11,6 +11,7 @@ $font-family: 'Nunito', Arial, Helvetica, Sans-Serif;
 $accent-color: #03b381;
 $notice-primary-color: #ff4b55;
 $notice-secondary-color: #61708b;
+$header-panel-bg-color: #f2f5f8;
 
 // typical text (dark-on-white in light skin)
 $primary-fg-color: #454545;