diff --git a/app/styles/azure.scss b/app/styles/azure.scss
index 501adb5a1..5539c142d 100644
--- a/app/styles/azure.scss
+++ b/app/styles/azure.scss
@@ -1,15 +1,17 @@
 @import 'soapbox-light/variables';
 
-// $gab-brand-default: lighten(#149dfb, 10%);
 $gab-brand-default: #0482d8;
 $gab-background-base-light: #f2f3f6;
 $gab-background: $gab-background-base-light;
 $ui-base-color: #d9f2f9;
 $ui-highlight-color: $gab-brand-default;
-// $nav-ui-background-color: #000;
 $nav-ui-highlight-color: #149dfb;
 $ui-base-lighter-color: #b0c0cf;
 
+:root {
+  --brand-color: #0482d8;
+}
+
 @import 'application';
 @import 'soapbox-light/diff';
 
@@ -18,16 +20,7 @@ $ui-base-lighter-color: #b0c0cf;
   transition: 0.1s;
   outline: none;
 
-  // &.active {
-  //   color: darken(#04d8c4, 40%);
-  // }
-  //
-  // &:hover {
-  //   color: darken(#04d8c4, 60%);
-  // }
-
   &::before {
-    // background-color: darken($nav-ui-highlight-color, 10%);
     bottom: auto;
     opacity: 0;
     height: 15px;
diff --git a/app/styles/soapbox-light/diff.scss b/app/styles/soapbox-light/diff.scss
index a50d1c883..8368e2a14 100644
--- a/app/styles/soapbox-light/diff.scss
+++ b/app/styles/soapbox-light/diff.scss
@@ -289,10 +289,10 @@ body {
 .simple_form input[type="email"],
 .simple_form input[type="password"],
 .simple_form textarea {
-  border-color: $gab-brand-default;
+  border-color: var(--brand-color);
 
   &:hover {
-    border-color: $gab-brand-default;
+    border-color: var(--brand-color);
   }
 }
 
@@ -355,7 +355,7 @@ body {
 
 .admin-wrapper .sidebar ul li a.selected {
   color: $gab-background-container-light;
-  background-color: $gab-brand-default;
+  background-color: var(--brand-color);
 }
 
 .admin-wrapper .sidebar ul li .simple-navigation-active-leaf a.selected {
diff --git a/app/styles/soapbox/about.scss b/app/styles/soapbox/about.scss
index 770893475..acf1cd1e3 100644
--- a/app/styles/soapbox/about.scss
+++ b/app/styles/soapbox/about.scss
@@ -662,7 +662,7 @@ $small-breakpoint: 960px;
   $gab-background: $gab-background-base-dark !default;
 
   position: relative;
-  background-color: $gab-brand-default;
+  background-color: var(--brand-color);
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 889" width="1440px" height="889px"><path d="M 0 0 L 0 851.82031 C 115.03104 776.54213 236.097 723.10606 363.20703 691.54492 C 640.06491 622.80164 852.93698 468.14039 954.31055 358.01367 C 1092.1151 208.31032 1206.0509 47.69868 1365.3828 13.457031 C 1391.8162 7.7762737 1416.6827 3.2957237 1440 0.001953125 L 1440 0 L 0 0 z" fill="#{hex-color($gab-background)}"/></svg>');
   background-size: 100% auto;
   background-repeat: no-repeat;
@@ -959,7 +959,7 @@ $small-breakpoint: 960px;
 
   h1 {
     @include font-montserrat;
-    color: $gab-brand-default;
+    color: var(--brand-color);
   }
 }
 
diff --git a/app/styles/soapbox/admin.scss b/app/styles/soapbox/admin.scss
index df0eb5666..0050577e5 100644
--- a/app/styles/soapbox/admin.scss
+++ b/app/styles/soapbox/admin.scss
@@ -57,7 +57,7 @@ $content-width: 840px;
         }
 
         &:hover {
-          color: $gab-brand-default;
+          color: var(--brand-color);
           background-color: $gab-background;
           transition: all 100ms linear;
           transition-property: color, background-color;
diff --git a/app/styles/soapbox/basics.scss b/app/styles/soapbox/basics.scss
index 7870ae0f1..e67efd4b4 100644
--- a/app/styles/soapbox/basics.scss
+++ b/app/styles/soapbox/basics.scss
@@ -160,7 +160,7 @@ button {
 }
 
 ::selection {
-  background: $gab-brand-default;
+  background: var(--brand-color);
   color: $white;
 }
 
diff --git a/app/styles/soapbox/components.scss b/app/styles/soapbox/components.scss
index 0f9a6e087..fc7fddadc 100644
--- a/app/styles/soapbox/components.scss
+++ b/app/styles/soapbox/components.scss
@@ -391,7 +391,7 @@
   }
 
   a {
-    color: $gab-brand-default;
+    color: var(--brand-color);
     text-decoration: none;
 
     &:hover {
@@ -453,7 +453,7 @@
   display: block;
   font-size: 15px;
   line-height: 20px;
-  color: $gab-brand-default;
+  color: var(--brand-color);
   border: 0;
   background: transparent;
   padding: 0;
@@ -592,7 +592,7 @@
     color: $gab-secondary-text;
 
     a {
-      color: $gab-brand-default;
+      color: var(--brand-color);
       font-weight: bold;
       text-decoration: none;
 
@@ -1544,7 +1544,7 @@ a.account__display-name {
   right: 14px;
   width: 61px;
   height: 61px;
-  background-color: $nav-ui-highlight-color;
+  background-color: var(--brand-color);
   border: 0;
   border-radius: 999px;
   box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.5);
@@ -1868,7 +1868,7 @@ a.account__display-name {
 }
 
 .react-toggle--checked .react-toggle-track {
-  background-color: $gab-brand-default;
+  background-color: var(--brand-color);
 }
 
 .react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
@@ -1928,7 +1928,7 @@ a.account__display-name {
 
 .react-toggle--checked .react-toggle-thumb {
   left: 27px;
-  border-color: $gab-brand-default;
+  border-color: var(--brand-color);
 }
 
 .column-link {
@@ -5090,7 +5090,7 @@ noscript {
       color: $secondary-text-color;
 
       a {
-        color: $gab-brand-default !important;
+        color: var(--brand-color) !important;
       }
     }
   }
@@ -5115,7 +5115,7 @@ noscript {
       display: block;
       margin: 15px auto;
       text-align: center;
-      color: $gab-brand-default;
+      color: var(--brand-color);
     }
   }
 }
@@ -5199,7 +5199,7 @@ noscript {
 }
 
 .badge {
-  background-color: $gab-brand-default;
+  background-color: var(--brand-color);
   color: #fff;
   font-size: 12px;
   font-weight: normal;
diff --git a/app/styles/soapbox/components/dropdown-menu.scss b/app/styles/soapbox/components/dropdown-menu.scss
index 0cc214c54..371577cc4 100644
--- a/app/styles/soapbox/components/dropdown-menu.scss
+++ b/app/styles/soapbox/components/dropdown-menu.scss
@@ -71,7 +71,7 @@
     &:active {
       outline: 0;
       color: #fff;
-      background: $gab-brand-default !important;
+      background: var(--brand-color) !important;
     }
   }
 
diff --git a/app/styles/soapbox/components/group-form.scss b/app/styles/soapbox/components/group-form.scss
index fad2ebfbb..e9cef5766 100644
--- a/app/styles/soapbox/components/group-form.scss
+++ b/app/styles/soapbox/components/group-form.scss
@@ -37,13 +37,13 @@
     background-size: 100px 1200px;
 
     &:hover {
-      color: $gab-brand-default;
+      color: var(--brand-color);
       background-position: 0 -100px;
     }
 
     &.group-form__file-label--selected {
       background-position: 0 -100px;
-      color: $gab-brand-default;
+      color: var(--brand-color);
     }
   }
 
diff --git a/app/styles/soapbox/components/group-sidebar-panel.scss b/app/styles/soapbox/components/group-sidebar-panel.scss
index 8a2d51031..bbe96bdae 100644
--- a/app/styles/soapbox/components/group-sidebar-panel.scss
+++ b/app/styles/soapbox/components/group-sidebar-panel.scss
@@ -26,7 +26,7 @@
       color: $gab-secondary-text;
 
       &__unread {
-        color: $gab-brand-default;
+        color: var(--brand-color);
       }
     }
   }
diff --git a/app/styles/soapbox/components/inputs.scss b/app/styles/soapbox/components/inputs.scss
index f0fa22956..ecd73d096 100644
--- a/app/styles/soapbox/components/inputs.scss
+++ b/app/styles/soapbox/components/inputs.scss
@@ -8,7 +8,7 @@ textarea {
     padding: 7px 10px;
     border: 1px solid;
     border-radius: 4px;
-    color: $gab-brand-default;
+    color: var(--brand-color);
     border-color: $gab-placeholder-accent;
     background: $gab-background-container;
     &:focus {outline: none;}
diff --git a/app/styles/soapbox/components/tabs-bar.scss b/app/styles/soapbox/components/tabs-bar.scss
index 5d30ea91a..a45cf6be4 100644
--- a/app/styles/soapbox/components/tabs-bar.scss
+++ b/app/styles/soapbox/components/tabs-bar.scss
@@ -1,4 +1,4 @@
-$nav-ui-background-color: $gab-brand-default !default;
+$nav-ui-background-color: var(--brand-color) !default;
 
 .tabs-bar {
   display: flex;
diff --git a/app/styles/soapbox/containers.scss b/app/styles/soapbox/containers.scss
index ba4f2030a..03bf01c3f 100644
--- a/app/styles/soapbox/containers.scss
+++ b/app/styles/soapbox/containers.scss
@@ -346,7 +346,7 @@
         &:hover,
         &:focus,
         &:active {
-          color: $gab-brand-default;
+          color: var(--brand-color);
         }
 
       }
@@ -359,7 +359,7 @@
     }
 
     .nav-button {
-      background: $gab-brand-default;
+      background: var(--brand-color);
       color: #fff;
       margin: 8px;
       margin-left: 0;
diff --git a/app/styles/soapbox/donations.scss b/app/styles/soapbox/donations.scss
index 2130b8a2f..45bece23c 100644
--- a/app/styles/soapbox/donations.scss
+++ b/app/styles/soapbox/donations.scss
@@ -190,7 +190,7 @@ body.admin {
   }
 
   &__reached {
-    color: $gab-brand-default;
+    color: var(--brand-color);
   }
 
   .wtf-panel__content {
@@ -208,6 +208,6 @@ body.admin {
 
   &__progress {
     height: 100%;
-    background: $gab-brand-default;
+    background: var(--brand-color);
   }
 }