diff --git a/app/soapbox/reducers/theme.js b/app/soapbox/reducers/theme.js
index 40da32c3a4..2d495407c9 100644
Binary files a/app/soapbox/reducers/theme.js and b/app/soapbox/reducers/theme.js differ
diff --git a/app/styles/soapbox/about.scss b/app/styles/soapbox/about.scss
index acf1cd1e35..5d328940ea 100644
--- a/app/styles/soapbox/about.scss
+++ b/app/styles/soapbox/about.scss
@@ -32,7 +32,7 @@ $small-breakpoint: 960px;
   }
 
   a {
-    color: $highlight-text-color;
+    color: var(--highlight-text-color);
     text-decoration: underline;
   }
 
@@ -50,7 +50,7 @@ $small-breakpoint: 960px;
     color: $darker-text-color;
 
     a {
-      color: $highlight-text-color;
+      color: var(--highlight-text-color);
       text-decoration: underline;
     }
   }
@@ -304,7 +304,7 @@ $small-breakpoint: 960px;
     color: $darker-text-color;
 
     a {
-      color: $highlight-text-color;
+      color: var(--highlight-text-color);
       text-decoration: underline;
     }
   }
diff --git a/app/styles/soapbox/accounts.scss b/app/styles/soapbox/accounts.scss
index dba94b7c69..5f063eb8c9 100644
--- a/app/styles/soapbox/accounts.scss
+++ b/app/styles/soapbox/accounts.scss
@@ -261,7 +261,7 @@
   }
 
   a {
-    color: $highlight-text-color;
+    color: var(--highlight-text-color);
     text-decoration: none;
 
     &:hover,
diff --git a/app/styles/soapbox/admin.scss b/app/styles/soapbox/admin.scss
index 0050577e52..4332a7214d 100644
--- a/app/styles/soapbox/admin.scss
+++ b/app/styles/soapbox/admin.scss
@@ -208,7 +208,7 @@ $content-width: 840px;
       color: $gab-secondary-text;
 
       a {
-        color: $highlight-text-color;
+        color: var(--highlight-text-color);
       }
     }
 
@@ -297,7 +297,7 @@ $content-width: 840px;
       }
 
       &.selected {
-        color: $highlight-text-color;
+        color: var(--highlight-text-color);
         border-bottom: 2px solid $ui-highlight-color;
       }
     }
@@ -401,7 +401,7 @@ $content-width: 840px;
   font-size: 14px;
 
   a {
-    color: $highlight-text-color;
+    color: var(--highlight-text-color);
     text-decoration: none;
 
     &:hover {
diff --git a/app/styles/soapbox/basics.scss b/app/styles/soapbox/basics.scss
index e67efd4b48..5f66c2d928 100644
--- a/app/styles/soapbox/basics.scss
+++ b/app/styles/soapbox/basics.scss
@@ -168,7 +168,7 @@ button {
   color: $primary-text-color;
   padding: 15px 20px;
   font-size: 14px;
-  background-color: rgba($highlight-text-color, .1);
+  background-color: var(--brand-color-faint);
   margin: 5px 20px;
   border-radius: 8px;
 
@@ -186,7 +186,7 @@ button {
   }
 
   a {
-    color: $highlight-text-color;
+    color: var(--highlight-text-color);
     text-decoration: none;
 
     &:hover {
diff --git a/app/styles/soapbox/components.scss b/app/styles/soapbox/components.scss
index fc7fddadcf..2bfd6287ef 100644
--- a/app/styles/soapbox/components.scss
+++ b/app/styles/soapbox/components.scss
@@ -139,7 +139,7 @@
   }
 
   &.active {
-    color: $highlight-text-color;
+    color: var(--highlight-text-color);
   }
 
   &::-moz-focus-inner {
@@ -166,7 +166,7 @@
     }
 
     &.active {
-      color: $highlight-text-color;
+      color: var(--highlight-text-color);
 
       &.disabled {
         color: lighten($highlight-text-color, 13%);
@@ -212,7 +212,7 @@
   }
 
   &.active {
-    color: $highlight-text-color;
+    color: var(--highlight-text-color);
   }
 
   &::-moz-focus-inner {
@@ -573,7 +573,7 @@
       color: $inverted-text-color;
 
       a {
-        color: $highlight-text-color;
+        color: var(--highlight-text-color);
       }
 
       a.status__content__spoiler-link {
@@ -1095,7 +1095,7 @@ a.account__display-name {
   position: relative;
 
   .fa {
-    color: $highlight-text-color;
+    color: var(--highlight-text-color);
   }
 
   > span {
@@ -1769,7 +1769,7 @@ a.account__display-name {
 
 .column-back-button {
   background: lighten($ui-base-color, 4%);
-  color: $highlight-text-color;
+  color: var(--highlight-text-color);
   cursor: pointer;
   flex: 0 0 auto;
   font-size: 16px;
@@ -1790,7 +1790,7 @@ a.account__display-name {
   background: lighten($ui-base-color, 4%);
   border: 0;
   font-family: inherit;
-  color: $highlight-text-color;
+  color: var(--highlight-text-color);
   cursor: pointer;
   white-space: nowrap;
   font-size: 16px;
@@ -2083,7 +2083,7 @@ a.account__display-name {
   &:focus,
   &:active {
     color: $primary-text-color;
-    border-bottom-color: $highlight-text-color;
+    border-bottom-color: var(--highlight-text-color);
   }
 
   @media screen and (max-width: 600px) {
@@ -2116,7 +2116,7 @@ a.account__display-name {
 }
 
 .reduce-motion button.icon-button.active i.fa-retweet {
-  color: $highlight-text-color;
+  color: var(--highlight-text-color);
 }
 
 .status-card {
@@ -2441,7 +2441,7 @@ a.status-card.compact:hover {
     &.active {
       color: $primary-text-color;
       border-radius: 10px;
-      background-color: rgba($highlight-text-color, .1);
+      background-color: var(--brand-color-faint);
     }
 
     @media screen and (max-width: $nav-breakpoint-2) {
@@ -2459,14 +2459,14 @@ a.status-card.compact:hover {
   }
 
   & > .column-header__back-button {
-    color: $highlight-text-color;
+    color: var(--highlight-text-color);
   }
 
   &.active {
     box-shadow: 0 1px 0 rgba($highlight-text-color, 0.3);
 
     .column-header__icon {
-      color: $highlight-text-color;
+      color: var(--highlight-text-color);
       text-shadow: 0 0 10px rgba($highlight-text-color, 0.4);
     }
   }
@@ -2928,7 +2928,7 @@ a.status-card.compact:hover {
   }
 
   a {
-    color: $highlight-text-color;
+    color: var(--highlight-text-color);
     text-decoration: none;
 
     &:hover {
@@ -3407,7 +3407,7 @@ a.status-card.compact:hover {
 
 
 .loading-bar {
-  background-color: $highlight-text-color;
+  background-color: var(--highlight-text-color);
   height: 3px;
   position: absolute;
   top: 0;
@@ -4117,7 +4117,7 @@ noscript {
     max-width: 400px;
 
     a {
-      color: $highlight-text-color;
+      color: var(--highlight-text-color);
       text-decoration: underline;
 
       &:hover {
diff --git a/app/styles/soapbox/components/compose-form.scss b/app/styles/soapbox/components/compose-form.scss
index 50c8b972fe..fba1c6a6c7 100644
--- a/app/styles/soapbox/components/compose-form.scss
+++ b/app/styles/soapbox/components/compose-form.scss
@@ -6,7 +6,7 @@
     padding-top: 0;
     font-size: 14px;
     font-weight: 500;
-    &.active {color: $highlight-text-color;}
+    &.active {color: var(--highlight-text-color);}
     input[type=checkbox] {display: none;}
 
     .checkbox {
@@ -23,8 +23,8 @@
       vertical-align: middle;
 
       &.active {
-        border-color: $highlight-text-color;
-        background: $highlight-text-color;
+        border-color: var(--highlight-text-color);
+        background: var(--highlight-text-color);
       }
     }
   }
diff --git a/app/styles/soapbox/components/modal.scss b/app/styles/soapbox/components/modal.scss
index 52a1b2859b..4738721fe1 100644
--- a/app/styles/soapbox/components/modal.scss
+++ b/app/styles/soapbox/components/modal.scss
@@ -169,7 +169,7 @@
 }
 
 .media-modal__button--active {
-  background-color: $highlight-text-color;
+  background-color: var(--highlight-text-color);
 }
 
 .media-modal__close {
@@ -435,7 +435,7 @@
   overflow-x: hidden;
 
   .status__content a {
-    color: $highlight-text-color;
+    color: var(--highlight-text-color);
   }
 
   .status__content,
diff --git a/app/styles/soapbox/emoji_picker.scss b/app/styles/soapbox/emoji_picker.scss
index 4bfd665049..fb697a6d96 100644
--- a/app/styles/soapbox/emoji_picker.scss
+++ b/app/styles/soapbox/emoji_picker.scss
@@ -55,7 +55,7 @@
 }
 
 .emoji-mart-anchor-selected {
-  color: $highlight-text-color;
+  color: var(--highlight-text-color);
 
   &:hover {
     color: darken($highlight-text-color, 4%);
@@ -72,7 +72,7 @@
   left: 0;
   width: 100%;
   height: 4px;
-  background-color: $highlight-text-color;
+  background-color: var(--highlight-text-color);
 }
 
 .emoji-mart-anchors {
diff --git a/app/styles/soapbox/forms.scss b/app/styles/soapbox/forms.scss
index 26ee451968..cc1d57be25 100644
--- a/app/styles/soapbox/forms.scss
+++ b/app/styles/soapbox/forms.scss
@@ -70,7 +70,7 @@ code {
       }
 
       label a {
-        color: $highlight-text-color;
+        color: var(--highlight-text-color);
         text-decoration: underline;
 
         &:hover,
@@ -98,7 +98,7 @@ code {
     color: $gab-secondary-text;
 
     a {
-      color: $highlight-text-color;
+      color: var(--highlight-text-color);
     }
 
     code {
@@ -341,7 +341,7 @@ code {
 
     &:active,
     &:focus {
-      border-color: $highlight-text-color;
+      border-color: var(--highlight-text-color);
       background: darken($ui-base-color, 8%);
     }
   }
@@ -627,7 +627,7 @@ code {
   }
 
   a {
-    color: $highlight-text-color;
+    color: var(--highlight-text-color);
     text-transform: uppercase;
     text-decoration: none;
     font-weight: 700;
diff --git a/app/styles/soapbox/polls.scss b/app/styles/soapbox/polls.scss
index 5701498e9e..5c9a2c88ab 100644
--- a/app/styles/soapbox/polls.scss
+++ b/app/styles/soapbox/polls.scss
@@ -57,7 +57,7 @@
       padding: 6px 10px;
 
       &:focus {
-        border-color: $highlight-text-color;
+        border-color: var(--highlight-text-color);
       }
     }
 
diff --git a/app/styles/soapbox/tables.scss b/app/styles/soapbox/tables.scss
index 26789e70f3..f90406ca51 100644
--- a/app/styles/soapbox/tables.scss
+++ b/app/styles/soapbox/tables.scss
@@ -31,7 +31,7 @@
   }
 
   a {
-    color: $highlight-text-color;
+    color: var(--highlight-text-color);
     text-decoration: underline;
 
     &:hover {