diff --git a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
index 16a14edf85..4141fb2fb1 100644
--- a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
+++ b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
@@ -25,7 +25,7 @@ limitations under the License.
     flex-direction: row;
     align-items: center;
     padding: 15px;
-    background: #FFFFFF;
+    background: $font-slider-bg-color;
     border-radius: 10px;
     font-size: 10px;
 }
diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
index 5d6ba033c8..cb6e7ccdaa 100644
--- a/res/themes/dark/css/_dark.scss
+++ b/res/themes/dark/css/_dark.scss
@@ -177,6 +177,9 @@ $breadcrumb-placeholder-bg-color: #272c35;
 
 $user-tile-hover-bg-color: $header-panel-bg-color;
 
+// FontSlider colors
+$font-slider-bg-color: $room-highlight-color;
+
 // ***** Mixins! *****
 
 @define-mixin mx_DialogButton {
diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss
index e06ba33594..b576b57778 100644
--- a/res/themes/light/css/_light.scss
+++ b/res/themes/light/css/_light.scss
@@ -306,6 +306,9 @@ $breadcrumb-placeholder-bg-color: #e8eef5;
 
 $user-tile-hover-bg-color: $header-panel-bg-color;
 
+// FontSlider colors
+$font-slider-bg-color: $input-darker-bg-color;
+
 // ***** Mixins! *****
 
 @define-mixin mx_DialogButton {