diff --git a/web/styles/reactions.css b/web/styles/reactions.css
index 1288dd14ed..cb0b7f8958 100644
--- a/web/styles/reactions.css
+++ b/web/styles/reactions.css
@@ -28,7 +28,7 @@
             height: 13px;
             border-radius: 4px;
             padding-left: 0.3em;
-            border: 1px solid hsl(0deg 0% 73%);
+            border: 1px solid var(--color-message-reaction-button-border);
             padding-right: 0.3em;
             /* TODO: Eventually this space will be set on the message
                box, but for now this preserves the space beneath the
@@ -67,19 +67,19 @@
     }
 
     .message_reaction:hover .message_reaction_count {
-        color: hsl(200deg 100% 40%);
+        color: var(--color-message-reaction-button-text-hover);
     }
 
     & i {
         font-size: 1.3em;
         float: left;
-        color: hsl(0deg 0% 33%);
+        color: var(--color-message-reaction-button-text);
     }
 
     &:hover .message_reaction + .reaction_button {
         visibility: visible;
         pointer-events: all;
-        background-color: hsl(0deg 0% 98%);
+        background-color: var(--color-message-reaction-button-background);
     }
 
     .reaction_button,
@@ -94,7 +94,7 @@
         }
 
         &:hover i {
-            color: hsl(200deg 100% 40%);
+            color: var(--color-message-reaction-button-text-hover);
         }
 
         /* Configure the reaction button to appear if and only if there's an
@@ -107,21 +107,23 @@
         }
 
         &:hover {
-            border: 1px solid hsl(200deg 100% 40%);
-            background-color: hsl(195deg 50% 95%);
+            border: 1px solid var(--color-message-reaction-button-border-hover);
+            background-color: var(
+                --color-message-reaction-button-background-hover
+            );
             cursor: pointer;
             opacity: 1;
-            color: hsl(200deg 100% 40%);
+            color: var(--color-message-reaction-button-text-hover);
         }
 
         .message_reaction_count {
             font-size: 1.1em;
-            color: hsl(0deg 0% 33%);
+            color: var(--color-message-reaction-button-text);
             margin-right: 0;
         }
 
         &:hover .message_reaction_count {
-            color: hsl(200deg 100% 40%);
+            color: var(--color-message-reaction-button-text-hover);
         }
     }
 }
diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index 4be7a4e90b..67c2d50f2d 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -293,6 +293,12 @@ body {
     --color-message-reaction-border-hover: hsl(200deg 100% 40%);
     --color-message-reaction-background: transparent;
     --color-message-reaction-background-reacted: hsl(196deg 51% 93%);
+    --color-message-reaction-button-text: hsl(0deg 0% 33%);
+    --color-message-reaction-button-text-hover: hsl(200deg 100% 40%);
+    --color-message-reaction-button-background: hsl(0deg 0% 98%);
+    --color-message-reaction-button-background-hover: hsl(195deg 50% 95%);
+    --color-message-reaction-button-border: hsl(0deg 0% 73%);
+    --color-message-reaction-button-border-hover: hsl(200deg 100% 40%);
 
     /* Message feed loading indicator colors */
     --color-zulip-logo: hsl(0deg 0% 0% / 34%);
@@ -537,6 +543,20 @@ body {
     --color-message-reaction-border-hover: hsl(236deg 33% 90%);
     --color-message-reaction-background: transparent;
     --color-message-reaction-background-reacted: hsl(0deg 0% 0% / 50%);
+    --color-message-reaction-button-text: inherit;
+    --color-message-reaction-button-text-hover: inherit;
+    --color-message-reaction-button-background: var(
+        --color-message-reaction-background
+    );
+    --color-message-reaction-button-background-hover: var(
+        --color-message-reaction-background
+    );
+    --color-message-reaction-button-border: var(
+        --color-message-reaction-border
+    );
+    --color-message-reaction-button-border-hover: var(
+        --color-message-reaction-border-hover
+    );
 
     /* Message feed loading indicator colors */
     --color-zulip-logo: hsl(0deg 0% 100% / 50%);