diff --git a/res/css/_common.scss b/res/css/_common.scss
index d01532a4a2..5fcc10add0 100644
--- a/res/css/_common.scss
+++ b/res/css/_common.scss
@@ -53,8 +53,8 @@ html {
 body {
     font-family: $font-family;
     font-size: $font-15px;
-    background-color: $primary-bg-color;
-    color: $primary-fg-color;
+    background-color: $background;
+    color: $primary-content;
     border: 0px;
     margin: 0px;
 
@@ -89,7 +89,7 @@ b {
 }
 
 h2 {
-    color: $primary-fg-color;
+    color: $primary-content;
     font-weight: 400;
     font-size: $font-18px;
     margin-top: 16px;
@@ -142,12 +142,12 @@ textarea::placeholder {
 
 input[type=text], input[type=password], textarea {
     background-color: transparent;
-    color: $primary-fg-color;
+    color: $primary-content;
 }
 
 /* Required by Firefox */
 textarea {
-    color: $primary-fg-color;
+    color: $primary-content;
 }
 
 input[type=text]:focus, input[type=password]:focus, textarea:focus {
@@ -173,7 +173,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
     .mx_textinput > input[type=search] {
         border: none;
         flex: 1;
-        color: $primary-fg-color;
+        color: $primary-content;
     }
 
     :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text],
@@ -184,7 +184,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
         background-color: transparent;
         color: $input-darker-fg-color;
         border-radius: 4px;
-        border: 1px solid rgba($primary-fg-color, .1);
+        border: 1px solid rgba($primary-content, .1);
         // these things should probably not be defined globally
         margin: 9px;
     }
@@ -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;
@@ -379,7 +379,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
 .mx_Dialog_content {
     margin: 24px 0 68px;
     font-size: $font-14px;
-    color: $primary-fg-color;
+    color: $primary-content;
     word-wrap: break-word;
 
     a {
@@ -493,8 +493,8 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
     border-radius: 3px;
     border: 1px solid $input-border-color;
     padding: 9px;
-    color: $primary-fg-color;
-    background-color: $primary-bg-color;
+    color: $primary-content;
+    background-color: $background;
 }
 
 .mx_textButton {
diff --git a/res/css/structures/_ContextualMenu.scss b/res/css/structures/_ContextualMenu.scss
index d7f2cb76e8..9f2b9e24b8 100644
--- a/res/css/structures/_ContextualMenu.scss
+++ b/res/css/structures/_ContextualMenu.scss
@@ -34,7 +34,7 @@ limitations under the License.
     border-radius: 8px;
     box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
     background-color: $menu-bg-color;
-    color: $primary-fg-color;
+    color: $primary-content;
     position: absolute;
     font-size: $font-14px;
     z-index: 5001;
diff --git a/res/css/structures/_CreateRoom.scss b/res/css/structures/_CreateRoom.scss
index e859beb20e..3d23ccc4b2 100644
--- a/res/css/structures/_CreateRoom.scss
+++ b/res/css/structures/_CreateRoom.scss
@@ -18,7 +18,7 @@ limitations under the License.
     width: 960px;
     margin-left: auto;
     margin-right: auto;
-    color: $primary-fg-color;
+    color: $primary-content;
 }
 
 .mx_CreateRoom input,
diff --git a/res/css/structures/_GroupFilterPanel.scss b/res/css/structures/_GroupFilterPanel.scss
index 2961eebda2..cc0e760031 100644
--- a/res/css/structures/_GroupFilterPanel.scss
+++ b/res/css/structures/_GroupFilterPanel.scss
@@ -92,13 +92,13 @@ $groupFilterPanelWidth: 56px; // only applies in this file, used for calculation
 }
 
 .mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected_prototype {
-    background-color: $primary-bg-color;
+    background-color: $background;
     border-radius: 6px;
 }
 
 .mx_TagTile_selected_prototype {
     .mx_TagTile_homeIcon::before {
-        background-color: $primary-fg-color; // dark-on-light
+        background-color: $primary-content; // dark-on-light
     }
 }
 
diff --git a/res/css/structures/_GroupView.scss b/res/css/structures/_GroupView.scss
index fb660f4194..5e224b1f38 100644
--- a/res/css/structures/_GroupView.scss
+++ b/res/css/structures/_GroupView.scss
@@ -132,7 +132,7 @@ limitations under the License.
     width: 100%;
     height: 31px;
     overflow: hidden;
-    color: $primary-fg-color;
+    color: $primary-content;
     font-weight: bold;
     font-size: $font-22px;
     padding-left: 19px;
@@ -397,7 +397,7 @@ limitations under the License.
         mask-position: center;
         mask-size: contain;
         mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
-        background-color: $secondary-fg-color;
+        background-color: $secondary-content;
     }
 
     .mx_AccessibleButton_kind_link {
@@ -422,7 +422,7 @@ limitations under the License.
             mask-position: center;
             mask-size: 8px;
             mask-image: url('$(res)/img/image-view/close.svg');
-            background-color: $secondary-fg-color;
+            background-color: $secondary-content;
         }
     }
 }
diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss
index 32d50b9a80..5ddea244f3 100644
--- a/res/css/structures/_LeftPanel.scss
+++ b/res/css/structures/_LeftPanel.scss
@@ -146,7 +146,7 @@ $roomListCollapsedWidth: 68px;
                     mask-position: center;
                     mask-size: contain;
                     mask-repeat: no-repeat;
-                    background: $secondary-fg-color;
+                    background: $secondary-content;
                 }
             }
 
@@ -169,7 +169,7 @@ $roomListCollapsedWidth: 68px;
                     mask-position: center;
                     mask-size: contain;
                     mask-repeat: no-repeat;
-                    background: $secondary-fg-color;
+                    background: $secondary-content;
                 }
 
                 &.mx_LeftPanel_exploreButton_space::before {
diff --git a/res/css/structures/_LeftPanelWidget.scss b/res/css/structures/_LeftPanelWidget.scss
index 6e2d99bb37..93c2898395 100644
--- a/res/css/structures/_LeftPanelWidget.scss
+++ b/res/css/structures/_LeftPanelWidget.scss
@@ -113,7 +113,7 @@ limitations under the License.
 
     &:hover .mx_LeftPanelWidget_resizerHandle {
         opacity: 0.8;
-        background-color: $primary-fg-color;
+        background-color: $primary-content;
     }
 
     .mx_LeftPanelWidget_maximizeButton {
diff --git a/res/css/structures/_MainSplit.scss b/res/css/structures/_MainSplit.scss
index 8199121420..407a1c270c 100644
--- a/res/css/structures/_MainSplit.scss
+++ b/res/css/structures/_MainSplit.scss
@@ -38,7 +38,7 @@ limitations under the License.
         width: 4px !important;
         border-radius: 4px !important;
 
-        background-color: $primary-fg-color;
+        background-color: $primary-content;
         opacity: 0.8;
     }
 }
diff --git a/res/css/structures/_MatrixChat.scss b/res/css/structures/_MatrixChat.scss
index 5232c14e74..fdf5cb1a03 100644
--- a/res/css/structures/_MatrixChat.scss
+++ b/res/css/structures/_MatrixChat.scss
@@ -64,7 +64,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):not(.mx_LeftPanel_wrapper) {
-    background-color: $primary-bg-color;
+    background-color: $background;
 
     flex: 1 1 0;
     min-width: 0;
@@ -91,7 +91,7 @@ limitations under the License.
 
         content: ' ';
 
-        background-color: $primary-fg-color;
+        background-color: $primary-content;
         opacity: 0.8;
     }
 }
diff --git a/res/css/structures/_NotificationPanel.scss b/res/css/structures/_NotificationPanel.scss
index d271cd2bcc..68e1dd6a9a 100644
--- a/res/css/structures/_NotificationPanel.scss
+++ b/res/css/structures/_NotificationPanel.scss
@@ -49,7 +49,7 @@ limitations under the License.
         bottom: 0;
         left: 0;
         right: 0;
-        background-color: $tertiary-fg-color;
+        background-color: $tertiary-content;
         height: 1px;
         opacity: 0.4;
         content: '';
@@ -70,7 +70,7 @@ limitations under the License.
 }
 
 .mx_NotificationPanel .mx_EventTile_roomName a {
-    color: $primary-fg-color;
+    color: $primary-content;
 }
 
 .mx_NotificationPanel .mx_EventTile_avatar {
@@ -79,7 +79,7 @@ limitations under the License.
 
 .mx_NotificationPanel .mx_EventTile .mx_SenderProfile,
 .mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
-    color: $primary-fg-color;
+    color: $primary-content;
     font-size: $font-12px;
     display: inline;
 }
@@ -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/_RoomDirectory.scss b/res/css/structures/_RoomDirectory.scss
index ec07500af5..fb0f7d10e1 100644
--- a/res/css/structures/_RoomDirectory.scss
+++ b/res/css/structures/_RoomDirectory.scss
@@ -28,7 +28,7 @@ limitations under the License.
 
 .mx_RoomDirectory {
     margin-bottom: 12px;
-    color: $primary-fg-color;
+    color: $primary-content;
     word-break: break-word;
     display: flex;
     flex-direction: column;
@@ -71,14 +71,14 @@ limitations under the License.
             font-weight: $font-semi-bold;
             font-size: $font-15px;
             line-height: $font-18px;
-            color: $primary-fg-color;
+            color: $primary-content;
         }
 
         > p {
             margin: 40px auto 60px;
             font-size: $font-14px;
             line-height: $font-20px;
-            color: $secondary-fg-color;
+            color: $secondary-content;
             max-width: 464px; // easier reading
         }
 
@@ -97,7 +97,7 @@ limitations under the License.
 }
 
 .mx_RoomDirectory_table {
-    color: $primary-fg-color;
+    color: $primary-content;
     display: grid;
     font-size: $font-12px;
     grid-template-columns: max-content auto max-content max-content max-content;
diff --git a/res/css/structures/_RoomSearch.scss b/res/css/structures/_RoomSearch.scss
index 7fdafab5a6..bbd60a5ff3 100644
--- a/res/css/structures/_RoomSearch.scss
+++ b/res/css/structures/_RoomSearch.scss
@@ -33,14 +33,14 @@ limitations under the License.
         height: 16px;
         mask: url('$(res)/img/element-icons/roomlist/search.svg');
         mask-repeat: no-repeat;
-        background-color: $secondary-fg-color;
+        background-color: $secondary-content;
         margin-left: 7px;
     }
 
     .mx_RoomSearch_input {
         border: none !important; // !important to override default app-wide styles
         flex: 1 !important; // !important to override default app-wide styles
-        color: $primary-fg-color !important; // !important to override default app-wide styles
+        color: $primary-content !important; // !important to override default app-wide styles
         padding: 0;
         height: 100%;
         width: 100%;
@@ -48,12 +48,12 @@ limitations under the License.
         line-height: $font-16px;
 
         &:not(.mx_RoomSearch_inputExpanded)::placeholder {
-            color: $tertiary-fg-color !important; // !important to override default app-wide styles
+            color: $tertiary-content !important; // !important to override default app-wide styles
         }
     }
 
     &.mx_RoomSearch_hasQuery {
-        border-color: $secondary-fg-color;
+        border-color: $secondary-content;
     }
 
     &.mx_RoomSearch_focused {
@@ -62,7 +62,7 @@ limitations under the License.
     }
 
     &.mx_RoomSearch_focused, &.mx_RoomSearch_hasQuery {
-        background-color: $roomlist-filter-active-bg-color;
+        background-color: $background;
 
         .mx_RoomSearch_clearButton {
             width: 16px;
@@ -71,7 +71,7 @@ limitations under the License.
             mask-position: center;
             mask-size: contain;
             mask-repeat: no-repeat;
-            background-color: $secondary-fg-color;
+            background-color: $secondary-content;
             margin-right: 8px;
         }
     }
diff --git a/res/css/structures/_RoomStatusBar.scss b/res/css/structures/_RoomStatusBar.scss
index de9e049165..bdfbca1afa 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;
@@ -171,14 +171,14 @@ limitations under the License.
 }
 
 .mx_RoomStatusBar_connectionLostBar_desc {
-    color: $primary-fg-color;
+    color: $primary-content;
     font-size: $font-13px;
     opacity: 0.5;
     padding-bottom: 20px;
 }
 
 .mx_RoomStatusBar_resend_link {
-    color: $primary-fg-color !important;
+    color: $primary-content !important;
     text-decoration: underline !important;
     cursor: pointer;
 }
@@ -187,7 +187,7 @@ limitations under the License.
     height: 50px;
     line-height: $font-50px;
 
-    color: $primary-fg-color;
+    color: $primary-content;
     opacity: 0.5;
     overflow-y: hidden;
     display: block;
diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss
index 67529878c9..86c2efeb4a 100644
--- a/res/css/structures/_RoomView.scss
+++ b/res/css/structures/_RoomView.scss
@@ -52,7 +52,7 @@ limitations under the License.
 
     pointer-events: none;
 
-    background-color: $primary-bg-color;
+    background-color: $background;
     opacity: 0.95;
 
     position: absolute;
@@ -99,7 +99,7 @@ limitations under the License.
     left: 0;
     right: 0;
     z-index: 3000;
-    background-color: $primary-bg-color;
+    background-color: $background;
 }
 
 .mx_RoomView_auxPanel_hiddenHighlights {
@@ -172,7 +172,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;
 
@@ -257,7 +257,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/_SpaceHierarchy.scss b/res/css/structures/_SpaceHierarchy.scss
index 74dfb5da6b..a5d589f9c2 100644
--- a/res/css/structures/_SpaceHierarchy.scss
+++ b/res/css/structures/_SpaceHierarchy.scss
@@ -37,7 +37,7 @@ limitations under the License.
 
             > div {
                 font-weight: 400;
-                color: $secondary-fg-color;
+                color: $secondary-content;
                 font-size: $font-15px;
                 line-height: $font-24px;
             }
@@ -59,7 +59,7 @@ limitations under the License.
         > div {
             font-size: $font-15px;
             line-height: $font-24px;
-            color: $secondary-fg-color;
+            color: $secondary-content;
         }
     }
 
@@ -69,7 +69,7 @@ limitations under the License.
         align-items: center;
         font-size: $font-15px;
         line-height: $font-24px;
-        color: $primary-fg-color;
+        color: $primary-content;
         margin-bottom: 12px;
 
         > h4 {
@@ -128,14 +128,14 @@ limitations under the License.
             font-weight: $font-semi-bold;
             font-size: $font-18px;
             line-height: $font-22px;
-            color: $primary-fg-color;
+            color: $primary-content;
         }
 
         > span {
             margin-left: 8px;
             font-size: $font-15px;
             line-height: $font-24px;
-            color: $secondary-fg-color;
+            color: $secondary-content;
         }
     }
 
@@ -152,7 +152,7 @@ limitations under the License.
         height: 16px;
         width: 16px;
         border-radius: 4px;
-        background-color: $primary-bg-color;
+        background-color: $background;
 
         &::before {
             content: '';
@@ -163,7 +163,7 @@ limitations under the License.
             width: 16px;
             mask-repeat: no-repeat;
             mask-position: center;
-            background-color: $tertiary-fg-color;
+            background-color: $tertiary-content;
             mask-size: 16px;
             transform: rotate(270deg);
             mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
@@ -206,7 +206,7 @@ limitations under the License.
             .mx_InfoTooltip {
                 display: inline;
                 margin-left: 12px;
-                color: $tertiary-fg-color;
+                color: $tertiary-content;
                 font-size: $font-12px;
                 line-height: $font-15px;
 
@@ -227,7 +227,7 @@ limitations under the License.
         .mx_SpaceHierarchy_roomTile_info {
             font-size: $font-14px;
             line-height: $font-18px;
-            color: $secondary-fg-color;
+            color: $secondary-content;
             grid-row: 2;
             grid-column: 1/3;
             display: -webkit-box;
@@ -292,7 +292,7 @@ limitations under the License.
             font-weight: normal;
             font-size: $font-12px;
             line-height: $font-15px;
-            color: $secondary-fg-color;
+            color: $secondary-content;
         }
     }
 
diff --git a/res/css/structures/_SpacePanel.scss b/res/css/structures/_SpacePanel.scss
index 7356ef31f8..702936523d 100644
--- a/res/css/structures/_SpacePanel.scss
+++ b/res/css/structures/_SpacePanel.scss
@@ -20,7 +20,7 @@ $gutterSize: 16px;
 $activeBorderTransparentGap: 1px;
 
 $activeBackgroundColor: $roomtile-selected-bg-color;
-$activeBorderColor: $secondary-fg-color;
+$activeBorderColor: $secondary-content;
 
 .mx_SpacePanel {
     background-color: $groupFilterPanel-bg-color;
@@ -238,7 +238,7 @@ $activeBorderColor: $secondary-fg-color;
                 mask-size: contain;
                 mask-repeat: no-repeat;
                 mask-image: url('$(res)/img/element-icons/context-menu.svg');
-                background: $primary-fg-color;
+                background: $primary-content;
             }
         }
     }
diff --git a/res/css/structures/_SpaceRoomView.scss b/res/css/structures/_SpaceRoomView.scss
index 6e6271d5e7..39eabe2e07 100644
--- a/res/css/structures/_SpaceRoomView.scss
+++ b/res/css/structures/_SpaceRoomView.scss
@@ -32,7 +32,7 @@ $SpaceRoomViewInnerWidth: 428px;
     }
 
     > span {
-        color: $secondary-fg-color;
+        color: $secondary-content;
     }
 
     &::before {
@@ -45,7 +45,7 @@ $SpaceRoomViewInnerWidth: 428px;
         mask-position: center;
         mask-repeat: no-repeat;
         mask-size: 24px;
-        background-color: $tertiary-fg-color;
+        background-color: $tertiary-content;
     }
 
     &:hover {
@@ -56,7 +56,7 @@ $SpaceRoomViewInnerWidth: 428px;
         }
 
         > span {
-            color: $primary-fg-color;
+            color: $primary-content;
         }
     }
 }
@@ -75,13 +75,13 @@ $SpaceRoomViewInnerWidth: 428px;
             margin: 0;
             font-size: $font-24px;
             font-weight: $font-semi-bold;
-            color: $primary-fg-color;
+            color: $primary-content;
             width: max-content;
         }
 
         .mx_SpaceRoomView_description {
             font-size: $font-15px;
-            color: $secondary-fg-color;
+            color: $secondary-content;
             margin-top: 12px;
             margin-bottom: 24px;
             max-width: $SpaceRoomViewInnerWidth;
@@ -157,7 +157,7 @@ $SpaceRoomViewInnerWidth: 428px;
             font-weight: $font-semi-bold;
             font-size: $font-14px;
             line-height: $font-24px;
-            color: $primary-fg-color;
+            color: $primary-content;
             margin-top: 24px;
             position: relative;
             padding-left: 24px;
@@ -179,7 +179,7 @@ $SpaceRoomViewInnerWidth: 428px;
                 mask-position: center;
                 mask-size: contain;
                 mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
-                background-color: $secondary-fg-color;
+                background-color: $secondary-content;
             }
         }
 
@@ -210,7 +210,7 @@ $SpaceRoomViewInnerWidth: 428px;
 
                 .mx_SpaceRoomView_preview_inviter_mxid {
                     line-height: $font-24px;
-                    color: $secondary-fg-color;
+                    color: $secondary-content;
                 }
             }
         }
@@ -227,7 +227,7 @@ $SpaceRoomViewInnerWidth: 428px;
         .mx_SpaceRoomView_preview_topic {
             font-size: $font-14px;
             line-height: $font-22px;
-            color: $secondary-fg-color;
+            color: $secondary-content;
             margin: 20px 0;
             max-height: 160px;
             overflow-y: auto;
@@ -261,7 +261,7 @@ $SpaceRoomViewInnerWidth: 428px;
         .mx_SpaceRoomView_landing_name {
             margin: 24px 0 16px;
             font-size: $font-15px;
-            color: $secondary-fg-color;
+            color: $secondary-content;
 
             > span {
                 display: inline-block;
@@ -334,7 +334,7 @@ $SpaceRoomViewInnerWidth: 428px;
                     top: 0;
                     height: 24px;
                     width: 24px;
-                    background: $tertiary-fg-color;
+                    background: $tertiary-content;
                     mask-position: center;
                     mask-size: contain;
                     mask-repeat: no-repeat;
@@ -358,7 +358,7 @@ $SpaceRoomViewInnerWidth: 428px;
 
         .mx_SpaceFeedbackPrompt {
             padding: 7px; // 8px - 1px border
-            border: 1px solid rgba($primary-fg-color, .1);
+            border: 1px solid rgba($primary-content, .1);
             border-radius: 8px;
             width: max-content;
             margin: 0 0 -40px auto; // collapse its own height to not push other components down
@@ -387,7 +387,7 @@ $SpaceRoomViewInnerWidth: 428px;
         width: 432px;
         border-radius: 8px;
         background-color: $info-plinth-bg-color;
-        color: $secondary-fg-color;
+        color: $secondary-content;
         box-sizing: border-box;
 
         > h3 {
@@ -414,7 +414,7 @@ $SpaceRoomViewInnerWidth: 428px;
             position: absolute;
             top: 14px;
             left: 14px;
-            background-color: $secondary-fg-color;
+            background-color: $secondary-content;
         }
     }
 
@@ -437,7 +437,7 @@ $SpaceRoomViewInnerWidth: 428px;
         }
 
         .mx_SpaceRoomView_inviteTeammates_buttons {
-            color: $secondary-fg-color;
+            color: $secondary-content;
             margin-top: 28px;
 
             .mx_AccessibleButton {
@@ -453,7 +453,7 @@ $SpaceRoomViewInnerWidth: 428px;
                     width: 24px;
                     top: 0;
                     left: 0;
-                    background-color: $secondary-fg-color;
+                    background-color: $secondary-content;
                     mask-repeat: no-repeat;
                     mask-position: center;
                     mask-size: contain;
@@ -472,7 +472,7 @@ $SpaceRoomViewInnerWidth: 428px;
 }
 
 .mx_SpaceRoomView_info {
-    color: $secondary-fg-color;
+    color: $secondary-content;
     font-size: $font-15px;
     line-height: $font-24px;
     margin: 20px 0;
@@ -491,7 +491,7 @@ $SpaceRoomViewInnerWidth: 428px;
             left: -2px;
             mask-position: center;
             mask-repeat: no-repeat;
-            background-color: $tertiary-fg-color;
+            background-color: $tertiary-content;
         }
     }
 
diff --git a/res/css/structures/_TabbedView.scss b/res/css/structures/_TabbedView.scss
index 833450a25b..e185197f25 100644
--- a/res/css/structures/_TabbedView.scss
+++ b/res/css/structures/_TabbedView.scss
@@ -80,7 +80,7 @@ limitations under the License.
 
         .mx_TabbedView_tabLabel_text {
             font-size: 15px;
-            color: $tertiary-fg-color;
+            color: $tertiary-content;
         }
     }
 
diff --git a/res/css/structures/_ToastContainer.scss b/res/css/structures/_ToastContainer.scss
index 5cd938f1ce..6024df5dc0 100644
--- a/res/css/structures/_ToastContainer.scss
+++ b/res/css/structures/_ToastContainer.scss
@@ -36,8 +36,8 @@ limitations under the License.
     .mx_Toast_toast {
         grid-row: 1 / 3;
         grid-column: 1;
-        color: $primary-fg-color;
         background-color: $system;
+        color: $primary-content;
         box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
         border-radius: 8px;
         overflow: hidden;
@@ -63,7 +63,7 @@ limitations under the License.
 
             &.mx_Toast_icon_verification::after {
                 mask-image: url("$(res)/img/e2e/normal.svg");
-                background-color: $primary-fg-color;
+                background-color: $primary-content;
             }
 
             &.mx_Toast_icon_verification_warning {
@@ -82,7 +82,7 @@ limitations under the License.
 
             &.mx_Toast_icon_secure_backup::after {
                 mask-image: url('$(res)/img/feather-customised/secure-backup.svg');
-                background-color: $primary-fg-color;
+                background-color: $primary-content;
             }
 
             .mx_Toast_title, .mx_Toast_body {
@@ -163,7 +163,7 @@ limitations under the License.
         }
 
         .mx_Toast_detail {
-            color: $secondary-fg-color;
+            color: $secondary-content;
         }
 
         .mx_Toast_deviceID {
diff --git a/res/css/structures/_UserMenu.scss b/res/css/structures/_UserMenu.scss
index 17e6ad75df..c10e7f60df 100644
--- a/res/css/structures/_UserMenu.scss
+++ b/res/css/structures/_UserMenu.scss
@@ -35,7 +35,7 @@ limitations under the License.
         // we cheat opacity on the theme colour with an after selector here
         &::after {
             content: '';
-            border-bottom: 1px solid $primary-fg-color; // XXX: Variable abuse
+            border-bottom: 1px solid $primary-content;
             opacity: 0.2;
             display: block;
             padding-top: 8px;
@@ -58,7 +58,7 @@ limitations under the License.
             mask-position: center;
             mask-size: contain;
             mask-repeat: no-repeat;
-            background: $tertiary-fg-color;
+            background: $tertiary-content;
             mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
         }
     }
@@ -176,7 +176,7 @@ limitations under the License.
             width: 85%;
             opacity: 0.2;
             border: none;
-            border-bottom: 1px solid $primary-fg-color; // XXX: Variable abuse
+            border-bottom: 1px solid $primary-content;
         }
 
         &.mx_IconizedContextMenu {
@@ -292,7 +292,7 @@ limitations under the License.
             mask-position: center;
             mask-size: contain;
             mask-repeat: no-repeat;
-            background: $primary-fg-color;
+            background: $primary-content;
         }
     }
 
diff --git a/res/css/structures/_ViewSource.scss b/res/css/structures/_ViewSource.scss
index 248eab5d88..e3d6135ef3 100644
--- a/res/css/structures/_ViewSource.scss
+++ b/res/css/structures/_ViewSource.scss
@@ -24,7 +24,7 @@ limitations under the License.
 .mx_ViewSource_heading {
     font-size: $font-17px;
     font-weight: 400;
-    color: $primary-fg-color;
+    color: $primary-content;
     margin-top: 0.7em;
 }
 
diff --git a/res/css/views/audio_messages/_AudioPlayer.scss b/res/css/views/audio_messages/_AudioPlayer.scss
index 77dcebbb9a..3c2551e36a 100644
--- a/res/css/views/audio_messages/_AudioPlayer.scss
+++ b/res/css/views/audio_messages/_AudioPlayer.scss
@@ -33,7 +33,7 @@ limitations under the License.
             }
 
             .mx_AudioPlayer_mediaName {
-                color: $primary-fg-color;
+                color: $primary-content;
                 font-size: $font-15px;
                 line-height: $font-15px;
                 text-overflow: ellipsis;
diff --git a/res/css/views/audio_messages/_SeekBar.scss b/res/css/views/audio_messages/_SeekBar.scss
index d13fe4ac6a..03449d009b 100644
--- a/res/css/views/audio_messages/_SeekBar.scss
+++ b/res/css/views/audio_messages/_SeekBar.scss
@@ -27,7 +27,7 @@ limitations under the License.
 
     width: 100%;
     height: 1px;
-    background: $quaternary-fg-color;
+    background: $quaternary-content;
     outline: none; // remove blue selection border
     position: relative; // for before+after pseudo elements later on
 
@@ -42,7 +42,7 @@ limitations under the License.
         width: 8px;
         height: 8px;
         border-radius: 8px;
-        background-color: $tertiary-fg-color;
+        background-color: $tertiary-content;
         cursor: pointer;
     }
 
@@ -50,7 +50,7 @@ limitations under the License.
         width: 8px;
         height: 8px;
         border-radius: 8px;
-        background-color: $tertiary-fg-color;
+        background-color: $tertiary-content;
         cursor: pointer;
 
         // Firefox adds a border on the thumb
@@ -63,7 +63,7 @@ limitations under the License.
     // in firefox, so it's just wasted CPU/GPU time.
     &::before { // ::before to ensure it ends up under the thumb
         content: '';
-        background-color: $tertiary-fg-color;
+        background-color: $tertiary-content;
 
         // Absolute positioning to ensure it overlaps with the existing bar
         position: absolute;
@@ -81,7 +81,7 @@ limitations under the License.
 
     // This is firefox's built-in support for the above, with 100% less hacks.
     &::-moz-range-progress {
-        background-color: $tertiary-fg-color;
+        background-color: $tertiary-content;
         height: 1px;
     }
 
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/avatars/_DecoratedRoomAvatar.scss b/res/css/views/avatars/_DecoratedRoomAvatar.scss
index 257b512579..4922068462 100644
--- a/res/css/views/avatars/_DecoratedRoomAvatar.scss
+++ b/res/css/views/avatars/_DecoratedRoomAvatar.scss
@@ -47,7 +47,7 @@ limitations under the License.
         mask-position: center;
         mask-size: contain;
         mask-repeat: no-repeat;
-        background: $secondary-fg-color;
+        background: $secondary-content;
         mask-image: url('$(res)/img/globe.svg');
     }
 
diff --git a/res/css/views/beta/_BetaCard.scss b/res/css/views/beta/_BetaCard.scss
index 2af4e79ecd..ff6910852c 100644
--- a/res/css/views/beta/_BetaCard.scss
+++ b/res/css/views/beta/_BetaCard.scss
@@ -29,7 +29,7 @@ limitations under the License.
                 font-weight: $font-semi-bold;
                 font-size: $font-18px;
                 line-height: $font-22px;
-                color: $primary-fg-color;
+                color: $primary-content;
                 margin: 4px 0 14px;
 
                 .mx_BetaCard_betaPill {
@@ -40,7 +40,7 @@ limitations under the License.
             .mx_BetaCard_caption {
                 font-size: $font-15px;
                 line-height: $font-20px;
-                color: $secondary-fg-color;
+                color: $secondary-content;
                 margin-bottom: 20px;
             }
 
@@ -54,7 +54,7 @@ limitations under the License.
             .mx_BetaCard_disclaimer {
                 font-size: $font-12px;
                 line-height: $font-15px;
-                color: $secondary-fg-color;
+                color: $secondary-content;
                 margin-top: 20px;
             }
         }
@@ -72,13 +72,13 @@ limitations under the License.
             margin: 16px 0 0;
             font-size: $font-15px;
             line-height: $font-24px;
-            color: $primary-fg-color;
+            color: $primary-content;
 
             .mx_SettingsFlag_microcopy {
                 margin-top: 4px;
                 font-size: $font-12px;
                 line-height: $font-15px;
-                color: $secondary-fg-color;
+                color: $secondary-content;
             }
         }
     }
diff --git a/res/css/views/context_menus/_IconizedContextMenu.scss b/res/css/views/context_menus/_IconizedContextMenu.scss
index ff176eef7e..ca40f18cd4 100644
--- a/res/css/views/context_menus/_IconizedContextMenu.scss
+++ b/res/css/views/context_menus/_IconizedContextMenu.scss
@@ -36,7 +36,7 @@ limitations under the License.
             //
             // Therefore, we just hack in a line and border the thing ourselves
             &::before {
-                border-top: 1px solid $primary-fg-color;
+                border-top: 1px solid $primary-content;
                 opacity: 0.1;
                 content: '';
 
@@ -63,7 +63,7 @@ limitations under the License.
             padding-top: 12px;
             padding-bottom: 12px;
             text-decoration: none;
-            color: $primary-fg-color;
+            color: $primary-content;
             font-size: $font-15px;
             line-height: $font-24px;
 
@@ -119,7 +119,7 @@ limitations under the License.
             mask-position: center;
             mask-size: contain;
             mask-repeat: no-repeat;
-            background: $primary-fg-color;
+            background: $primary-content;
         }
     }
 
diff --git a/res/css/views/context_menus/_MessageContextMenu.scss b/res/css/views/context_menus/_MessageContextMenu.scss
index 338841cce4..5af748e28d 100644
--- a/res/css/views/context_menus/_MessageContextMenu.scss
+++ b/res/css/views/context_menus/_MessageContextMenu.scss
@@ -30,7 +30,7 @@ limitations under the License.
             mask-position: center;
             mask-size: contain;
             mask-repeat: no-repeat;
-            background: $primary-fg-color;
+            background: $primary-content;
         }
     }
 
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/_AddExistingToSpaceDialog.scss b/res/css/views/dialogs/_AddExistingToSpaceDialog.scss
index 42e17c8d98..444b29c9bf 100644
--- a/res/css/views/dialogs/_AddExistingToSpaceDialog.scss
+++ b/res/css/views/dialogs/_AddExistingToSpaceDialog.scss
@@ -44,7 +44,7 @@ limitations under the License.
 
         > h3 {
             margin: 0;
-            color: $secondary-fg-color;
+            color: $secondary-content;
             font-size: $font-12px;
             font-weight: $font-semi-bold;
             line-height: $font-15px;
@@ -66,7 +66,7 @@ limitations under the License.
             flex-grow: 1;
             font-size: $font-12px;
             line-height: $font-15px;
-            color: $secondary-fg-color;
+            color: $secondary-content;
 
             .mx_ProgressBar {
                 height: 8px;
@@ -79,7 +79,7 @@ limitations under the License.
                 margin-top: 8px;
                 font-size: $font-15px;
                 line-height: $font-24px;
-                color: $primary-fg-color;
+                color: $primary-content;
             }
 
             > * {
@@ -105,7 +105,7 @@ limitations under the License.
                 margin-top: 4px;
                 font-size: $font-12px;
                 line-height: $font-15px;
-                color: $primary-fg-color;
+                color: $primary-content;
             }
         }
 
@@ -126,7 +126,7 @@ limitations under the License.
             &::before {
                 content: '';
                 position: absolute;
-                background-color: $primary-fg-color;
+                background-color: $primary-content;
                 mask-repeat: no-repeat;
                 mask-position: center;
                 mask-size: contain;
@@ -145,7 +145,7 @@ limitations under the License.
 
 .mx_AddExistingToSpaceDialog {
     width: 480px;
-    color: $primary-fg-color;
+    color: $primary-content;
     display: flex;
     flex-direction: column;
     flex-wrap: nowrap;
@@ -188,7 +188,7 @@ limitations under the License.
             padding-left: 0;
             flex: unset;
             height: unset;
-            color: $secondary-fg-color;
+            color: $secondary-content;
             font-size: $font-15px;
             line-height: $font-24px;
 
@@ -221,7 +221,7 @@ limitations under the License.
     }
 
     .mx_SubspaceSelector_onlySpace {
-        color: $secondary-fg-color;
+        color: $secondary-content;
         font-size: $font-15px;
         line-height: $font-24px;
     }
diff --git a/res/css/views/dialogs/_CommunityPrototypeInviteDialog.scss b/res/css/views/dialogs/_CommunityPrototypeInviteDialog.scss
index beae03f00f..5d6c817b14 100644
--- a/res/css/views/dialogs/_CommunityPrototypeInviteDialog.scss
+++ b/res/css/views/dialogs/_CommunityPrototypeInviteDialog.scss
@@ -65,7 +65,7 @@ limitations under the License.
                 .mx_CommunityPrototypeInviteDialog_personName {
                     font-weight: 600;
                     font-size: $font-14px;
-                    color: $primary-fg-color;
+                    color: $primary-content;
                     margin-left: 7px;
                 }
 
diff --git a/res/css/views/dialogs/_ConfirmUserActionDialog.scss b/res/css/views/dialogs/_ConfirmUserActionDialog.scss
index 284c171f4e..5ac0f07b14 100644
--- a/res/css/views/dialogs/_ConfirmUserActionDialog.scss
+++ b/res/css/views/dialogs/_ConfirmUserActionDialog.scss
@@ -35,8 +35,8 @@ limitations under the License.
 
 .mx_ConfirmUserActionDialog_reasonField {
     font-size: $font-14px;
-    color: $primary-fg-color;
-    background-color: $primary-bg-color;
+    color: $primary-content;
+    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..ef9c2b73d4 100644
--- a/res/css/views/dialogs/_CreateGroupDialog.scss
+++ b/res/css/views/dialogs/_CreateGroupDialog.scss
@@ -29,8 +29,8 @@ limitations under the License.
     border-radius: 3px;
     border: 1px solid $input-border-color;
     padding: 9px;
-    color: $primary-fg-color;
-    background-color: $primary-bg-color;
+    color: $primary-content;
+    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..9cfa8ce25a 100644
--- a/res/css/views/dialogs/_CreateRoomDialog.scss
+++ b/res/css/views/dialogs/_CreateRoomDialog.scss
@@ -55,8 +55,8 @@ limitations under the License.
     border-radius: 3px;
     border: 1px solid $input-border-color;
     padding: 9px;
-    color: $primary-fg-color;
-    background-color: $primary-bg-color;
+    color: $primary-content;
+    background-color: $background;
     width: 100%;
 }
 
diff --git a/res/css/views/dialogs/_CreateSpaceFromCommunityDialog.scss b/res/css/views/dialogs/_CreateSpaceFromCommunityDialog.scss
index afa722e05e..6ff328f6ab 100644
--- a/res/css/views/dialogs/_CreateSpaceFromCommunityDialog.scss
+++ b/res/css/views/dialogs/_CreateSpaceFromCommunityDialog.scss
@@ -23,7 +23,7 @@ limitations under the License.
 
 .mx_CreateSpaceFromCommunityDialog {
     width: 480px;
-    color: $primary-fg-color;
+    color: $primary-content;
     display: flex;
     flex-direction: column;
     flex-wrap: nowrap;
@@ -73,7 +73,7 @@ limitations under the License.
             flex-grow: 1;
             font-size: $font-12px;
             line-height: $font-15px;
-            color: $secondary-fg-color;
+            color: $secondary-content;
 
             .mx_ProgressBar {
                 height: 8px;
@@ -86,7 +86,7 @@ limitations under the License.
                 margin-top: 8px;
                 font-size: $font-15px;
                 line-height: $font-24px;
-                color: $primary-fg-color;
+                color: $primary-content;
             }
 
             > * {
@@ -112,7 +112,7 @@ limitations under the License.
                 margin-top: 4px;
                 font-size: $font-12px;
                 line-height: $font-15px;
-                color: $primary-fg-color;
+                color: $primary-content;
             }
         }
 
@@ -138,7 +138,7 @@ limitations under the License.
             &::before {
                 content: '';
                 position: absolute;
-                background-color: $primary-fg-color;
+                background-color: $primary-content;
                 mask-repeat: no-repeat;
                 mask-position: center;
                 mask-size: contain;
diff --git a/res/css/views/dialogs/_CreateSubspaceDialog.scss b/res/css/views/dialogs/_CreateSubspaceDialog.scss
index 1ec4731ae6..1ed10df35c 100644
--- a/res/css/views/dialogs/_CreateSubspaceDialog.scss
+++ b/res/css/views/dialogs/_CreateSubspaceDialog.scss
@@ -23,7 +23,7 @@ limitations under the License.
 
 .mx_CreateSubspaceDialog {
     width: 480px;
-    color: $primary-fg-color;
+    color: $primary-content;
     display: flex;
     flex-direction: column;
     flex-wrap: nowrap;
@@ -57,7 +57,7 @@ limitations under the License.
             flex-grow: 1;
             font-size: $font-12px;
             line-height: $font-15px;
-            color: $secondary-fg-color;
+            color: $secondary-content;
 
             > * {
                 vertical-align: middle;
diff --git a/res/css/views/dialogs/_FeedbackDialog.scss b/res/css/views/dialogs/_FeedbackDialog.scss
index fd225dd882..74733f7220 100644
--- a/res/css/views/dialogs/_FeedbackDialog.scss
+++ b/res/css/views/dialogs/_FeedbackDialog.scss
@@ -33,7 +33,7 @@ limitations under the License.
         padding-left: 52px;
 
         > p {
-            color: $tertiary-fg-color;
+            color: $tertiary-content;
         }
 
         .mx_AccessibleButton_kind_link {
diff --git a/res/css/views/dialogs/_ForwardDialog.scss b/res/css/views/dialogs/_ForwardDialog.scss
index e018f60172..da8ce3de5b 100644
--- a/res/css/views/dialogs/_ForwardDialog.scss
+++ b/res/css/views/dialogs/_ForwardDialog.scss
@@ -16,7 +16,7 @@ limitations under the License.
 
 .mx_ForwardDialog {
     width: 520px;
-    color: $primary-fg-color;
+    color: $primary-content;
     display: flex;
     flex-direction: column;
     flex-wrap: nowrap;
@@ -25,7 +25,7 @@ limitations under the License.
 
     > h3 {
         margin: 0 0 6px;
-        color: $secondary-fg-color;
+        color: $secondary-content;
         font-size: $font-12px;
         font-weight: $font-semi-bold;
         line-height: $font-15px;
diff --git a/res/css/views/dialogs/_GenericFeatureFeedbackDialog.scss b/res/css/views/dialogs/_GenericFeatureFeedbackDialog.scss
index f83eed9c53..ab7496249d 100644
--- a/res/css/views/dialogs/_GenericFeatureFeedbackDialog.scss
+++ b/res/css/views/dialogs/_GenericFeatureFeedbackDialog.scss
@@ -16,7 +16,7 @@ limitations under the License.
 
 .mx_GenericFeatureFeedbackDialog {
     .mx_GenericFeatureFeedbackDialog_subheading {
-        color: $primary-fg-color;
+        color: $primary-content;
         font-size: $font-14px;
         line-height: $font-20px;
         margin-bottom: 24px;
diff --git a/res/css/views/dialogs/_HostSignupDialog.scss b/res/css/views/dialogs/_HostSignupDialog.scss
index ac4bc41951..d8a6652a39 100644
--- a/res/css/views/dialogs/_HostSignupDialog.scss
+++ b/res/css/views/dialogs/_HostSignupDialog.scss
@@ -70,11 +70,11 @@ limitations under the License.
 }
 
 .mx_HostSignupDialog_text_dark {
-    color: $primary-fg-color;
+    color: $primary-content;
 }
 
 .mx_HostSignupDialog_text_light {
-    color: $secondary-fg-color;
+    color: $secondary-content;
 }
 
 .mx_HostSignup_maximize_button {
diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss
index 9fc4b7a15c..3a2918f9ec 100644
--- a/res/css/views/dialogs/_InviteDialog.scss
+++ b/res/css/views/dialogs/_InviteDialog.scss
@@ -56,7 +56,7 @@ limitations under the License.
             box-sizing: border-box;
             min-width: 40%;
             flex: 1 !important;
-            color: $primary-fg-color !important;
+            color: $primary-content !important;
         }
     }
 
@@ -94,7 +94,7 @@ limitations under the License.
     }
 
     > span {
-        color: $primary-fg-color;
+        color: $primary-content;
     }
 
     .mx_InviteDialog_subname {
@@ -110,7 +110,7 @@ limitations under the License.
     font-size: $font-14px;
 
     > span {
-        color: $primary-fg-color;
+        color: $primary-content;
         font-weight: 600;
     }
 
@@ -220,7 +220,7 @@ limitations under the License.
     .mx_InviteDialog_roomTile_name {
         font-weight: 600;
         font-size: $font-14px;
-        color: $primary-fg-color;
+        color: $primary-content;
         margin-left: 7px;
     }
 
@@ -352,7 +352,7 @@ limitations under the License.
     border-right: 0;
     border-radius: 0;
     margin-top: 0;
-    border-color: $quaternary-fg-color;
+    border-color: $quaternary-content;
 
     input {
         font-size: 18px;
@@ -418,7 +418,7 @@ limitations under the License.
     > h4 {
         font-size: $font-15px;
         line-height: $font-24px;
-        color: $secondary-fg-color;
+        color: $secondary-content;
         font-weight: normal;
     }
 
@@ -432,14 +432,14 @@ limitations under the License.
                     font-size: $font-15px;
                     line-height: $font-24px;
                     font-weight: $font-semi-bold;
-                    color: $primary-fg-color;
+                    color: $primary-content;
                 }
 
                 .mx_InviteDialog_multiInviterError_entry_userId {
                     margin-left: 6px;
                     font-size: $font-12px;
                     line-height: $font-15px;
-                    color: $tertiary-fg-color;
+                    color: $tertiary-content;
                 }
             }
 
diff --git a/res/css/views/dialogs/_JoinRuleDropdown.scss b/res/css/views/dialogs/_JoinRuleDropdown.scss
index c48a79af3c..91691cf53b 100644
--- a/res/css/views/dialogs/_JoinRuleDropdown.scss
+++ b/res/css/views/dialogs/_JoinRuleDropdown.scss
@@ -19,7 +19,7 @@ limitations under the License.
     font-weight: normal;
     font-family: $font-family;
     font-size: $font-14px;
-    color: $primary-fg-color;
+    color: $primary-content;
 
     .mx_Dropdown_input {
         border: 1px solid $input-border-color;
@@ -44,7 +44,7 @@ limitations under the License.
                 top: 8px;
                 mask-repeat: no-repeat;
                 mask-position: center;
-                background-color: $secondary-fg-color;
+                background-color: $secondary-content;
             }
         }
     }
diff --git a/res/css/views/dialogs/_LeaveSpaceDialog.scss b/res/css/views/dialogs/_LeaveSpaceDialog.scss
index c982f50e52..0d85a87faf 100644
--- a/res/css/views/dialogs/_LeaveSpaceDialog.scss
+++ b/res/css/views/dialogs/_LeaveSpaceDialog.scss
@@ -63,7 +63,7 @@ limitations under the License.
 
             font-size: $font-12px;
             line-height: $font-15px;
-            color: $secondary-fg-color;
+            color: $secondary-content;
 
             &::before {
                 content: '';
@@ -72,7 +72,7 @@ limitations under the License.
                 top: calc(50% - 8px); // vertical centering
                 height: 16px;
                 width: 16px;
-                background-color: $secondary-fg-color;
+                background-color: $secondary-content;
                 mask-repeat: no-repeat;
                 mask-size: contain;
                 mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
@@ -81,7 +81,7 @@ limitations under the License.
         }
 
         > p {
-            color: $primary-fg-color;
+            color: $primary-content;
         }
     }
 
diff --git a/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.scss b/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.scss
index 91df76675a..9a05e7f20a 100644
--- a/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.scss
+++ b/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.scss
@@ -23,7 +23,7 @@ limitations under the License.
 
 .mx_ManageRestrictedJoinRuleDialog {
     width: 480px;
-    color: $primary-fg-color;
+    color: $primary-content;
     display: flex;
     flex-direction: column;
     flex-wrap: nowrap;
@@ -52,7 +52,7 @@ limitations under the License.
 
         > h3 {
             margin: 0;
-            color: $secondary-fg-color;
+            color: $secondary-content;
             font-size: $font-12px;
             font-weight: $font-semi-bold;
             line-height: $font-15px;
@@ -85,7 +85,7 @@ limitations under the License.
                 margin-top: 8px;
                 font-size: $font-12px;
                 line-height: $font-15px;
-                color: $tertiary-fg-color;
+                color: $tertiary-content;
             }
 
             .mx_Checkbox {
@@ -113,7 +113,7 @@ limitations under the License.
 
         font-size: $font-12px;
         line-height: $font-15px;
-        color: $secondary-fg-color;
+        color: $secondary-content;
 
         &::before {
             content: '';
@@ -122,7 +122,7 @@ limitations under the License.
             top: calc(50% - 8px); // vertical centering
             height: 16px;
             width: 16px;
-            background-color: $secondary-fg-color;
+            background-color: $secondary-content;
             mask-repeat: no-repeat;
             mask-size: contain;
             mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
diff --git a/res/css/views/dialogs/_MessageEditHistoryDialog.scss b/res/css/views/dialogs/_MessageEditHistoryDialog.scss
index e9d777effd..4574344a28 100644
--- a/res/css/views/dialogs/_MessageEditHistoryDialog.scss
+++ b/res/css/views/dialogs/_MessageEditHistoryDialog.scss
@@ -37,7 +37,7 @@ limitations under the License.
     list-style-type: none;
     font-size: $font-14px;
     padding: 0;
-    color: $primary-fg-color;
+    color: $primary-content;
 
     span.mx_EditHistoryMessage_deletion, span.mx_EditHistoryMessage_insertion {
         padding: 0px 2px;
diff --git a/res/css/views/dialogs/_RegistrationEmailPromptDialog.scss b/res/css/views/dialogs/_RegistrationEmailPromptDialog.scss
index 31fc6d7a04..02c89e2e42 100644
--- a/res/css/views/dialogs/_RegistrationEmailPromptDialog.scss
+++ b/res/css/views/dialogs/_RegistrationEmailPromptDialog.scss
@@ -19,7 +19,7 @@ limitations under the License.
 
     .mx_Dialog_content {
         margin-bottom: 24px;
-        color: $tertiary-fg-color;
+        color: $tertiary-content;
     }
 
     .mx_Dialog_primary {
diff --git a/res/css/views/dialogs/_RoomSettingsDialogBridges.scss b/res/css/views/dialogs/_RoomSettingsDialogBridges.scss
index c97a3b69b7..f18b4917cf 100644
--- a/res/css/views/dialogs/_RoomSettingsDialogBridges.scss
+++ b/res/css/views/dialogs/_RoomSettingsDialogBridges.scss
@@ -72,7 +72,7 @@ limitations under the License.
             margin-top: 0px;
             margin-bottom: 0px;
             font-size: 16pt;
-            color: $primary-fg-color;
+            color: $primary-content;
         }
 
         > * {
@@ -81,7 +81,7 @@ limitations under the License.
         }
 
         .workspace-channel-details {
-            color: $primary-fg-color;
+            color: $primary-content;
             font-weight: 600;
 
             .channel {
diff --git a/res/css/views/dialogs/_ServerOfflineDialog.scss b/res/css/views/dialogs/_ServerOfflineDialog.scss
index ae4b70beb3..7a1b0bbcab 100644
--- a/res/css/views/dialogs/_ServerOfflineDialog.scss
+++ b/res/css/views/dialogs/_ServerOfflineDialog.scss
@@ -17,10 +17,10 @@ limitations under the License.
 .mx_ServerOfflineDialog {
     .mx_ServerOfflineDialog_content {
         padding-right: 85px;
-        color: $primary-fg-color;
+        color: $primary-content;
 
         hr {
-            border-color: $primary-fg-color;
+            border-color: $primary-content;
             opacity: 0.1;
             border-bottom: none;
         }
diff --git a/res/css/views/dialogs/_ServerPickerDialog.scss b/res/css/views/dialogs/_ServerPickerDialog.scss
index b01b49d7af..9a05751f91 100644
--- a/res/css/views/dialogs/_ServerPickerDialog.scss
+++ b/res/css/views/dialogs/_ServerPickerDialog.scss
@@ -22,7 +22,7 @@ limitations under the License.
         margin-bottom: 0;
 
         > p {
-            color: $secondary-fg-color;
+            color: $secondary-content;
             font-size: $font-14px;
             margin: 16px 0;
 
@@ -38,7 +38,7 @@ limitations under the License.
         > h4 {
             font-size: $font-15px;
             font-weight: $font-semi-bold;
-            color: $secondary-fg-color;
+            color: $secondary-content;
             margin-left: 8px;
         }
 
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/dialogs/_SpaceSettingsDialog.scss b/res/css/views/dialogs/_SpaceSettingsDialog.scss
index fa074fdbe8..a1fa9d52a8 100644
--- a/res/css/views/dialogs/_SpaceSettingsDialog.scss
+++ b/res/css/views/dialogs/_SpaceSettingsDialog.scss
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 .mx_SpaceSettingsDialog {
-    color: $primary-fg-color;
+    color: $primary-content;
 
     .mx_SpaceSettings_errorText {
         font-weight: $font-semi-bold;
@@ -50,13 +50,13 @@ limitations under the License.
             .mx_RadioButton_content {
                 font-weight: $font-semi-bold;
                 line-height: $font-18px;
-                color: $primary-fg-color;
+                color: $primary-content;
             }
 
             & + span {
                 font-size: $font-15px;
                 line-height: $font-18px;
-                color: $secondary-fg-color;
+                color: $secondary-content;
                 margin-left: 26px;
             }
         }
diff --git a/res/css/views/dialogs/security/_AccessSecretStorageDialog.scss b/res/css/views/dialogs/security/_AccessSecretStorageDialog.scss
index ec3bea0ef7..98edbf8ad8 100644
--- a/res/css/views/dialogs/security/_AccessSecretStorageDialog.scss
+++ b/res/css/views/dialogs/security/_AccessSecretStorageDialog.scss
@@ -44,7 +44,7 @@ limitations under the License.
     margin-right: 8px;
     position: relative;
     top: 5px;
-    background-color: $primary-fg-color;
+    background-color: $primary-content;
 }
 
 .mx_AccessSecretStorageDialog_resetBadge::before {
diff --git a/res/css/views/dialogs/security/_CreateSecretStorageDialog.scss b/res/css/views/dialogs/security/_CreateSecretStorageDialog.scss
index d30803b1f0..b14206ff6d 100644
--- a/res/css/views/dialogs/security/_CreateSecretStorageDialog.scss
+++ b/res/css/views/dialogs/security/_CreateSecretStorageDialog.scss
@@ -56,7 +56,7 @@ limitations under the License.
     margin-right: 8px;
     position: relative;
     top: 5px;
-    background-color: $primary-fg-color;
+    background-color: $primary-content;
 }
 
 .mx_CreateSecretStorageDialog_secureBackupTitle::before {
@@ -101,7 +101,7 @@ limitations under the License.
     margin-right: 8px;
     position: relative;
     top: 5px;
-    background-color: $primary-fg-color;
+    background-color: $primary-content;
 }
 
 .mx_CreateSecretStorageDialog_optionIcon_securePhrase {
diff --git a/res/css/views/dialogs/security/_KeyBackupFailedDialog.scss b/res/css/views/dialogs/security/_KeyBackupFailedDialog.scss
index 05ce158413..4a48012672 100644
--- a/res/css/views/dialogs/security/_KeyBackupFailedDialog.scss
+++ b/res/css/views/dialogs/security/_KeyBackupFailedDialog.scss
@@ -26,7 +26,7 @@ limitations under the License.
     &::before {
         mask: url("$(res)/img/e2e/lock-warning-filled.svg");
         mask-repeat: no-repeat;
-        background-color: $primary-fg-color;
+        background-color: $primary-content;
         content: "";
         position: absolute;
         top: -6px;
diff --git a/res/css/views/directory/_NetworkDropdown.scss b/res/css/views/directory/_NetworkDropdown.scss
index ae0927386a..93cecd8676 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;
 }
@@ -153,7 +153,7 @@ limitations under the License.
         mask-position: center;
         mask-size: contain;
         mask-image: url('$(res)/img/feather-customised/chevron-down-thin.svg');
-        background-color: $primary-fg-color;
+        background-color: $primary-content;
     }
 
     .mx_NetworkDropdown_handle_server {
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/_AddressTile.scss b/res/css/views/elements/_AddressTile.scss
index c42f52f8f4..90c40842f7 100644
--- a/res/css/views/elements/_AddressTile.scss
+++ b/res/css/views/elements/_AddressTile.scss
@@ -20,7 +20,7 @@ limitations under the License.
     background-color: rgba(74, 73, 74, 0.1);
     border: solid 1px $input-border-color;
     line-height: $font-26px;
-    color: $primary-fg-color;
+    color: $primary-content;
     font-size: $font-14px;
     font-weight: normal;
     margin-right: 4px;
diff --git a/res/css/views/elements/_Dropdown.scss b/res/css/views/elements/_Dropdown.scss
index 3b67e0191e..1acac70e42 100644
--- a/res/css/views/elements/_Dropdown.scss
+++ b/res/css/views/elements/_Dropdown.scss
@@ -16,7 +16,7 @@ limitations under the License.
 
 .mx_Dropdown {
     position: relative;
-    color: $primary-fg-color;
+    color: $primary-content;
 }
 
 .mx_Dropdown_disabled {
@@ -52,7 +52,7 @@ limitations under the License.
     padding-right: 9px;
     mask: url('$(res)/img/feather-customised/dropdown-arrow.svg');
     mask-repeat: no-repeat;
-    background: $primary-fg-color;
+    background: $primary-content;
 }
 
 .mx_Dropdown_option {
@@ -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..875e0e34d5 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 {
@@ -47,7 +47,7 @@ limitations under the License.
                 left: 0;
                 height: inherit;
                 width: inherit;
-                background: $tertiary-fg-color;
+                background: $tertiary-content;
                 mask-position: center;
                 mask-size: 20px;
                 mask-repeat: no-repeat;
@@ -60,6 +60,6 @@ limitations under the License.
         margin-left: 12px;
         font-size: $font-14px;
         line-height: $font-24px;
-        color: $tertiary-fg-color;
+        color: $tertiary-content;
     }
 }
diff --git a/res/css/views/elements/_Field.scss b/res/css/views/elements/_Field.scss
index 50cd14c4da..d74c985d4c 100644
--- a/res/css/views/elements/_Field.scss
+++ b/res/css/views/elements/_Field.scss
@@ -46,8 +46,8 @@ limitations under the License.
     // corners on the field above.
     border-radius: 4px;
     padding: 8px 9px;
-    color: $primary-fg-color;
-    background-color: $primary-bg-color;
+    color: $primary-content;
+    background-color: $background;
     flex: 1;
     min-width: 0;
 }
@@ -67,7 +67,7 @@ limitations under the License.
     height: 6px;
     mask: url('$(res)/img/feather-customised/dropdown-arrow.svg');
     mask-repeat: no-repeat;
-    background-color: $primary-fg-color;
+    background-color: $primary-content;
     z-index: 1;
     pointer-events: none;
 }
@@ -100,7 +100,7 @@ limitations under the License.
         color 0.25s ease-out 0.1s,
         top 0.25s ease-out 0.1s,
         background-color 0.25s ease-out 0.1s;
-    color: $primary-fg-color;
+    color: $primary-content;
     background-color: transparent;
     font-size: $font-14px;
     position: absolute;
diff --git a/res/css/views/elements/_InviteReason.scss b/res/css/views/elements/_InviteReason.scss
index 2c2e5687e6..8024ed59a3 100644
--- a/res/css/views/elements/_InviteReason.scss
+++ b/res/css/views/elements/_InviteReason.scss
@@ -32,12 +32,12 @@ limitations under the License.
         justify-content: center;
         align-items: center;
         cursor: pointer;
-        color: $secondary-fg-color;
+        color: $secondary-content;
 
         &::before {
             content: "";
             margin-right: 8px;
-            background-color: $secondary-fg-color;
+            background-color: $secondary-content;
             mask-image: url('$(res)/img/feather-customised/eye.svg');
             display: inline-block;
             width: 18px;
diff --git a/res/css/views/elements/_MiniAvatarUploader.scss b/res/css/views/elements/_MiniAvatarUploader.scss
index df4676ab56..46ffd9a01c 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;
 
@@ -45,7 +45,7 @@ limitations under the License.
             height: 100%;
             width: 100%;
 
-            background-color: $secondary-fg-color;
+            background-color: $secondary-content;
             mask-position: center;
             mask-repeat: no-repeat;
             mask-image: url('$(res)/img/element-icons/camera.svg');
diff --git a/res/css/views/elements/_RichText.scss b/res/css/views/elements/_RichText.scss
index d60282695c..b9d845ea7a 100644
--- a/res/css/views/elements/_RichText.scss
+++ b/res/css/views/elements/_RichText.scss
@@ -43,7 +43,7 @@ a.mx_Pill {
 /* More specific to override `.markdown-body a` color */
 .mx_EventTile_content .markdown-body a.mx_UserPill,
 .mx_UserPill {
-    color: $primary-fg-color;
+    color: $primary-content;
     background-color: $other-user-pill-bg-color;
 }
 
diff --git a/res/css/views/elements/_SSOButtons.scss b/res/css/views/elements/_SSOButtons.scss
index e02816780f..a98e7b4024 100644
--- a/res/css/views/elements/_SSOButtons.scss
+++ b/res/css/views/elements/_SSOButtons.scss
@@ -35,7 +35,7 @@ limitations under the License.
         font-size: $font-14px;
         font-weight: $font-semi-bold;
         border: 1px solid $input-border-color;
-        color: $primary-fg-color;
+        color: $primary-content;
 
         > img {
             object-fit: contain;
diff --git a/res/css/views/elements/_ServerPicker.scss b/res/css/views/elements/_ServerPicker.scss
index 188eb5d655..d828d7cb88 100644
--- a/res/css/views/elements/_ServerPicker.scss
+++ b/res/css/views/elements/_ServerPicker.scss
@@ -74,7 +74,7 @@ limitations under the License.
 
     .mx_ServerPicker_desc {
         margin-top: -12px;
-        color: $tertiary-fg-color;
+        color: $tertiary-content;
         grid-column: 1 / 2;
         grid-row: 3;
         margin-bottom: 16px;
diff --git a/res/css/views/elements/_Spinner.scss b/res/css/views/elements/_Spinner.scss
index 93d5e2d96c..2df46687af 100644
--- a/res/css/views/elements/_Spinner.scss
+++ b/res/css/views/elements/_Spinner.scss
@@ -37,7 +37,7 @@ limitations under the License.
 }
 
 .mx_Spinner_icon {
-    background-color: $primary-fg-color;
+    background-color: $primary-content;
     mask: url('$(res)/img/spinner.svg');
     mask-size: contain;
     animation: 1.1s steps(12, end) infinite spin;
diff --git a/res/css/views/elements/_TagComposer.scss b/res/css/views/elements/_TagComposer.scss
index a6ade6f8df..f5bdb8d2d5 100644
--- a/res/css/views/elements/_TagComposer.scss
+++ b/res/css/views/elements/_TagComposer.scss
@@ -50,7 +50,7 @@ limitations under the License.
             &::before {
                 content: '';
                 border-radius: 20px;
-                background-color: $tertiary-fg-color;
+                background-color: $tertiary-content;
                 opacity: 0.15;
                 position: absolute;
                 top: 0;
diff --git a/res/css/views/elements/_Tooltip.scss b/res/css/views/elements/_Tooltip.scss
index d90c818f94..6c5a7da55a 100644
--- a/res/css/views/elements/_Tooltip.scss
+++ b/res/css/views/elements/_Tooltip.scss
@@ -84,7 +84,7 @@ limitations under the License.
 // These tooltips use an older style with a chevron
 .mx_Field_tooltip {
     background-color: $menu-bg-color;
-    color: $primary-fg-color;
+    color: $primary-content;
     border: 1px solid $menu-border-color;
     text-align: unset;
 
diff --git a/res/css/views/emojipicker/_EmojiPicker.scss b/res/css/views/emojipicker/_EmojiPicker.scss
index 400e40e233..91c68158c9 100644
--- a/res/css/views/emojipicker/_EmojiPicker.scss
+++ b/res/css/views/emojipicker/_EmojiPicker.scss
@@ -57,7 +57,7 @@ limitations under the License.
 }
 
 .mx_EmojiPicker_anchor::before {
-    background-color: $primary-fg-color;
+    background-color: $primary-content;
     content: '';
     display: inline-block;
     mask-size: 100%;
@@ -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 {
@@ -126,7 +126,7 @@ limitations under the License.
 .mx_EmojiPicker_search_icon::after {
     mask: url('$(res)/img/emojipicker/search.svg') no-repeat;
     mask-size: 100%;
-    background-color: $primary-fg-color;
+    background-color: $primary-content;
     content: '';
     display: inline-block;
     width: 100%;
diff --git a/res/css/views/groups/_GroupRoomList.scss b/res/css/views/groups/_GroupRoomList.scss
index fefd17849c..2f6559f7c4 100644
--- a/res/css/views/groups/_GroupRoomList.scss
+++ b/res/css/views/groups/_GroupRoomList.scss
@@ -16,7 +16,7 @@ limitations under the License.
 
 .mx_GroupRoomTile {
     position: relative;
-    color: $primary-fg-color;
+    color: $primary-content;
     cursor: pointer;
     display: flex;
     align-items: center;
diff --git a/res/css/views/messages/_CallEvent.scss b/res/css/views/messages/_CallEvent.scss
index afc2c93f79..7934f8f3c2 100644
--- a/res/css/views/messages/_CallEvent.scss
+++ b/res/css/views/messages/_CallEvent.scss
@@ -41,7 +41,7 @@ limitations under the License.
 
                 height: 16px;
                 width: 16px;
-                background-color: $secondary-fg-color;
+                background-color: $secondary-content;
                 mask-repeat: no-repeat;
                 mask-size: contain;
                 mask-position: center;
@@ -116,7 +116,7 @@ limitations under the License.
 
                 .mx_CallEvent_type {
                     font-weight: 400;
-                    color: $secondary-fg-color;
+                    color: $secondary-content;
                     font-size: 1.2rem;
                     line-height: $font-13px;
                     display: flex;
@@ -132,7 +132,7 @@ limitations under the License.
                             position: absolute;
                             height: 13px;
                             width: 13px;
-                            background-color: $secondary-fg-color;
+                            background-color: $secondary-content;
                             mask-repeat: no-repeat;
                             mask-size: contain;
                         }
@@ -145,7 +145,7 @@ limitations under the License.
             display: flex;
             flex-direction: row;
             align-items: center;
-            color: $secondary-fg-color;
+            color: $secondary-content;
             margin-right: 16px;
             gap: 8px;
             min-width: max-content;
diff --git a/res/css/views/messages/_MImageBody.scss b/res/css/views/messages/_MImageBody.scss
index b3a62896b2..920c3011f5 100644
--- a/res/css/views/messages/_MImageBody.scss
+++ b/res/css/views/messages/_MImageBody.scss
@@ -38,7 +38,7 @@ $timelineImageBorderRadius: 4px;
     }
 
     .mx_no-image-placeholder {
-        background-color: $primary-bg-color;
+        background-color: $primary-content;
     }
 }
 
@@ -100,5 +100,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..c6983ae631 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;
@@ -77,11 +77,11 @@ limitations under the License.
     mask-size: 18px;
     mask-repeat: no-repeat;
     mask-position: center;
-    background-color: $secondary-fg-color;
+    background-color: $secondary-content;
 }
 
 .mx_MessageActionBar_maskButton:hover::after {
-    background-color: $primary-fg-color;
+    background-color: $primary-content;
 }
 
 .mx_MessageActionBar_reactButton::after {
diff --git a/res/css/views/messages/_ReactionsRow.scss b/res/css/views/messages/_ReactionsRow.scss
index b2bca6dfb3..1b0b847932 100644
--- a/res/css/views/messages/_ReactionsRow.scss
+++ b/res/css/views/messages/_ReactionsRow.scss
@@ -16,7 +16,7 @@ limitations under the License.
 
 .mx_ReactionsRow {
     margin: 6px 0;
-    color: $primary-fg-color;
+    color: $primary-content;
 
     .mx_ReactionsRow_addReactionButton {
         position: relative;
@@ -36,7 +36,7 @@ limitations under the License.
             mask-size: 16px;
             mask-repeat: no-repeat;
             mask-position: center;
-            background-color: $tertiary-fg-color;
+            background-color: $tertiary-content;
             mask-image: url('$(res)/img/element-icons/room/message-bar/emoji.svg');
         }
 
@@ -46,7 +46,7 @@ limitations under the License.
 
         &:hover, &.mx_ReactionsRow_addReactionButton_active {
             &::before {
-                background-color: $primary-fg-color;
+                background-color: $primary-content;
             }
         }
     }
@@ -64,10 +64,10 @@ limitations under the License.
     vertical-align: middle;
 
     &:link, &:visited {
-        color: $tertiary-fg-color;
+        color: $tertiary-content;
     }
 
     &:hover {
-        color: $primary-fg-color;
+        color: $primary-content;
     }
 }
diff --git a/res/css/views/right_panel/_BaseCard.scss b/res/css/views/right_panel/_BaseCard.scss
index 9a5a59bda8..8c1a55fe05 100644
--- a/res/css/views/right_panel/_BaseCard.scss
+++ b/res/css/views/right_panel/_BaseCard.scss
@@ -93,7 +93,7 @@ limitations under the License.
         }
 
         > h1 {
-            color: $tertiary-fg-color;
+            color: $tertiary-content;
             font-size: $font-12px;
             font-weight: 500;
         }
@@ -145,7 +145,7 @@ limitations under the License.
         justify-content: space-around;
 
         .mx_AccessibleButton_kind_secondary {
-            color: $secondary-fg-color;
+            color: $secondary-content;
             background-color: rgba(141, 151, 165, 0.2);
             font-weight: $font-semi-bold;
             font-size: $font-14px;
diff --git a/res/css/views/right_panel/_PinnedMessagesCard.scss b/res/css/views/right_panel/_PinnedMessagesCard.scss
index 785aee09ca..f3861a3dec 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;
@@ -66,7 +66,7 @@ limitations under the License.
                     z-index: 1;
 
                     &::after {
-                        background-color: $primary-fg-color;
+                        background-color: $primary-content;
                     }
                 }
             }
@@ -75,7 +75,7 @@ limitations under the License.
                 font-weight: $font-semi-bold;
                 font-size: $font-15px;
                 line-height: $font-24px;
-                color: $primary-fg-color;
+                color: $primary-content;
                 margin-top: 24px;
                 margin-bottom: 20px;
             }
@@ -83,7 +83,7 @@ limitations under the License.
             > span {
                 font-size: $font-12px;
                 line-height: $font-15px;
-                color: $secondary-fg-color;
+                color: $secondary-content;
             }
         }
     }
diff --git a/res/css/views/right_panel/_RoomSummaryCard.scss b/res/css/views/right_panel/_RoomSummaryCard.scss
index dc7804d072..fcb83dfd7a 100644
--- a/res/css/views/right_panel/_RoomSummaryCard.scss
+++ b/res/css/views/right_panel/_RoomSummaryCard.scss
@@ -27,7 +27,7 @@ limitations under the License.
 
         .mx_RoomSummaryCard_alias {
             font-size: $font-13px;
-            color: $secondary-fg-color;
+            color: $secondary-content;
         }
 
         h2, .mx_RoomSummaryCard_alias {
@@ -115,7 +115,7 @@ limitations under the License.
             // as we will be applying it in its children
             padding: 0;
             height: auto;
-            color: $tertiary-fg-color;
+            color: $tertiary-content;
 
             .mx_RoomSummaryCard_icon_app {
                 padding: 10px 48px 10px 12px; // based on typical mx_RoomSummaryCard_Button padding
@@ -128,7 +128,7 @@ limitations under the License.
                 }
 
                 span {
-                    color: $primary-fg-color;
+                    color: $primary-content;
                 }
             }
 
diff --git a/res/css/views/right_panel/_UserInfo.scss b/res/css/views/right_panel/_UserInfo.scss
index 6632ccddf9..edc82cfdbf 100644
--- a/res/css/views/right_panel/_UserInfo.scss
+++ b/res/css/views/right_panel/_UserInfo.scss
@@ -55,7 +55,7 @@ limitations under the License.
     }
 
     .mx_UserInfo_separator {
-        border-bottom: 1px solid rgba($primary-fg-color, .1);
+        border-bottom: 1px solid rgba($primary-content, .1);
     }
 
     .mx_UserInfo_memberDetailsContainer {
diff --git a/res/css/views/right_panel/_WidgetCard.scss b/res/css/views/right_panel/_WidgetCard.scss
index a90e744a5a..824f1fcb2f 100644
--- a/res/css/views/right_panel/_WidgetCard.scss
+++ b/res/css/views/right_panel/_WidgetCard.scss
@@ -51,7 +51,7 @@ limitations under the License.
                 mask-position: center;
                 mask-size: contain;
                 mask-image: url('$(res)/img/element-icons/room/ellipsis.svg');
-                background-color: $secondary-fg-color;
+                background-color: $secondary-content;
             }
         }
     }
diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss
index fd80836237..cfcb0c48a2 100644
--- a/res/css/views/rooms/_AppsDrawer.scss
+++ b/res/css/views/rooms/_AppsDrawer.scss
@@ -64,7 +64,7 @@ $MiniAppTileHeight: 200px;
     &:hover {
         .mx_AppsContainer_resizerHandle::after {
             opacity: 0.8;
-            background: $primary-fg-color;
+            background: $primary-content;
         }
 
         .mx_ResizeHandle_horizontal::before {
@@ -79,7 +79,7 @@ $MiniAppTileHeight: 200px;
 
             content: '';
 
-            background-color: $primary-fg-color;
+            background-color: $primary-content;
             opacity: 0.8;
         }
     }
diff --git a/res/css/views/rooms/_Autocomplete.scss b/res/css/views/rooms/_Autocomplete.scss
index ffe1011f51..529936b2b2 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: 35vh;
@@ -26,7 +26,7 @@
     user-select: none;
     cursor: pointer;
     align-items: center;
-    color: $primary-fg-color;
+    color: $primary-content;
 }
 
 .mx_Autocomplete_Completion_block * {
@@ -42,7 +42,7 @@
     user-select: none;
     cursor: pointer;
     align-items: center;
-    color: $primary-fg-color;
+    color: $primary-content;
 }
 
 .mx_Autocomplete_Completion_pill > * {
@@ -84,7 +84,7 @@
 
 .mx_Autocomplete_provider_name {
     margin: 12px;
-    color: $primary-fg-color;
+    color: $primary-content;
     font-weight: 400;
     opacity: 0.4;
 }
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/_EntityTile.scss b/res/css/views/rooms/_EntityTile.scss
index 27a4e67089..a2ebd6c11b 100644
--- a/res/css/views/rooms/_EntityTile.scss
+++ b/res/css/views/rooms/_EntityTile.scss
@@ -18,7 +18,7 @@ limitations under the License.
 .mx_EntityTile {
     display: flex;
     align-items: center;
-    color: $primary-fg-color;
+    color: $primary-content;
     cursor: pointer;
 
     .mx_E2EIcon {
@@ -86,12 +86,12 @@ limitations under the License.
 
 .mx_EntityTile_ellipsis .mx_EntityTile_name {
     font-style: italic;
-    color: $primary-fg-color;
+    color: $primary-content;
 }
 
 .mx_EntityTile_invitePlaceholder .mx_EntityTile_name {
     font-style: italic;
-    color: $primary-fg-color;
+    color: $primary-content;
 }
 
 .mx_EntityTile_unavailable .mx_EntityTile_avatar,
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 56cede0895..dcfb308ac4 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -55,7 +55,7 @@ $hover-select-border: 4px;
     }
 
     .mx_SenderProfile {
-        color: $primary-fg-color;
+        color: $primary-content;
         font-size: $font-14px;
         display: inline-block; /* anti-zalgo, with overflow hidden */
         overflow: hidden;
@@ -161,7 +161,7 @@ $hover-select-border: 4px;
         // up with the other read receipts
 
         &::before {
-            background-color: $tertiary-fg-color;
+            background-color: $tertiary-content;
             mask-repeat: no-repeat;
             mask-position: center;
             mask-size: 14px;
@@ -618,7 +618,7 @@ $hover-select-border: 4px;
 }
 
 .mx_EventTile_keyRequestInfo_text a {
-    color: $primary-fg-color;
+    color: $primary-content;
     text-decoration: underline;
     cursor: pointer;
 }
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/_MemberInfo.scss b/res/css/views/rooms/_MemberInfo.scss
index 3f7f83d334..4abd9c7c30 100644
--- a/res/css/views/rooms/_MemberInfo.scss
+++ b/res/css/views/rooms/_MemberInfo.scss
@@ -111,7 +111,7 @@ limitations under the License.
 .mx_MemberInfo_field {
     cursor: pointer;
     font-size: $font-15px;
-    color: $primary-fg-color;
+    color: $primary-content;
     margin-left: 8px;
     line-height: $font-23px;
 }
diff --git a/res/css/views/rooms/_MessageComposer.scss b/res/css/views/rooms/_MessageComposer.scss
index 5e2eff4047..d164fac8f2 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 {
@@ -160,8 +160,8 @@ limitations under the License.
     resize: none;
     outline: none;
     box-shadow: none;
-    color: $primary-fg-color;
-    background-color: $primary-bg-color;
+    color: $primary-content;
+    background-color: $background;
     font-size: $font-14px;
     max-height: 120px;
     overflow: auto;
diff --git a/res/css/views/rooms/_NewRoomIntro.scss b/res/css/views/rooms/_NewRoomIntro.scss
index e0cccfa885..f0e471d384 100644
--- a/res/css/views/rooms/_NewRoomIntro.scss
+++ b/res/css/views/rooms/_NewRoomIntro.scss
@@ -67,6 +67,6 @@ limitations under the License.
     > p {
         margin: 0;
         font-size: $font-15px;
-        color: $secondary-fg-color;
+        color: $secondary-content;
     }
 }
diff --git a/res/css/views/rooms/_NotificationBadge.scss b/res/css/views/rooms/_NotificationBadge.scss
index 64b2623238..670e057cfa 100644
--- a/res/css/views/rooms/_NotificationBadge.scss
+++ b/res/css/views/rooms/_NotificationBadge.scss
@@ -42,7 +42,7 @@ limitations under the License.
         // These are the 3 background types
 
         &.mx_NotificationBadge_dot {
-            background-color: $primary-fg-color; // increased visibility
+            background-color: $primary-content; // increased visibility
 
             width: 6px;
             height: 6px;
diff --git a/res/css/views/rooms/_PinnedEventTile.scss b/res/css/views/rooms/_PinnedEventTile.scss
index 15b3c16faa..07978a8f65 100644
--- a/res/css/views/rooms/_PinnedEventTile.scss
+++ b/res/css/views/rooms/_PinnedEventTile.scss
@@ -67,7 +67,7 @@ limitations under the License.
             //left: 0;
             height: inherit;
             width: inherit;
-            background: $secondary-fg-color;
+            background: $secondary-content;
             mask-position: center;
             mask-size: 8px;
             mask-repeat: no-repeat;
@@ -87,7 +87,7 @@ limitations under the License.
         .mx_PinnedEventTile_timestamp {
             font-size: inherit;
             line-height: inherit;
-            color: $secondary-fg-color;
+            color: $secondary-content;
         }
 
         .mx_AccessibleButton_kind_link {
diff --git a/res/css/views/rooms/_ReplyPreview.scss b/res/css/views/rooms/_ReplyPreview.scss
index 60feb39d11..70a820e412 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;
@@ -28,7 +28,7 @@ limitations under the License.
 
         .mx_ReplyPreview_header {
             margin: 8px;
-            color: $primary-fg-color;
+            color: $primary-content;
             font-weight: 400;
             opacity: 0.4;
         }
diff --git a/res/css/views/rooms/_ReplyTile.scss b/res/css/views/rooms/_ReplyTile.scss
index fd21e5f348..3ef6491ec9 100644
--- a/res/css/views/rooms/_ReplyTile.scss
+++ b/res/css/views/rooms/_ReplyTile.scss
@@ -42,7 +42,7 @@ limitations under the License.
         display: flex;
         flex-direction: column;
         text-decoration: none;
-        color: $primary-fg-color;
+        color: $primary-content;
     }
 
     .mx_RedactedBody {
diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss
index 4142b0a2ef..81dfa90c96 100644
--- a/res/css/views/rooms/_RoomHeader.scss
+++ b/res/css/views/rooms/_RoomHeader.scss
@@ -17,7 +17,7 @@ limitations under the License.
 .mx_RoomHeader {
     flex: 0 0 50px;
     border-bottom: 1px solid $primary-hairline-color;
-    background-color: $roomheader-bg-color;
+    background-color: $background;
 
     .mx_RoomHeader_e2eIcon {
         height: 12px;
@@ -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/_RoomList.scss b/res/css/views/rooms/_RoomList.scss
index 8eda25d0c9..7d967661a6 100644
--- a/res/css/views/rooms/_RoomList.scss
+++ b/res/css/views/rooms/_RoomList.scss
@@ -43,11 +43,11 @@ limitations under the License.
     div:first-child {
         font-weight: $font-semi-bold;
         line-height: $font-18px;
-        color: $primary-fg-color;
+        color: $primary-content;
     }
 
     .mx_AccessibleButton {
-        color: $primary-fg-color;
+        color: $primary-content;
         position: relative;
         padding: 8px 8px 8px 32px;
         font-size: inherit;
@@ -64,7 +64,7 @@ limitations under the License.
             position: absolute;
             top: 8px;
             left: 8px;
-            background: $secondary-fg-color;
+            background: $secondary-content;
             mask-position: center;
             mask-size: contain;
             mask-repeat: no-repeat;
diff --git a/res/css/views/rooms/_RoomSublist.scss b/res/css/views/rooms/_RoomSublist.scss
index 146b3edf71..3fffbfd64c 100644
--- a/res/css/views/rooms/_RoomSublist.scss
+++ b/res/css/views/rooms/_RoomSublist.scss
@@ -233,7 +233,7 @@ limitations under the License.
         &:hover, &.mx_RoomSublist_hasMenuOpen {
             .mx_RoomSublist_resizerHandle {
                 opacity: 0.8;
-                background-color: $primary-fg-color;
+                background-color: $primary-content;
             }
         }
     }
diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss
index b8f4aeb6e7..0c04f27115 100644
--- a/res/css/views/rooms/_RoomTile.scss
+++ b/res/css/views/rooms/_RoomTile.scss
@@ -124,7 +124,7 @@ limitations under the License.
             mask-position: center;
             mask-size: contain;
             mask-repeat: no-repeat;
-            background: $primary-fg-color;
+            background: $primary-content;
         }
     }
 
diff --git a/res/css/views/rooms/_SearchBar.scss b/res/css/views/rooms/_SearchBar.scss
index d9f730a8b6..e08168a122 100644
--- a/res/css/views/rooms/_SearchBar.scss
+++ b/res/css/views/rooms/_SearchBar.scss
@@ -47,7 +47,7 @@ limitations under the License.
         padding: 5px;
         font-size: $font-15px;
         cursor: pointer;
-        color: $primary-fg-color;
+        color: $primary-content;
         border-bottom: 2px solid $accent-color;
         font-weight: 600;
     }
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/_VoiceRecordComposerTile.scss b/res/css/views/rooms/_VoiceRecordComposerTile.scss
index 8196d5c67a..69fe292c0a 100644
--- a/res/css/views/rooms/_VoiceRecordComposerTile.scss
+++ b/res/css/views/rooms/_VoiceRecordComposerTile.scss
@@ -48,7 +48,7 @@ limitations under the License.
 
 .mx_VoiceRecordComposerTile_uploadingState {
     margin-right: 10px;
-    color: $secondary-fg-color;
+    color: $secondary-content;
 }
 
 .mx_VoiceRecordComposerTile_failedState {
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/settings/_LayoutSwitcher.scss b/res/css/views/settings/_LayoutSwitcher.scss
index 924fe5ae1b..00fb8aba56 100644
--- a/res/css/views/settings/_LayoutSwitcher.scss
+++ b/res/css/views/settings/_LayoutSwitcher.scss
@@ -21,7 +21,7 @@ limitations under the License.
         flex-direction: row;
         gap: 24px;
 
-        color: $primary-fg-color;
+        color: $primary-content;
 
         > .mx_LayoutSwitcher_RadioButton {
             flex-grow: 0;
diff --git a/res/css/views/settings/_Notifications.scss b/res/css/views/settings/_Notifications.scss
index f93e0a53a8..a0e46c0071 100644
--- a/res/css/views/settings/_Notifications.scss
+++ b/res/css/views/settings/_Notifications.scss
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 .mx_UserNotifSettings {
-    color: $primary-fg-color; // override from default settings page styles
+    color: $primary-content; // override from default settings page styles
 
     .mx_UserNotifSettings_pushRulesTable {
         width: calc(100% + 12px); // +12px to line up center of 'Noisy' column with toggle switches
@@ -34,7 +34,7 @@ limitations under the License.
         }
 
         tr > th:nth-child(n + 2) {
-            color: $secondary-fg-color;
+            color: $secondary-content;
             font-size: $font-12px;
             vertical-align: middle;
             width: 66px;
diff --git a/res/css/views/settings/tabs/_SettingsTab.scss b/res/css/views/settings/tabs/_SettingsTab.scss
index 3290a998ab..5aa9db7e86 100644
--- a/res/css/views/settings/tabs/_SettingsTab.scss
+++ b/res/css/views/settings/tabs/_SettingsTab.scss
@@ -25,7 +25,7 @@ limitations under the License.
 .mx_SettingsTab_heading {
     font-size: $font-20px;
     font-weight: 600;
-    color: $primary-fg-color;
+    color: $primary-content;
     margin-bottom: 10px;
 }
 
@@ -37,7 +37,7 @@ limitations under the License.
     font-size: $font-16px;
     display: block;
     font-weight: 600;
-    color: $primary-fg-color;
+    color: $primary-content;
     margin-bottom: 10px;
     margin-top: 12px;
 }
@@ -72,7 +72,7 @@ limitations under the License.
     vertical-align: middle;
     display: inline-block;
     font-size: $font-14px;
-    color: $primary-fg-color;
+    color: $primary-content;
     max-width: calc(100% - $font-48px); // Force word wrap instead of colliding with the switch
     box-sizing: border-box;
     padding-right: 10px;
@@ -82,7 +82,7 @@ limitations under the License.
     margin-top: 4px;
     font-size: $font-12px;
     line-height: $font-15px;
-    color: $secondary-fg-color;
+    color: $secondary-content;
 }
 
 .mx_SettingsTab_section .mx_SettingsFlag .mx_ToggleSwitch {
diff --git a/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss b/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss
index 2aab201352..8fd0f14418 100644
--- a/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss
+++ b/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss
@@ -22,7 +22,7 @@ limitations under the License.
 
     .mx_SecurityRoomSettingsTab_spacesWithAccess {
         > h4 {
-            color: $secondary-fg-color;
+            color: $secondary-content;
             font-weight: $font-semi-bold;
             font-size: $font-12px;
             line-height: $font-15px;
@@ -33,7 +33,7 @@ limitations under the License.
             font-weight: 500;
             font-size: $font-14px;
             line-height: 32px; // matches height of avatar for v-align
-            color: $secondary-fg-color;
+            color: $secondary-content;
             display: inline-block;
 
             img.mx_RoomAvatar_isSpaceRoom,
@@ -89,7 +89,7 @@ limitations under the License.
             font-weight: $font-semi-bold;
             font-size: $font-15px;
             line-height: $font-24px;
-            color: $primary-fg-color;
+            color: $primary-content;
             display: block;
         }
     }
@@ -100,7 +100,7 @@ limitations under the License.
         margin-bottom: 16px;
         font-size: $font-15px;
         line-height: $font-24px;
-        color: $secondary-fg-color;
+        color: $secondary-content;
 
         & + .mx_RadioButton {
             border-top: 1px solid $menu-border-color;
diff --git a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
index d8e617a40d..57c6e9b865 100644
--- a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
+++ b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
@@ -24,7 +24,7 @@ limitations under the License.
 }
 
 .mx_AppearanceUserSettingsTab_fontScaling {
-    color: $primary-fg-color;
+    color: $primary-content;
 }
 
 .mx_AppearanceUserSettingsTab_fontSlider {
@@ -81,7 +81,7 @@ limitations under the License.
 
 .mx_AppearanceUserSettingsTab_themeSection {
     $radio-bg-color: $input-darker-bg-color;
-    color: $primary-fg-color;
+    color: $primary-content;
 
     > .mx_ThemeSelectors {
         display: flex;
@@ -156,7 +156,7 @@ limitations under the License.
 }
 
 .mx_AppearanceUserSettingsTab_Advanced {
-    color: $primary-fg-color;
+    color: $primary-content;
 
     > * {
         margin-bottom: 16px;
diff --git a/res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.scss b/res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.scss
index 4cdfa0b40f..d1076205ad 100644
--- a/res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.scss
+++ b/res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.scss
@@ -30,7 +30,7 @@ limitations under the License.
             font-weight: $font-semi-bold;
             font-size: $font-15px;
             line-height: $font-18px;
-            color: $primary-fg-color;
+            color: $primary-content;
             margin: 16px 0;
 
             .mx_BaseAvatar {
diff --git a/res/css/views/spaces/_SpaceBasicSettings.scss b/res/css/views/spaces/_SpaceBasicSettings.scss
index c73e0715dd..bff574ded3 100644
--- a/res/css/views/spaces/_SpaceBasicSettings.scss
+++ b/res/css/views/spaces/_SpaceBasicSettings.scss
@@ -27,7 +27,7 @@ limitations under the License.
             position: relative;
             height: 80px;
             width: 80px;
-            background-color: $tertiary-fg-color;
+            background-color: $tertiary-content;
             border-radius: 16px;
         }
 
diff --git a/res/css/views/spaces/_SpaceCreateMenu.scss b/res/css/views/spaces/_SpaceCreateMenu.scss
index 41536bc8b1..3f526a6bba 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 {
@@ -40,7 +40,7 @@ $spacePanelWidth: 71px;
 
             > p {
                 font-size: $font-15px;
-                color: $secondary-fg-color;
+                color: $secondary-content;
             }
 
             .mx_SpaceFeedbackPrompt {
@@ -76,7 +76,7 @@ $spacePanelWidth: 71px;
                 width: 28px;
                 top: 0;
                 left: 0;
-                background-color: $tertiary-fg-color;
+                background-color: $tertiary-content;
                 transform: rotate(90deg);
                 mask-repeat: no-repeat;
                 mask-position: 2px 3px;
@@ -108,7 +108,7 @@ $spacePanelWidth: 71px;
     line-height: $font-24px;
 
     > span {
-        color: $secondary-fg-color;
+        color: $secondary-content;
         position: relative;
         font-size: inherit;
         line-height: inherit;
diff --git a/res/css/views/toasts/_IncomingCallToast.scss b/res/css/views/toasts/_IncomingCallToast.scss
index eb80f2d5cf..cb05b1a977 100644
--- a/res/css/views/toasts/_IncomingCallToast.scss
+++ b/res/css/views/toasts/_IncomingCallToast.scss
@@ -43,7 +43,7 @@ limitations under the License.
         .mx_CallEvent_type {
             font-size: $font-12px;
             line-height: $font-15px;
-            color: $tertiary-fg-color;
+            color: $tertiary-content;
 
             margin-top: 4px;
             margin-bottom: 6px;
@@ -62,7 +62,7 @@ limitations under the License.
                     position: absolute;
                     height: inherit;
                     width: inherit;
-                    background-color: $tertiary-fg-color;
+                    background-color: $tertiary-content;
                     mask-repeat: no-repeat;
                     mask-size: contain;
                 }
@@ -139,7 +139,7 @@ limitations under the License.
 
             height: inherit;
             width: inherit;
-            background-color: $tertiary-fg-color;
+            background-color: $tertiary-content;
             mask-repeat: no-repeat;
             mask-size: contain;
             mask-position: center;
diff --git a/res/css/views/voip/_CallViewForRoom.scss b/res/css/views/voip/_CallViewForRoom.scss
index 769e00338e..d23fcc18bc 100644
--- a/res/css/views/voip/_CallViewForRoom.scss
+++ b/res/css/views/voip/_CallViewForRoom.scss
@@ -39,7 +39,7 @@ limitations under the License.
                 width: 100%;
                 max-width: 64px;
 
-                background-color: $primary-fg-color;
+                background-color: $primary-content;
             }
         }
     }
diff --git a/res/css/views/voip/_CallViewHeader.scss b/res/css/views/voip/_CallViewHeader.scss
index 014cfce478..0575f4f535 100644
--- a/res/css/views/voip/_CallViewHeader.scss
+++ b/res/css/views/voip/_CallViewHeader.scss
@@ -53,7 +53,7 @@ limitations under the License.
         height: 20px;
         width: 20px;
         vertical-align: middle;
-        background-color: $secondary-fg-color;
+        background-color: $secondary-content;
         mask-repeat: no-repeat;
         mask-size: contain;
         mask-position: center;
@@ -90,7 +90,7 @@ limitations under the License.
 
 .mx_CallViewHeader_callTypeSmall {
     font-size: 12px;
-    color: $secondary-fg-color;
+    color: $secondary-content;
     line-height: initial;
     height: 15px;
     overflow: hidden;
@@ -113,7 +113,7 @@ limitations under the License.
 
         height: 16px;
         width: 16px;
-        background-color: $secondary-fg-color;
+        background-color: $secondary-content;
         mask-repeat: no-repeat;
         mask-size: contain;
         mask-position: center;
diff --git a/res/css/views/voip/_DialPad.scss b/res/css/views/voip/_DialPad.scss
index eefd2e9ba5..288f1f5d31 100644
--- a/res/css/views/voip/_DialPad.scss
+++ b/res/css/views/voip/_DialPad.scss
@@ -33,7 +33,7 @@ limitations under the License.
 
     width: 40px;
     height: 40px;
-    background-color: $dialpad-button-bg-color;
+    background-color: $quinary-content;
     border-radius: 40px;
     font-size: 18px;
     font-weight: 600;
diff --git a/res/css/views/voip/_DialPadContextMenu.scss b/res/css/views/voip/_DialPadContextMenu.scss
index 527d223ffc..d2014241e9 100644
--- a/res/css/views/voip/_DialPadContextMenu.scss
+++ b/res/css/views/voip/_DialPadContextMenu.scss
@@ -30,7 +30,7 @@ limitations under the License.
     margin-right: 20px;
 
     /* a separator between the input line and the dial buttons */
-    border-bottom: 1px solid $quaternary-fg-color;
+    border-bottom: 1px solid $quaternary-content;
     transition: border-bottom 0.25s;
 }
 
diff --git a/res/css/views/voip/_DialPadModal.scss b/res/css/views/voip/_DialPadModal.scss
index b8042f77ae..f378507f90 100644
--- a/res/css/views/voip/_DialPadModal.scss
+++ b/res/css/views/voip/_DialPadModal.scss
@@ -30,7 +30,7 @@ limitations under the License.
     margin-right: 40px;
 
     /* a separator between the input line and the dial buttons */
-    border-bottom: 1px solid $quaternary-fg-color;
+    border-bottom: 1px solid $quaternary-content;
     transition: border-bottom 0.25s;
 }
 
diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
index bdf66e28bc..4a6db5dd55 100644
--- a/res/themes/dark/css/_dark.scss
+++ b/res/themes/dark/css/_dark.scss
@@ -20,29 +20,18 @@ $space-nav: rgba($panel-base, 0.1);
 
 // unified palette
 // try to use these colors when possible
-$bg-color: $background;
-$base-color: $bg-color;
-$base-text-color: $primary-content;
 $header-panel-bg-color: #20252B;
 $header-panel-border-color: #000000;
 $header-panel-text-primary-color: #B9BEC6;
 $header-panel-text-secondary-color: #c8c8cd;
-$text-primary-color: $primary-content;
 $text-secondary-color: #B9BEC6;
-$quaternary-fg-color: $quaternary-content;
 $search-bg-color: #181b21;
 $search-placeholder-color: #61708b;
 $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
-$secondary-fg-color: $secondary-content;
-$tertiary-fg-color: $tertiary-content;
-
 // used for dialog box text
 $light-fg-color: $header-panel-text-secondary-color;
 
@@ -61,7 +50,7 @@ $info-plinth-fg-color: #888;
 $preview-bar-bg-color: $header-panel-bg-color;
 
 $groupFilterPanel-bg-color: rgba(38, 39, 43, 0.82);
-$inverted-bg-color: $base-color;
+$inverted-bg-color: $background;
 
 // used by AddressSelector
 $selected-color: $room-highlight-color;
@@ -82,7 +71,7 @@ $input-focused-border-color: #238cf5;
 $input-valid-border-color: $accent-color;
 $input-invalid-border-color: $warning-color;
 
-$field-focused-label-bg-color: $bg-color;
+$field-focused-label-bg-color: $background;
 
 $resend-button-divider-color: #b9bec64a; // muted-text with a 4A opacity.
 
@@ -93,15 +82,15 @@ $scrollbar-track-color: transparent;
 // context menus
 $menu-border-color: $header-panel-border-color;
 $menu-bg-color: $header-panel-bg-color;
-$menu-box-shadow-color: $bg-color;
+$menu-box-shadow-color: $background;
 $menu-selected-color: $room-highlight-color;
 
 $avatar-initial-color: #ffffff;
-$avatar-bg-color: $bg-color;
+$avatar-bg-color: $background;
 
-$h3-color: $primary-fg-color;
+$h3-color: $primary-content;
 
-$dialog-title-fg-color: $base-text-color;
+$dialog-title-fg-color: $primary-content;
 $dialog-backdrop-color: #000;
 $dialog-shadow-color: rgba(0, 0, 0, 0.48);
 $dialog-close-fg-color: #9fa9ba;
@@ -117,11 +106,10 @@ $settings-profile-button-bg-color: #e7e7e7;
 $settings-profile-button-fg-color: $settings-profile-overlay-placeholder-fg-color;
 $settings-subsection-fg-color: $text-secondary-color;
 
-$topleftmenu-color: $text-primary-color;
-$roomheader-color: $text-primary-color;
-$roomheader-bg-color: $bg-color;
+$topleftmenu-color: $primary-content;
+$roomheader-color: $primary-content;
 $roomheader-addroom-bg-color: rgba(92, 100, 112, 0.3);
-$roomheader-addroom-fg-color: $text-primary-color;
+$roomheader-addroom-fg-color: $primary-content;
 $groupFilterPanel-button-color: $header-panel-text-primary-color;
 $groupheader-button-color: $header-panel-text-primary-color;
 $rightpanel-button-color: $header-panel-text-primary-color;
@@ -135,18 +123,16 @@ $composer-e2e-icon-color: $header-panel-text-primary-color;
 // ********************
 
 $theme-button-bg-color: #e3e8f0;
-$dialpad-button-bg-color: $quinary-content;
 
 $roomlist-button-bg-color: rgba(141, 151, 165, 0.2); // Buttons include the filter box, explore button, and sublist buttons
-$roomlist-filter-active-bg-color: $bg-color;
 $roomlist-bg-color: rgba(33, 38, 44, 0.90);
-$roomlist-header-color: $tertiary-fg-color;
-$roomsublist-divider-color: $primary-fg-color;
+$roomlist-header-color: $tertiary-content;
+$roomsublist-divider-color: $primary-content;
 $roomsublist-skeleton-ui-bg: linear-gradient(180deg, #3e444c 0%, #3e444c00 100%);
 
 $groupFilterPanel-divider-color: $roomlist-header-color;
 
-$roomtile-preview-color: $secondary-fg-color;
+$roomtile-preview-color: $secondary-content;
 $roomtile-default-badge-bg-color: #61708b;
 $roomtile-selected-bg-color: rgba(141, 151, 165, 0.2);
 
@@ -170,12 +156,12 @@ $event-highlight-bg-color: #25271F;
 $event-timestamp-color: $text-secondary-color;
 
 // Tabbed views
-$tab-label-fg-color: $text-primary-color;
-$tab-label-active-fg-color: $text-primary-color;
+$tab-label-fg-color: $primary-content;
+$tab-label-active-fg-color: $primary-content;
 $tab-label-bg-color: transparent;
 $tab-label-active-bg-color: $accent-color;
-$tab-label-icon-bg-color: $text-primary-color;
-$tab-label-active-icon-bg-color: $text-primary-color;
+$tab-label-icon-bg-color: $primary-content;
+$tab-label-active-icon-bg-color: $primary-content;
 
 // Buttons
 $button-primary-fg-color: $primary-content;
@@ -217,21 +203,21 @@ $kbd-border-color: #000000;
 $tooltip-timeline-bg-color: $groupFilterPanel-bg-color;
 $tooltip-timeline-fg-color: $primary-content;
 
-$interactive-tooltip-bg-color: $base-color;
+$interactive-tooltip-bg-color: $background;
 $interactive-tooltip-fg-color: $primary-content;
 
 $breadcrumb-placeholder-bg-color: #272c35;
 
 $user-tile-hover-bg-color: $header-panel-bg-color;
 
-$message-body-panel-fg-color: $secondary-fg-color;
+$message-body-panel-fg-color: $secondary-content;
 $message-body-panel-bg-color: $quinary-content;
-$message-body-panel-icon-fg-color: $secondary-fg-color;
-$message-body-panel-icon-bg-color: $system; // "System Dark"
+$message-body-panel-icon-bg-color: $system;
+$message-body-panel-icon-fg-color: $secondary-content;
 
-$voice-record-stop-border-color: $quaternary-fg-color;
-$voice-record-waveform-incomplete-fg-color: $quaternary-fg-color;
-$voice-record-icon-color: $quaternary-fg-color;
+$voice-record-stop-border-color: $quaternary-content;
+$voice-record-waveform-incomplete-fg-color: $quaternary-content;
+$voice-record-icon-color: $quaternary-content;
 $voice-playback-button-bg-color: $message-body-panel-icon-bg-color;
 $voice-playback-button-fg-color: $message-body-panel-icon-fg-color;
 
@@ -249,7 +235,7 @@ $composer-shadow-color: rgba(0, 0, 0, 0.28);
 $eventbubble-self-bg: #14322E;
 $eventbubble-others-bg: $event-selected-color;
 $eventbubble-bg-hover: #1C2026;
-$eventbubble-avatar-outline: $bg-color;
+$eventbubble-avatar-outline: $background;
 $eventbubble-reply-color: #C1C6CD;
 
 // ***** Mixins! *****
diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss
index 3e3412c6c1..d5bc5e6dd7 100644
--- a/res/themes/legacy-dark/css/_legacy-dark.scss
+++ b/res/themes/legacy-dark/css/_legacy-dark.scss
@@ -24,7 +24,12 @@ $primary-bg-color: $bg-color;
 $muted-fg-color: $header-panel-text-primary-color;
 
 // Legacy theme backports
-$quaternary-fg-color: #6F7882;
+$primary-content: $primary-fg-color;
+$secondary-content: $secondary-fg-color;
+$tertiary-content: $tertiary-fg-color;
+$quaternary-content: #6F7882;
+$quinary-content: $quaternary-content;
+$background: $primary-bg-color;
 
 // used for dialog box text
 $light-fg-color: $header-panel-text-secondary-color;
@@ -117,7 +122,6 @@ $composer-e2e-icon-color: $header-panel-text-primary-color;
 // ********************
 
 $theme-button-bg-color: #e3e8f0;
-$dialpad-button-bg-color: #6F7882;
 
 
 $roomlist-button-bg-color: #1A1D23; // Buttons include the filter box, explore button, and sublist buttons
diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss
index 3f722bcb30..47247e5e23 100644
--- a/res/themes/legacy-light/css/_legacy-light.scss
+++ b/res/themes/legacy-light/css/_legacy-light.scss
@@ -32,7 +32,12 @@ $primary-bg-color: #ffffff;
 $muted-fg-color: #61708b; // Commonly used in headings and relevant alt text
 
 // Legacy theme backports
-$quaternary-fg-color: #C1C6CD;
+$primary-content: $primary-fg-color;
+$secondary-content: $secondary-fg-color;
+$tertiary-content: $tertiary-fg-color;
+$quaternary-content: #C1C6CD;
+$quinary-content: #e3e8f0;
+$background: $primary-bg-color;
 
 // used for dialog box text
 $light-fg-color: #747474;
@@ -186,8 +191,6 @@ $voipcall-plinth-color: $system;
 // ********************
 
 $theme-button-bg-color: #e3e8f0;
-$dialpad-button-bg-color: #e3e8f0;
-
 
 $roomlist-button-bg-color: #fff; // Buttons include the filter box, explore button, and sublist buttons
 $roomlist-filter-active-bg-color: $roomlist-button-bg-color;
diff --git a/res/themes/light-custom/css/_custom.scss b/res/themes/light-custom/css/_custom.scss
index 6c37351414..f4685fe8fa 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
@@ -69,7 +69,7 @@ $roomlist-bg-color: var(--roomlist-background-color);
 //
 // --timeline-text-color
 $message-action-bar-fg-color: var(--timeline-text-color);
-$primary-fg-color: var(--timeline-text-color);
+$primary-content: var(--timeline-text-color);
 $settings-profile-overlay-placeholder-fg-color: var(--timeline-text-color);
 $roomtopic-color: var(--timeline-text-color-50pct);
 $tab-label-fg-color: var(--timeline-text-color);
@@ -139,7 +139,7 @@ $event-selected-color: var(--timeline-highlights-color);
 $event-highlight-bg-color: var(--timeline-highlights-color);
 //
 // redirect some variables away from their hardcoded values in the light theme
-$settings-grey-fg-color: $primary-fg-color;
+$settings-grey-fg-color: $primary-content;
 
 // --eventbubble colors
 $eventbubble-self-bg: var(--eventbubble-self-bg, $eventbubble-self-bg);
diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss
index e1a64d6d3e..200d5bb12a 100644
--- a/res/themes/light/css/_light.scss
+++ b/res/themes/light/css/_light.scss
@@ -37,14 +37,9 @@ $accent-color: $accent;
 $accent-bg-color: rgba(3, 179, 129, 0.16);
 $notice-primary-color: #ff4b55;
 $notice-primary-bg-color: rgba(255, 75, 85, 0.16);
-$primary-fg-color: #2e2f32;
-$secondary-fg-color: $secondary-content;
-$tertiary-fg-color: #8D99A5;
-$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 +54,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 +168,6 @@ $rte-group-pill-color: #aaa;
 
 $topleftmenu-color: #212121;
 $roomheader-color: #45474a;
-$roomheader-bg-color: $primary-bg-color;
 $roomheader-addroom-bg-color: rgba(92, 100, 112, 0.2);
 $roomheader-addroom-fg-color: #5c6470;
 $groupFilterPanel-button-color: #91A1C0;
@@ -191,19 +185,16 @@ $voipcall-plinth-color: $system;
 // ********************
 
 $theme-button-bg-color: $quinary-content;
-$dialpad-button-bg-color: $quinary-content;
-
 
 $roomlist-button-bg-color: rgba(141, 151, 165, 0.2); // Buttons include the filter box, explore button, and sublist buttons
-$roomlist-filter-active-bg-color: $background;
 $roomlist-bg-color: rgba(245, 245, 245, 0.90);
-$roomlist-header-color: $tertiary-fg-color;
-$roomsublist-divider-color: $primary-fg-color;
+$roomlist-header-color: $tertiary-content;
+$roomsublist-divider-color: $primary-content;
 $roomsublist-skeleton-ui-bg: linear-gradient(180deg, #ffffff 0%, #ffffff00 100%);
 
 $groupFilterPanel-divider-color: $roomlist-header-color;
 
-$roomtile-preview-color: $secondary-fg-color;
+$roomtile-preview-color: $secondary-content;
 $roomtile-default-badge-bg-color: #61708b;
 $roomtile-selected-bg-color: #FFF;
 
@@ -318,8 +309,8 @@ $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-fg-color: $primary-fg-color;
+$message-action-bar-bg-color: $background;
+$message-action-bar-fg-color: $primary-content;
 $message-action-bar-border-color: #e9edf1;
 $message-action-bar-hover-border-color: $focus-bg-color;
 
@@ -342,10 +333,10 @@ $breadcrumb-placeholder-bg-color: #e8eef5;
 
 $user-tile-hover-bg-color: $header-panel-bg-color;
 
-$message-body-panel-fg-color: $secondary-fg-color;
+$message-body-panel-fg-color: $secondary-content;
 $message-body-panel-bg-color: $quinary-content;
-$message-body-panel-icon-fg-color: $secondary-fg-color;
 $message-body-panel-icon-bg-color: $system;
+$message-body-panel-icon-fg-color: $secondary-content;
 
 // These two don't change between themes. They are the $warning-color, but we don't
 // want custom themes to affect them by accident.
@@ -353,8 +344,8 @@ $voice-record-stop-symbol-color: #ff4b55;
 $voice-record-live-circle-color: #ff4b55;
 
 $voice-record-stop-border-color: $quinary-content;
-$voice-record-waveform-incomplete-fg-color: $quaternary-fg-color;
-$voice-record-icon-color: $tertiary-fg-color;
+$voice-record-waveform-incomplete-fg-color: $quaternary-content;
+$voice-record-icon-color: $tertiary-content;
 $voice-playback-button-bg-color: $message-body-panel-icon-bg-color;
 $voice-playback-button-fg-color: $message-body-panel-icon-fg-color;
 
@@ -371,7 +362,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! *****