diff --git a/res/css/_common.scss b/res/css/_common.scss
index fa925eba5b..7439b36218 100644
--- a/res/css/_common.scss
+++ b/res/css/_common.scss
@@ -53,7 +53,7 @@ html {
 body {
     font-family: $font-family;
     font-size: $font-15px;
-    background-color: $primary-bg-color;
+    background-color: $background;
     color: $primary-fg-color;
     border: 0px;
     margin: 0px;
@@ -209,7 +209,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
     :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
     .mx_textinput {
         color: $input-darker-fg-color;
-        background-color: $primary-bg-color;
+        background-color: $background;
         border: none;
     }
 }
@@ -271,7 +271,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
 }
 
 .mx_Dialog {
-    background-color: $primary-bg-color;
+    background-color: $background;
     color: $light-fg-color;
     z-index: 4012;
     font-weight: 300;
@@ -489,7 +489,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
     border: 1px solid $input-border-color;
     padding: 9px;
     color: $primary-fg-color;
-    background-color: $primary-bg-color;
+    background-color: $background;
 }
 
 .mx_textButton {
diff --git a/res/css/structures/_GroupFilterPanel.scss b/res/css/structures/_GroupFilterPanel.scss
index 444435dd57..6ff4fb5c3e 100644
--- a/res/css/structures/_GroupFilterPanel.scss
+++ b/res/css/structures/_GroupFilterPanel.scss
@@ -75,7 +75,7 @@ limitations under the License.
 }
 
 .mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected_prototype {
-    background-color: $primary-bg-color;
+    background-color: $background;
     border-radius: 6px;
 }
 
diff --git a/res/css/structures/_MatrixChat.scss b/res/css/structures/_MatrixChat.scss
index a220c5d505..b660a6446c 100644
--- a/res/css/structures/_MatrixChat.scss
+++ b/res/css/structures/_MatrixChat.scss
@@ -67,7 +67,7 @@ limitations under the License.
 
 /* not the left panel, and not the resize handle, so the roomview/groupview/... */
 .mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle) {
-    background-color: $primary-bg-color;
+    background-color: $background;
 
     flex: 1 1 0;
     min-width: 0;
diff --git a/res/css/structures/_NotificationPanel.scss b/res/css/structures/_NotificationPanel.scss
index d271cd2bcc..be2cbaef1d 100644
--- a/res/css/structures/_NotificationPanel.scss
+++ b/res/css/structures/_NotificationPanel.scss
@@ -118,7 +118,7 @@ limitations under the License.
 }
 
 .mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line {
-    background-color: $primary-bg-color;
+    background-color: $background;
 }
 
 .mx_NotificationPanel .mx_EventTile_content {
diff --git a/res/css/structures/_RightPanel.scss b/res/css/structures/_RightPanel.scss
index 3222fe936c..5316cba61d 100644
--- a/res/css/structures/_RightPanel.scss
+++ b/res/css/structures/_RightPanel.scss
@@ -43,7 +43,7 @@ limitations under the License.
 .mx_RightPanel_headerButtonGroup {
     height: 100%;
     display: flex;
-    background-color: $primary-bg-color;
+    background-color: $background;
     padding: 0 9px;
     align-items: center;
 }
diff --git a/res/css/structures/_RoomStatusBar.scss b/res/css/structures/_RoomStatusBar.scss
index de9e049165..89cb8c0ba3 100644
--- a/res/css/structures/_RoomStatusBar.scss
+++ b/res/css/structures/_RoomStatusBar.scss
@@ -27,7 +27,7 @@ limitations under the License.
 
 .mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_image {
     margin-right: -12px;
-    border: 1px solid $primary-bg-color;
+    border: 1px solid $background;
 }
 
 .mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_initial {
@@ -39,7 +39,7 @@ limitations under the License.
     display: inline-block;
     color: #acacac;
     background-color: #ddd;
-    border: 1px solid $primary-bg-color;
+    border: 1px solid $background;
     border-radius: 40px;
     width: 24px;
     height: 24px;
diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss
index 831f186ed4..cc61b65d96 100644
--- a/res/css/structures/_RoomView.scss
+++ b/res/css/structures/_RoomView.scss
@@ -40,7 +40,7 @@ limitations under the License.
 
     pointer-events: none;
 
-    background-color: $primary-bg-color;
+    background-color: $background;
     opacity: 0.95;
 
     position: absolute;
@@ -87,7 +87,7 @@ limitations under the License.
     left: 0;
     right: 0;
     z-index: 3000;
-    background-color: $primary-bg-color;
+    background-color: $background;
 }
 
 .mx_RoomView_auxPanel_hiddenHighlights {
@@ -161,7 +161,7 @@ limitations under the License.
     flex: 0 0 auto;
 
     max-height: 0px;
-    background-color: $primary-bg-color;
+    background-color: $background;
     z-index: 1000;
     overflow: hidden;
 
@@ -246,7 +246,7 @@ hr.mx_RoomView_myReadMarker {
 }
 
 .mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner {
-    background-color: $primary-bg-color;
+    background-color: $background;
 }
 
 .mx_RoomView_callStatusBar .mx_UploadBar_uploadFilename {
diff --git a/res/css/structures/_SpaceRoomDirectory.scss b/res/css/structures/_SpaceRoomDirectory.scss
index 88e6a3f494..d251e48947 100644
--- a/res/css/structures/_SpaceRoomDirectory.scss
+++ b/res/css/structures/_SpaceRoomDirectory.scss
@@ -160,7 +160,7 @@ limitations under the License.
         height: 16px;
         width: 16px;
         border-radius: 4px;
-        background-color: $primary-bg-color;
+        background-color: $background;
 
         &::before {
             content: '';
diff --git a/res/css/views/auth/_AuthButtons.scss b/res/css/views/auth/_AuthButtons.scss
index 8deb0f80ac..3a2ad2adf8 100644
--- a/res/css/views/auth/_AuthButtons.scss
+++ b/res/css/views/auth/_AuthButtons.scss
@@ -39,7 +39,7 @@ limitations under the License.
     min-width: 80px;
 
     background-color: $accent-color;
-    color: $primary-bg-color;
+    color: $background;
 
     cursor: pointer;
 
diff --git a/res/css/views/context_menus/_StatusMessageContextMenu.scss b/res/css/views/context_menus/_StatusMessageContextMenu.scss
index fceb7fba34..1a97fb56c7 100644
--- a/res/css/views/context_menus/_StatusMessageContextMenu.scss
+++ b/res/css/views/context_menus/_StatusMessageContextMenu.scss
@@ -27,7 +27,7 @@ input.mx_StatusMessageContextMenu_message {
     border-radius: 4px;
     border: 1px solid $input-border-color;
     padding: 6.5px 11px;
-    background-color: $primary-bg-color;
+    background-color: $background;
     font-weight: normal;
     margin: 0 0 10px;
 }
diff --git a/res/css/views/dialogs/_ConfirmUserActionDialog.scss b/res/css/views/dialogs/_ConfirmUserActionDialog.scss
index 284c171f4e..c390398020 100644
--- a/res/css/views/dialogs/_ConfirmUserActionDialog.scss
+++ b/res/css/views/dialogs/_ConfirmUserActionDialog.scss
@@ -36,7 +36,7 @@ limitations under the License.
 .mx_ConfirmUserActionDialog_reasonField {
     font-size: $font-14px;
     color: $primary-fg-color;
-    background-color: $primary-bg-color;
+    background-color: $background;
 
     border-radius: 3px;
     border: solid 1px $input-border-color;
diff --git a/res/css/views/dialogs/_CreateGroupDialog.scss b/res/css/views/dialogs/_CreateGroupDialog.scss
index f7bfc61a98..58045e1d7f 100644
--- a/res/css/views/dialogs/_CreateGroupDialog.scss
+++ b/res/css/views/dialogs/_CreateGroupDialog.scss
@@ -30,7 +30,7 @@ limitations under the License.
     border: 1px solid $input-border-color;
     padding: 9px;
     color: $primary-fg-color;
-    background-color: $primary-bg-color;
+    background-color: $background;
 }
 
 .mx_CreateGroupDialog_input_hasPrefixAndSuffix {
diff --git a/res/css/views/dialogs/_CreateRoomDialog.scss b/res/css/views/dialogs/_CreateRoomDialog.scss
index e7cfbf6050..818c93073a 100644
--- a/res/css/views/dialogs/_CreateRoomDialog.scss
+++ b/res/css/views/dialogs/_CreateRoomDialog.scss
@@ -56,7 +56,7 @@ limitations under the License.
     border: 1px solid $input-border-color;
     padding: 9px;
     color: $primary-fg-color;
-    background-color: $primary-bg-color;
+    background-color: $background;
     width: 100%;
 }
 
diff --git a/res/css/views/dialogs/_SetEmailDialog.scss b/res/css/views/dialogs/_SetEmailDialog.scss
index 37bee7a9ff..a39d51dfce 100644
--- a/res/css/views/dialogs/_SetEmailDialog.scss
+++ b/res/css/views/dialogs/_SetEmailDialog.scss
@@ -19,7 +19,7 @@ limitations under the License.
     border: 1px solid $input-border-color;
     padding: 9px;
     color: $input-fg-color;
-    background-color: $primary-bg-color;
+    background-color: $background;
     font-size: $font-15px;
     width: 100%;
     max-width: 280px;
diff --git a/res/css/views/directory/_NetworkDropdown.scss b/res/css/views/directory/_NetworkDropdown.scss
index ae0927386a..eb24cb0107 100644
--- a/res/css/views/directory/_NetworkDropdown.scss
+++ b/res/css/views/directory/_NetworkDropdown.scss
@@ -34,7 +34,7 @@ limitations under the License.
     box-sizing: border-box;
     border-radius: 4px;
     border: 1px solid $dialog-close-fg-color;
-    background-color: $primary-bg-color;
+    background-color: $background;
     max-height: calc(100vh - 20px); // allow 10px padding on both top and bottom
     overflow-y: auto;
 }
diff --git a/res/css/views/elements/_AddressSelector.scss b/res/css/views/elements/_AddressSelector.scss
index 087504390c..a7d463353b 100644
--- a/res/css/views/elements/_AddressSelector.scss
+++ b/res/css/views/elements/_AddressSelector.scss
@@ -16,7 +16,7 @@ limitations under the License.
 
 .mx_AddressSelector {
     position: absolute;
-    background-color: $primary-bg-color;
+    background-color: $background;
     width: 485px;
     max-height: 116px;
     overflow-y: auto;
@@ -31,8 +31,8 @@ limitations under the License.
 }
 
 .mx_AddressSelector_addressListElement .mx_AddressTile {
-    background-color: $primary-bg-color;
-    border: solid 1px $primary-bg-color;
+    background-color: $background;
+    border: solid 1px $background;
 }
 
 .mx_AddressSelector_addressListElement.mx_AddressSelector_selected {
diff --git a/res/css/views/elements/_Dropdown.scss b/res/css/views/elements/_Dropdown.scss
index 3b67e0191e..1844f2ccd3 100644
--- a/res/css/views/elements/_Dropdown.scss
+++ b/res/css/views/elements/_Dropdown.scss
@@ -111,7 +111,7 @@ input.mx_Dropdown_option:focus {
     padding: 0px;
     border-radius: 4px;
     border: 1px solid $input-focused-border-color;
-    background-color: $primary-bg-color;
+    background-color: $background;
     max-height: 200px;
     overflow-y: auto;
 }
diff --git a/res/css/views/elements/_FacePile.scss b/res/css/views/elements/_FacePile.scss
index c691baffb5..5f6f473081 100644
--- a/res/css/views/elements/_FacePile.scss
+++ b/res/css/views/elements/_FacePile.scss
@@ -25,7 +25,7 @@ limitations under the License.
         }
 
         .mx_BaseAvatar_image {
-            border: 1px solid $primary-bg-color;
+            border: 1px solid $background;
         }
 
         .mx_BaseAvatar_initial {
diff --git a/res/css/views/elements/_Field.scss b/res/css/views/elements/_Field.scss
index 50cd14c4da..afd5eeacdc 100644
--- a/res/css/views/elements/_Field.scss
+++ b/res/css/views/elements/_Field.scss
@@ -47,7 +47,7 @@ limitations under the License.
     border-radius: 4px;
     padding: 8px 9px;
     color: $primary-fg-color;
-    background-color: $primary-bg-color;
+    background-color: $background;
     flex: 1;
     min-width: 0;
 }
diff --git a/res/css/views/elements/_MiniAvatarUploader.scss b/res/css/views/elements/_MiniAvatarUploader.scss
index df4676ab56..7ba86de16f 100644
--- a/res/css/views/elements/_MiniAvatarUploader.scss
+++ b/res/css/views/elements/_MiniAvatarUploader.scss
@@ -37,7 +37,7 @@ limitations under the License.
         right: -6px;
         bottom: -6px;
 
-        background-color: $primary-bg-color;
+        background-color: $background;
         border-radius: 50%;
         z-index: 1;
 
diff --git a/res/css/views/emojipicker/_EmojiPicker.scss b/res/css/views/emojipicker/_EmojiPicker.scss
index 400e40e233..05a21b933a 100644
--- a/res/css/views/emojipicker/_EmojiPicker.scss
+++ b/res/css/views/emojipicker/_EmojiPicker.scss
@@ -89,7 +89,7 @@ limitations under the License.
     margin: 8px;
     border-radius: 4px;
     border: 1px solid $input-border-color;
-    background-color: $primary-bg-color;
+    background-color: $background;
     display: flex;
 
     input {
diff --git a/res/css/views/messages/_MImageBody.scss b/res/css/views/messages/_MImageBody.scss
index 765c74a36d..ab7ab14772 100644
--- a/res/css/views/messages/_MImageBody.scss
+++ b/res/css/views/messages/_MImageBody.scss
@@ -96,5 +96,5 @@ $timelineImageBorderRadius: 4px;
 }
 
 .mx_EventTile:hover .mx_HiddenImagePlaceholder {
-    background-color: $primary-bg-color;
+    background-color: $background;
 }
diff --git a/res/css/views/messages/_MessageActionBar.scss b/res/css/views/messages/_MessageActionBar.scss
index 69f3c672b7..ba2f320729 100644
--- a/res/css/views/messages/_MessageActionBar.scss
+++ b/res/css/views/messages/_MessageActionBar.scss
@@ -23,7 +23,7 @@ limitations under the License.
     height: 32px;
     line-height: $font-24px;
     border-radius: 8px;
-    background: $primary-bg-color;
+    background: $background;
     border: 1px solid $input-border-color;
     top: -32px;
     right: 8px;
diff --git a/res/css/views/right_panel/_PinnedMessagesCard.scss b/res/css/views/right_panel/_PinnedMessagesCard.scss
index 785aee09ca..933f7f0d2c 100644
--- a/res/css/views/right_panel/_PinnedMessagesCard.scss
+++ b/res/css/views/right_panel/_PinnedMessagesCard.scss
@@ -48,7 +48,7 @@ limitations under the License.
                 height: 32px;
                 line-height: $font-24px;
                 border-radius: 8px;
-                background: $primary-bg-color;
+                background: $background;
                 border: 1px solid $input-border-color;
                 padding: 1px;
                 width: max-content;
diff --git a/res/css/views/rooms/_Autocomplete.scss b/res/css/views/rooms/_Autocomplete.scss
index f8e0a382b1..5a9ec4362b 100644
--- a/res/css/views/rooms/_Autocomplete.scss
+++ b/res/css/views/rooms/_Autocomplete.scss
@@ -4,7 +4,7 @@
     z-index: 1001;
     width: 100%;
     border: 1px solid $primary-hairline-color;
-    background: $primary-bg-color;
+    background: $background;
     border-bottom: none;
     border-radius: 8px 8px 0 0;
     max-height: 50vh;
diff --git a/res/css/views/rooms/_BasicMessageComposer.scss b/res/css/views/rooms/_BasicMessageComposer.scss
index 544a96daba..752d3b0a54 100644
--- a/res/css/views/rooms/_BasicMessageComposer.scss
+++ b/res/css/views/rooms/_BasicMessageComposer.scss
@@ -31,7 +31,7 @@ limitations under the License.
 
     @keyframes visualbell {
         from { background-color: $visual-bell-bg-color; }
-        to { background-color: $primary-bg-color; }
+        to { background-color: $background; }
     }
 
     &.mx_BasicMessageComposer_input_error {
diff --git a/res/css/views/rooms/_EditMessageComposer.scss b/res/css/views/rooms/_EditMessageComposer.scss
index 214bfc4a1a..bf3c7c9b42 100644
--- a/res/css/views/rooms/_EditMessageComposer.scss
+++ b/res/css/views/rooms/_EditMessageComposer.scss
@@ -28,7 +28,7 @@ limitations under the License.
     .mx_BasicMessageComposer_input {
         border-radius: 4px;
         border: solid 1px $primary-hairline-color;
-        background-color: $primary-bg-color;
+        background-color: $background;
         max-height: 200px;
         padding: 3px 6px;
 
diff --git a/res/css/views/rooms/_JumpToBottomButton.scss b/res/css/views/rooms/_JumpToBottomButton.scss
index a8dc2ce11c..2b38b509de 100644
--- a/res/css/views/rooms/_JumpToBottomButton.scss
+++ b/res/css/views/rooms/_JumpToBottomButton.scss
@@ -56,7 +56,7 @@ limitations under the License.
     height: 38px;
     border-radius: 19px;
     box-sizing: border-box;
-    background: $primary-bg-color;
+    background: $background;
     border: 1.3px solid $muted-fg-color;
     cursor: pointer;
 }
diff --git a/res/css/views/rooms/_MessageComposer.scss b/res/css/views/rooms/_MessageComposer.scss
index 5e2eff4047..9dd04d739b 100644
--- a/res/css/views/rooms/_MessageComposer.scss
+++ b/res/css/views/rooms/_MessageComposer.scss
@@ -130,7 +130,7 @@ limitations under the License.
 
 @keyframes visualbell {
     from { background-color: $visual-bell-bg-color; }
-    to { background-color: $primary-bg-color; }
+    to { background-color: $background; }
 }
 
 .mx_MessageComposer_input_error {
@@ -161,7 +161,7 @@ limitations under the License.
     outline: none;
     box-shadow: none;
     color: $primary-fg-color;
-    background-color: $primary-bg-color;
+    background-color: $background;
     font-size: $font-14px;
     max-height: 120px;
     overflow: auto;
diff --git a/res/css/views/rooms/_ReplyPreview.scss b/res/css/views/rooms/_ReplyPreview.scss
index 60feb39d11..f6dc298563 100644
--- a/res/css/views/rooms/_ReplyPreview.scss
+++ b/res/css/views/rooms/_ReplyPreview.scss
@@ -16,7 +16,7 @@ limitations under the License.
 
 .mx_ReplyPreview {
     border: 1px solid $primary-hairline-color;
-    background: $primary-bg-color;
+    background: $background;
     border-bottom: none;
     border-radius: 8px 8px 0 0;
     max-height: 50vh;
diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss
index 4142b0a2ef..0b73dcfcf2 100644
--- a/res/css/views/rooms/_RoomHeader.scss
+++ b/res/css/views/rooms/_RoomHeader.scss
@@ -74,7 +74,7 @@ limitations under the License.
 
 .mx_RoomHeader_buttons {
     display: flex;
-    background-color: $primary-bg-color;
+    background-color: $background;
 }
 
 .mx_RoomHeader_info {
diff --git a/res/css/views/rooms/_TopUnreadMessagesBar.scss b/res/css/views/rooms/_TopUnreadMessagesBar.scss
index 8841b042a0..7c7d96e713 100644
--- a/res/css/views/rooms/_TopUnreadMessagesBar.scss
+++ b/res/css/views/rooms/_TopUnreadMessagesBar.scss
@@ -41,7 +41,7 @@ limitations under the License.
     height: 38px;
     border-radius: 19px;
     box-sizing: border-box;
-    background: $primary-bg-color;
+    background: $background;
     border: 1.3px solid $muted-fg-color;
     cursor: pointer;
 }
@@ -62,7 +62,7 @@ limitations under the License.
     display: block;
     width: 18px;
     height: 18px;
-    background: $primary-bg-color;
+    background: $background;
     border: 1.3px solid $muted-fg-color;
     border-radius: 10px;
     margin: 5px auto;
diff --git a/res/css/views/rooms/_WhoIsTypingTile.scss b/res/css/views/rooms/_WhoIsTypingTile.scss
index 1c0dabbeb5..49655742bb 100644
--- a/res/css/views/rooms/_WhoIsTypingTile.scss
+++ b/res/css/views/rooms/_WhoIsTypingTile.scss
@@ -36,7 +36,7 @@ limitations under the License.
 }
 
 .mx_WhoIsTypingTile_avatars .mx_BaseAvatar {
-    border: 1px solid $primary-bg-color;
+    border: 1px solid $background;
     border-radius: 40px;
 }
 
@@ -45,7 +45,7 @@ limitations under the License.
     display: inline-block;
     color: #acacac;
     background-color: #ddd;
-    border: 1px solid $primary-bg-color;
+    border: 1px solid $background;
     border-radius: 40px;
     width: 24px;
     height: 24px;
diff --git a/res/css/views/spaces/_SpaceCreateMenu.scss b/res/css/views/spaces/_SpaceCreateMenu.scss
index 41536bc8b1..e4d5170924 100644
--- a/res/css/views/spaces/_SpaceCreateMenu.scss
+++ b/res/css/views/spaces/_SpaceCreateMenu.scss
@@ -28,7 +28,7 @@ $spacePanelWidth: 71px;
         padding: 24px;
         width: 480px;
         box-sizing: border-box;
-        background-color: $primary-bg-color;
+        background-color: $background;
         position: relative;
 
         > div {
diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
index 8c305b9828..4f9b52ed8f 100644
--- a/res/themes/dark/css/_dark.scss
+++ b/res/themes/dark/css/_dark.scss
@@ -36,7 +36,6 @@ $room-highlight-color: #343a46;
 
 // typical text (dark-on-white in light skin)
 $primary-fg-color: $text-primary-color;
-$primary-bg-color: $bg-color;
 $muted-fg-color: $header-panel-text-primary-color;
 
 // additional text colors
diff --git a/res/themes/light-custom/css/_custom.scss b/res/themes/light-custom/css/_custom.scss
index 6c37351414..d8530a8f59 100644
--- a/res/themes/light-custom/css/_custom.scss
+++ b/res/themes/light-custom/css/_custom.scss
@@ -38,7 +38,7 @@ $lightbox-border-color: var(--timeline-background-color);
 $menu-bg-color: var(--timeline-background-color);
 $avatar-bg-color: var(--timeline-background-color);
 $message-action-bar-bg-color: var(--timeline-background-color);
-$primary-bg-color: var(--timeline-background-color);
+$background: var(--timeline-background-color);
 $togglesw-ball-color: var(--timeline-background-color);
 $droptarget-bg-color: var(--timeline-background-color-50pct); //still needs alpha at .5
 $authpage-modal-bg-color: var(--timeline-background-color-50pct); //still needs alpha at .59
diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss
index e64fe12d3b..576602c133 100644
--- a/res/themes/light/css/_light.scss
+++ b/res/themes/light/css/_light.scss
@@ -44,7 +44,6 @@ $quaternary-fg-color: $quaternary-content;
 $header-panel-bg-color: #f3f8fd;
 
 // typical text (dark-on-white in light skin)
-$primary-bg-color: $background;
 $muted-fg-color: #61708b; // Commonly used in headings and relevant alt text
 
 // used for dialog box text
@@ -59,7 +58,7 @@ $accent-color-50pct: rgba($accent-color, 0.5);
 $accent-color-darker: #92caad;
 $accent-color-alt: #238CF5;
 
-$selection-fg-color: $primary-bg-color;
+$selection-fg-color: $background;
 
 $focus-brightness: 105%;
 
@@ -173,7 +172,7 @@ $rte-group-pill-color: #aaa;
 
 $topleftmenu-color: #212121;
 $roomheader-color: #45474a;
-$roomheader-bg-color: $primary-bg-color;
+$roomheader-bg-color: $background;
 $roomheader-addroom-bg-color: rgba(92, 100, 112, 0.2);
 $roomheader-addroom-fg-color: #5c6470;
 $groupFilterPanel-button-color: #91A1C0;
@@ -318,7 +317,7 @@ $authpage-secondary-color: #61708b;
 $dark-panel-bg-color: $secondary-accent-color;
 $panel-gradient: rgba(242, 245, 248, 0), rgba(242, 245, 248, 1);
 
-$message-action-bar-bg-color: $primary-bg-color;
+$message-action-bar-bg-color: $background;
 $message-action-bar-fg-color: $primary-fg-color;
 $message-action-bar-border-color: #e9edf1;
 $message-action-bar-hover-border-color: $focus-bg-color;
@@ -371,7 +370,7 @@ $composer-shadow-color: rgba(0, 0, 0, 0.04);
 $eventbubble-self-bg: #F0FBF8;
 $eventbubble-others-bg: $system;
 $eventbubble-bg-hover: #FAFBFD;
-$eventbubble-avatar-outline: $primary-bg-color;
+$eventbubble-avatar-outline: $background;
 $eventbubble-reply-color: $quaternary-content;
 
 // ***** Mixins! *****