diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index 6a82a18a6..3f63fcb90 100644
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -1154,8 +1154,8 @@ StScrollBar {
 
           .message-close-button {
             color: lighten($fg_color, 15%);
-            &:hover { color: darken($fg_color, 10%); }
-            &:active { color: darken($fg_color, 20%); }
+            &:hover { color: if($variant=='light', lighten($fg_color, 30%), darken($fg_color, 10%)); }
+            &:active { color: if($variant=='light', lighten($fg_color, 40%), darken($fg_color, 20%)); }
           }
 
           .message-media-control {
@@ -1164,9 +1164,9 @@ StScrollBar {
 
             &:last-child:ltr { padding-right: 18px; }
             &:last-child:rtl { padding-left: 18px; }
-            &:hover { color: darken($fg_color, 10%) }
-            &:active { color: darken($fg_color, 20%); }
-            &:insensitive { color: darken($fg_color,40%); }
+            &:hover { color: if($variant=='light', lighten($fg_color, 30%), darken($fg_color, 10%)); }
+            &:active { color: if($variant=='light', lighten($fg_color, 40%), darken($fg_color, 20%)); }
+            &:insensitive { color: if($variant=='light', lighten($fg_color, 50%), darken($fg_color, 40%)); }
           }
 
           .media-message-cover-icon {