diff --git a/src/scss/themes/grayscale.scss b/src/scss/themes/grayscale.scss
index 36209bda..57321281 100644
--- a/src/scss/themes/grayscale.scss
+++ b/src/scss/themes/grayscale.scss
@@ -12,3 +12,10 @@ $compose-background: lighten($main-theme-color, 17%);
 
 @import "_base.scss";
 @import "_light_scrollbars.scss";
+
+:root {
+  // make the action buttons a bit lighter
+  --action-button-fill-color: #{lighten($main-theme-color, 17%)};
+  --action-button-fill-color-hover: #{lighten($main-theme-color, 10%)};
+  --action-button-fill-color-active: #{lighten($main-theme-color, 5%)};
+}
diff --git a/src/scss/themes/majesty.scss b/src/scss/themes/majesty.scss
index e20f5c56..10a5f469 100644
--- a/src/scss/themes/majesty.scss
+++ b/src/scss/themes/majesty.scss
@@ -11,4 +11,11 @@ $focus-outline: lighten($main-theme-color, 30%);
 $compose-background: lighten($main-theme-color, 32%);
 
 @import "_base.scss";
-@import "_light_scrollbars.scss";
\ No newline at end of file
+@import "_light_scrollbars.scss";
+
+:root {
+  // make the action buttons a bit lighter
+  --action-button-fill-color: #{lighten($main-theme-color, 17%)};
+  --action-button-fill-color-hover: #{lighten($main-theme-color, 10%)};
+  --action-button-fill-color-active: #{lighten($main-theme-color, 5%)};
+}