diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss
index 96cedb034c..331eb582ea 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss
@@ -22,9 +22,7 @@ limitations under the License.
     flex-direction: column;
     justify-content: center;
     display: flex;
-
-    /* For welcome pages */
-    background-color: #f7f7f7;
+    background-color: $preview-bar-bg-color;
     -webkit-align-items: center;
 }
 
diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss
index 7612c68144..cc725822f6 100644
--- a/src/skins/vector/css/themes/_base.scss
+++ b/src/skins/vector/css/themes/_base.scss
@@ -18,6 +18,8 @@ $selection-fg-color: $primary-bg-color;
 // red warning colour
 $warning-color: #ff0064;
 
+$preview-bar-bg-color: #f7f7f7;
+
 // left-panel style muted accent color
 $secondary-accent-color: #eaf5f0;
 
diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss
index 2928917f29..a74d9f4685 100644
--- a/src/skins/vector/css/themes/_dark.scss
+++ b/src/skins/vector/css/themes/_dark.scss
@@ -18,6 +18,8 @@ $selection-fg-color: $primary-fg-color;
 // red warning colour
 $warning-color: #ff0064;
 
+$preview-bar-bg-color: #333;
+
 // left-panel style muted accent color
 $secondary-accent-color: $primary-bg-color;