diff --git a/css/css-variables.scss b/css/css-variables.scss
index 76e3f6183..cb5ccf8d0 100644
--- a/css/css-variables.scss
+++ b/css/css-variables.scss
@@ -118,6 +118,9 @@ $primary-text-color: #333333 !default;
 $secondary-text-color: $grey-color !default;
 $error-text-color: $white !default;
 $highlight-text-color: #363636 !default;
+$button-content-background-color: $gray-extra-light !default;
+$button-header-background-color: $gray-extra-light !default;
+$main-menu-background-color: $gray-extra-light !default;
 $hover-background-color: #fde17c !default;
 $border-highlight-color: $brand-primary-dark !default;
 $highlight-item-color: $white !default;
diff --git a/css/ui-lightness/jqueryui.scss b/css/ui-lightness/jqueryui.scss
index 873081358..37ebb2ec5 100644
--- a/css/ui-lightness/jqueryui.scss
+++ b/css/ui-lightness/jqueryui.scss
@@ -1024,7 +1024,7 @@ body {
     }
     .ui-state-default {
         border: 1px solid #cccccc;
-        background: #f1f1f1;
+        background: $button-content-background-color;
         font-weight: bold;
         color: $secondary-text-color;
     }
@@ -1092,7 +1092,7 @@ body {
     }
     .ui-state-default {
         border: 1px solid #cccccc;
-        background: #f1f1f1;
+        background: $button-header-background-color;
         font-weight: bold;
         color: $secondary-text-color;
     }
@@ -1152,7 +1152,7 @@ body {
 }
 .ui-state-default {
     border: 1px solid #cccccc;
-    background: #f1f1f1;
+    background: $main-menu-background-color;
     font-weight: bold;
     color: $secondary-text-color;
     a {