diff --git a/assets/stylesheets/components/_sidebar.scss b/assets/stylesheets/components/_sidebar.scss
index f6d78e72..8c14c951 100644
--- a/assets/stylesheets/components/_sidebar.scss
+++ b/assets/stylesheets/components/_sidebar.scss
@@ -273,9 +273,9 @@
     left: .75rem;
     width: .75rem;
     height: 1px;
-    background: rgba($selectionText, .9);
-    box-shadow: 0 -3px rgba($selectionText, .9), // top line
-                0 3px rgba($selectionText, .9);  // bottom line
+    background: var(--transparentSelectionText);
+    box-shadow: 0 -3px var(--transparentSelectionText), // top line
+                0 3px var(--transparentSelectionText);  // bottom line
   }
 }
 
diff --git a/assets/stylesheets/global/_variables-dark.scss b/assets/stylesheets/global/_variables-dark.scss
index 35e624ce..c5d0686d 100644
--- a/assets/stylesheets/global/_variables-dark.scss
+++ b/assets/stylesheets/global/_variables-dark.scss
@@ -1,5 +1,4 @@
 // TODO: convert uses of these to CSS variables
-$selectionText: #fff;
 $sidebarBackground: #24282a;
 $headerBackground: #1c1c1c;
 $contentBackground: #33373a;
@@ -36,7 +35,7 @@ html.dark {
 
   --selectionBackground: #007acc;
   --selectionBorder: #000;
-  --selectionText: $selectionText;
+  --selectionText: rgba(255, 255, 255, 0.9);
 
   --highlightBackground: #64675f;
 
diff --git a/assets/stylesheets/global/_variables.scss b/assets/stylesheets/global/_variables.scss
index 9418fc40..9b1532af 100644
--- a/assets/stylesheets/global/_variables.scss
+++ b/assets/stylesheets/global/_variables.scss
@@ -1,5 +1,4 @@
 // TODO: convert uses of these to CSS variables
-$selectionText: #fff;
 $sidebarBackground: #f9f9f9;
 $headerBackground: #eee;
 $contentBackground: #fff;
@@ -36,7 +35,8 @@ html:not(.dark) {
 
   --selectionBackground: #398df0;
   --selectionBorder: #196fc2;
-  --selectionText: $selectionText;
+  --selectionText: #fff;
+  --transparentSelectionText: rgba(255, 255, 255, 0.9);
 
   --highlightBackground: #fffdcd;