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 96cedb03..331eb582 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 7612c681..cc725822 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 2928917f..a74d9f46 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;