diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index 400a870583..79e505eea1 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -1028,6 +1028,24 @@
         hsl(0deg 0% 0% / 20%)
     );
     --color-background-grey-box: light-dark(#f5f5f5, hsl(0deg 0% 0% / 20%));
+    --color-stream-group-row-checked-icon: hsl(240deg 96% 68%);
+    --color-stream-group-row-checked-icon-hover: hsl(240deg 41% 50%);
+    --color-stream-group-row-checked-icon-disabled: light-dark(
+        hsl(240deg 96% 68% / 100%),
+        hsl(240deg 96% 68% / 50%)
+    );
+    --color-stream-group-row-plus-icon: light-dark(
+        hsl(0deg 0% 72%),
+        hsl(218deg 14% 33%)
+    );
+    --color-stream-group-row-plus-icon-hover: light-dark(
+        hsl(0deg 0% 27%),
+        hsl(230deg 11% 67%)
+    );
+    --color-stream-group-row-plus-icon-disabled: light-dark(
+        hsl(0deg 0% 87% / 100%),
+        hsl(218deg 14% 33% / 50%)
+    );
 
     /* Recent view */
     --recent-view-max-avatars: 4;
diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css
index e087f3824c..3b140d62fd 100644
--- a/web/styles/dark_theme.css
+++ b/web/styles/dark_theme.css
@@ -140,30 +140,6 @@
         }
     }
 
-    .group-row.active,
-    .stream-row.active {
-        background-color: hsl(0deg 0% 0% / 20%);
-    }
-
-    .stream-row,
-    .group-row {
-        /* This is for coluring the plus sign SVGs in stream-list UI */
-        /* public */
-        .check:not(.checked) .sub-unsub-icon {
-            color: hsl(218deg 14% 33%);
-        }
-
-        /* private */
-        .disabled .sub-unsub-icon {
-            opacity: 0.5;
-        }
-
-        /* public :hover */
-        .check:not(.checked, .disabled):hover .sub-unsub-icon {
-            color: hsl(230deg 11% 67%);
-        }
-    }
-
     #recent_view_table {
         .zulip-icon-user {
             opacity: 0.7;
diff --git a/web/styles/subscriptions.css b/web/styles/subscriptions.css
index dc95461f9d..5dc3b14699 100644
--- a/web/styles/subscriptions.css
+++ b/web/styles/subscriptions.css
@@ -756,7 +756,7 @@ h4.user_group_setting_subsection_title {
             /* This color is used in .subscriber-check-icon of the help
                center to make the icon color same as the web app. Do change
                the color there when changing the color here */
-            color: hsl(0deg 0% 72%);
+            color: var(--color-stream-group-row-plus-icon);
             font-size: 1.0938em; /* 70% of 1.5625em */
 
             &.hide {
@@ -765,7 +765,7 @@ h4.user_group_setting_subsection_title {
         }
 
         &.checked:hover .sub-unsub-icon {
-            color: hsl(240deg 41% 50%);
+            color: var(--color-stream-group-row-checked-icon-hover);
         }
 
         &.not-direct-member {
@@ -776,10 +776,12 @@ h4.user_group_setting_subsection_title {
 
         &.disabled {
             &:not(.checked) .sub-unsub-icon {
-                color: hsl(0deg 0% 87%);
+                /* Change opacity to 50% in dark mode */
+                color: var(--color-stream-group-row-plus-icon-disabled);
             }
 
             .sub-unsub-icon {
+                color: var(--color-stream-group-row-checked-icon-disabled);
                 cursor: not-allowed;
             }
         }
@@ -806,7 +808,12 @@ h4.user_group_setting_subsection_title {
         /* This color is used in .subscriber-check-icon of the help
            center to make the icon color same as the web app. Do change
            the color there when changing the color here */
-        color: hsl(240deg 96% 68%);
+        color: var(--color-stream-group-row-checked-icon);
+    }
+
+    .check:not(.checked, .disabled):hover .sub-unsub-icon,
+    &.active .check:not(.checked, .disabled):hover .sub-unsub-icon {
+        color: var(--color-stream-group-row-plus-icon-hover);
     }
 
     .icon {
@@ -894,11 +901,6 @@ h4.user_group_setting_subsection_title {
         background-color: var(--color-active-row-modal);
     }
 
-    .check:not(.checked, .disabled):hover .sub-unsub-icon,
-    &.active .check:not(.checked, .disabled):hover .sub-unsub-icon {
-        color: hsl(0deg 0% 27%);
-    }
-
     &::selection,
     .icon .hashtag::selection {
         background-color: transparent;