diff --git a/res/css/structures/_GroupView.scss b/res/css/structures/_GroupView.scss
index 7d20fda09d..5e224b1f38 100644
--- a/res/css/structures/_GroupView.scss
+++ b/res/css/structures/_GroupView.scss
@@ -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 f254ca3226..738b77684f 100644
--- a/res/css/structures/_LeftPanel.scss
+++ b/res/css/structures/_LeftPanel.scss
@@ -130,7 +130,7 @@ $roomListCollapsedWidth: 68px;
                     mask-position: center;
                     mask-size: contain;
                     mask-repeat: no-repeat;
-                    background: $secondary-fg-color;
+                    background: $secondary-content;
                 }
             }
 
@@ -153,7 +153,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/_RoomDirectory.scss b/res/css/structures/_RoomDirectory.scss
index d9284a2aae..fb0f7d10e1 100644
--- a/res/css/structures/_RoomDirectory.scss
+++ b/res/css/structures/_RoomDirectory.scss
@@ -78,7 +78,7 @@ limitations under the License.
             margin: 40px auto 60px;
             font-size: $font-14px;
             line-height: $font-20px;
-            color: $secondary-fg-color;
+            color: $secondary-content;
             max-width: 464px; // easier reading
         }
 
diff --git a/res/css/structures/_RoomSearch.scss b/res/css/structures/_RoomSearch.scss
index ecbf5e3992..6d197731d0 100644
--- a/res/css/structures/_RoomSearch.scss
+++ b/res/css/structures/_RoomSearch.scss
@@ -33,7 +33,7 @@ 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;
     }
 
@@ -53,7 +53,7 @@ limitations under the License.
     }
 
     &.mx_RoomSearch_hasQuery {
-        border-color: $secondary-fg-color;
+        border-color: $secondary-content;
     }
 
     &.mx_RoomSearch_focused {
@@ -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/_SpacePanel.scss b/res/css/structures/_SpacePanel.scss
index 399baf10bb..fef24f2947 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 {
     flex: 0 0 auto;
diff --git a/res/css/structures/_SpaceRoomDirectory.scss b/res/css/structures/_SpaceRoomDirectory.scss
index 30d0b7991d..e1cc579f6d 100644
--- a/res/css/structures/_SpaceRoomDirectory.scss
+++ b/res/css/structures/_SpaceRoomDirectory.scss
@@ -52,7 +52,7 @@ limitations under the License.
 
             > div {
                 font-weight: 400;
-                color: $secondary-fg-color;
+                color: $secondary-content;
                 font-size: $font-15px;
                 line-height: $font-24px;
             }
@@ -74,7 +74,7 @@ limitations under the License.
         > div {
             font-size: $font-15px;
             line-height: $font-24px;
-            color: $secondary-fg-color;
+            color: $secondary-content;
         }
     }
 
@@ -143,7 +143,7 @@ limitations under the License.
             margin-left: 8px;
             font-size: $font-15px;
             line-height: $font-24px;
-            color: $secondary-fg-color;
+            color: $secondary-content;
         }
     }
 
@@ -235,7 +235,7 @@ limitations under the License.
         .mx_SpaceRoomDirectory_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;
@@ -300,7 +300,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/_SpaceRoomView.scss b/res/css/structures/_SpaceRoomView.scss
index d1758ce757..d3a61bd4d1 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 {
@@ -78,7 +78,7 @@ $SpaceRoomViewInnerWidth: 428px;
 
         .mx_SpaceRoomView_description {
             font-size: $font-15px;
-            color: $secondary-fg-color;
+            color: $secondary-content;
             margin-top: 12px;
             margin-bottom: 24px;
             max-width: $SpaceRoomViewInnerWidth;
@@ -176,7 +176,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;
             }
         }
 
@@ -207,7 +207,7 @@ $SpaceRoomViewInnerWidth: 428px;
 
                 .mx_SpaceRoomView_preview_inviter_mxid {
                     line-height: $font-24px;
-                    color: $secondary-fg-color;
+                    color: $secondary-content;
                 }
             }
         }
@@ -224,7 +224,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;
@@ -257,7 +257,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;
@@ -388,7 +388,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 {
@@ -415,7 +415,7 @@ $SpaceRoomViewInnerWidth: 428px;
             position: absolute;
             top: 14px;
             left: 14px;
-            background-color: $secondary-fg-color;
+            background-color: $secondary-content;
         }
     }
 
@@ -438,7 +438,7 @@ $SpaceRoomViewInnerWidth: 428px;
         }
 
         .mx_SpaceRoomView_inviteTeammates_buttons {
-            color: $secondary-fg-color;
+            color: $secondary-content;
             margin-top: 28px;
 
             .mx_AccessibleButton {
@@ -454,7 +454,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;
@@ -473,7 +473,7 @@ $SpaceRoomViewInnerWidth: 428px;
 }
 
 .mx_SpaceRoomView_info {
-    color: $secondary-fg-color;
+    color: $secondary-content;
     font-size: $font-15px;
     line-height: $font-24px;
     margin: 20px 0;
diff --git a/res/css/structures/_ToastContainer.scss b/res/css/structures/_ToastContainer.scss
index 8aed21e36c..6024df5dc0 100644
--- a/res/css/structures/_ToastContainer.scss
+++ b/res/css/structures/_ToastContainer.scss
@@ -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/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 e7aa34487b..ff6910852c 100644
--- a/res/css/views/beta/_BetaCard.scss
+++ b/res/css/views/beta/_BetaCard.scss
@@ -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;
             }
         }
@@ -78,7 +78,7 @@ limitations under the License.
                 margin-top: 4px;
                 font-size: $font-12px;
                 line-height: $font-15px;
-                color: $secondary-fg-color;
+                color: $secondary-content;
             }
         }
     }
diff --git a/res/css/views/dialogs/_AddExistingToSpaceDialog.scss b/res/css/views/dialogs/_AddExistingToSpaceDialog.scss
index 2758533efc..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;
@@ -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/_CreateSpaceFromCommunityDialog.scss b/res/css/views/dialogs/_CreateSpaceFromCommunityDialog.scss
index 74a0e9dd8a..6ff328f6ab 100644
--- a/res/css/views/dialogs/_CreateSpaceFromCommunityDialog.scss
+++ b/res/css/views/dialogs/_CreateSpaceFromCommunityDialog.scss
@@ -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;
diff --git a/res/css/views/dialogs/_CreateSubspaceDialog.scss b/res/css/views/dialogs/_CreateSubspaceDialog.scss
index 9afd5d438f..1ed10df35c 100644
--- a/res/css/views/dialogs/_CreateSubspaceDialog.scss
+++ b/res/css/views/dialogs/_CreateSubspaceDialog.scss
@@ -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/_ForwardDialog.scss b/res/css/views/dialogs/_ForwardDialog.scss
index 898b79725f..da8ce3de5b 100644
--- a/res/css/views/dialogs/_ForwardDialog.scss
+++ b/res/css/views/dialogs/_ForwardDialog.scss
@@ -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/_HostSignupDialog.scss b/res/css/views/dialogs/_HostSignupDialog.scss
index 52e68da2af..d8a6652a39 100644
--- a/res/css/views/dialogs/_HostSignupDialog.scss
+++ b/res/css/views/dialogs/_HostSignupDialog.scss
@@ -74,7 +74,7 @@ limitations under the License.
 }
 
 .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 ca7f7d74ac..55afb4aecb 100644
--- a/res/css/views/dialogs/_InviteDialog.scss
+++ b/res/css/views/dialogs/_InviteDialog.scss
@@ -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;
     }
 
diff --git a/res/css/views/dialogs/_JoinRuleDropdown.scss b/res/css/views/dialogs/_JoinRuleDropdown.scss
index 7615156c8b..91691cf53b 100644
--- a/res/css/views/dialogs/_JoinRuleDropdown.scss
+++ b/res/css/views/dialogs/_JoinRuleDropdown.scss
@@ -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 6d96a957b3..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');
diff --git a/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.scss b/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.scss
index d5ef57e096..587e7ef9d3 100644
--- a/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.scss
+++ b/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.scss
@@ -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;
@@ -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/_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/_SpaceSettingsDialog.scss b/res/css/views/dialogs/_SpaceSettingsDialog.scss
index c5e8e891e6..a1fa9d52a8 100644
--- a/res/css/views/dialogs/_SpaceSettingsDialog.scss
+++ b/res/css/views/dialogs/_SpaceSettingsDialog.scss
@@ -56,7 +56,7 @@ limitations under the License.
             & + 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/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 7ba86de16f..46ffd9a01c 100644
--- a/res/css/views/elements/_MiniAvatarUploader.scss
+++ b/res/css/views/elements/_MiniAvatarUploader.scss
@@ -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/messages/_CallEvent.scss b/res/css/views/messages/_CallEvent.scss
index 0c1b41ca38..d13691fe70 100644
--- a/res/css/views/messages/_CallEvent.scss
+++ b/res/css/views/messages/_CallEvent.scss
@@ -71,7 +71,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;
@@ -100,7 +100,7 @@ limitations under the License.
         display: flex;
         flex-direction: row;
         align-items: center;
-        color: $secondary-fg-color;
+        color: $secondary-content;
         margin-right: 16px;
 
         .mx_CallEvent_content_button {
diff --git a/res/css/views/messages/_MessageActionBar.scss b/res/css/views/messages/_MessageActionBar.scss
index 608be24264..c6983ae631 100644
--- a/res/css/views/messages/_MessageActionBar.scss
+++ b/res/css/views/messages/_MessageActionBar.scss
@@ -77,7 +77,7 @@ 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 {
diff --git a/res/css/views/right_panel/_BaseCard.scss b/res/css/views/right_panel/_BaseCard.scss
index 9a5a59bda8..edb3d1a252 100644
--- a/res/css/views/right_panel/_BaseCard.scss
+++ b/res/css/views/right_panel/_BaseCard.scss
@@ -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 d27e639dd6..f3861a3dec 100644
--- a/res/css/views/right_panel/_PinnedMessagesCard.scss
+++ b/res/css/views/right_panel/_PinnedMessagesCard.scss
@@ -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 3b2045422d..aaaf225d16 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 {
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/_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/_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/_RoomList.scss b/res/css/views/rooms/_RoomList.scss
index 5ae6953b50..7d967661a6 100644
--- a/res/css/views/rooms/_RoomList.scss
+++ b/res/css/views/rooms/_RoomList.scss
@@ -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/_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/settings/_Notifications.scss b/res/css/views/settings/_Notifications.scss
index b3a91dc5db..a0e46c0071 100644
--- a/res/css/views/settings/_Notifications.scss
+++ b/res/css/views/settings/_Notifications.scss
@@ -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 1e4fed6580..5aa9db7e86 100644
--- a/res/css/views/settings/tabs/_SettingsTab.scss
+++ b/res/css/views/settings/tabs/_SettingsTab.scss
@@ -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 202faae078..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,
@@ -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/spaces/_SpaceCreateMenu.scss b/res/css/views/spaces/_SpaceCreateMenu.scss
index e4d5170924..7615ebe2d3 100644
--- a/res/css/views/spaces/_SpaceCreateMenu.scss
+++ b/res/css/views/spaces/_SpaceCreateMenu.scss
@@ -40,7 +40,8 @@ $spacePanelWidth: 71px;
 
             > p {
                 font-size: $font-15px;
-                color: $secondary-fg-color;
+                color: $secondary-content;
+                margin: 0;
             }
 
             .mx_SpaceFeedbackPrompt {
@@ -108,7 +109,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/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/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
index 885e73cee1..3b5ad93358 100644
--- a/res/themes/dark/css/_dark.scss
+++ b/res/themes/dark/css/_dark.scss
@@ -33,7 +33,6 @@ $room-highlight-color: #343a46;
 $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
@@ -139,7 +138,7 @@ $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);
 
@@ -217,10 +216,10 @@ $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-content;
 $voice-record-waveform-incomplete-fg-color: $quaternary-content;
diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss
index da9b3cb1ef..4cb182f99d 100644
--- a/res/themes/light/css/_light.scss
+++ b/res/themes/light/css/_light.scss
@@ -37,7 +37,6 @@ $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);
-$secondary-fg-color: $secondary-content;
 $tertiary-fg-color: #8D99A5;
 $header-panel-bg-color: #f3f8fd;
 
@@ -200,7 +199,7 @@ $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;
 
@@ -339,10 +338,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.