diff --git a/webclient/src/App.vue b/webclient/src/App.vue
index c641d9326..a7b480dd2 100644
--- a/webclient/src/App.vue
+++ b/webclient/src/App.vue
@@ -238,7 +238,7 @@ footer {
 
         &:disabled {
           background-color: $footer-setting-bg-disabled;
-          color: $footer-color;
+          color: $footer-setting-color-disabled;
         }
       }
     }
diff --git a/webclient/src/assets/variables.scss b/webclient/src/assets/variables.scss
index af67c58ef..bbd81ce78 100644
--- a/webclient/src/assets/variables.scss
+++ b/webclient/src/assets/variables.scss
@@ -33,6 +33,7 @@ $autocomplete-comment-color: #777;
 $autocomplete-filter-bg: #f8f8f8;
 $autocomplete-filter-text: $autocomplete-comment-color;
 $footer-color: #fafafa;
+$footer-setting-color-disabled: $footer-color;
 $footer-setting-bg-disabled: #999;
 $feedback-overlay-bg: rgba(247, 248, 249, 75%);
 $feedback-box-shadow: 0 .2rem .5rem rgba(48, 55, 66, 30%);
@@ -73,6 +74,7 @@ $code-bg: #fcf2f2;
     $autocomplete-filter-bg: #232526;
     $autocomplete-filter-text: #999;
     $footer-color: #1b1c1e;
+    $footer-setting-color-disabled: #fff;
     $footer-setting-bg-disabled: #333;
     $feedback-overlay-bg: rgba(0, 0, 0, 70%);
     $feedback-box-shadow: 0 .2rem .5rem rgba(0, 0, 0, 50%);