diff --git a/client/src/components/User/ThemeSelector.vue b/client/src/components/User/ThemeSelector.vue
index 46f0948e9c98..d27dd058a118 100644
--- a/client/src/components/User/ThemeSelector.vue
+++ b/client/src/components/User/ThemeSelector.vue
@@ -35,7 +35,7 @@ watch(
 </script>
 
 <template>
-    <b-card :show="show" class="mr-3 overflow-auto">
+    <b-card :show="show" class="mr-3 overflow-auto reset-theme-variables">
         <b-form-radio-group v-model="currentValue">
             <b-form-radio
                 v-for="(themeDetails, theme, index) in config.themes"
diff --git a/client/src/style/scss/custom_theme_variables.scss b/client/src/style/scss/custom_theme_variables.scss
index bcf04723bd38..b8d909ffd374 100644
--- a/client/src/style/scss/custom_theme_variables.scss
+++ b/client/src/style/scss/custom_theme_variables.scss
@@ -1,6 +1,7 @@
 @import "theme/blue.scss";
 
-html {
+html,
+.reset-theme-variables {
     --masthead-color: #{$masthead-color};
     --masthead-text-color: #{$masthead-text-color};
     --masthead-text-hover: #{$masthead-text-hover};