diff --git a/app/soapbox/reducers/theme.js b/app/soapbox/reducers/theme.js
index 122a1d769..606fdc06c 100644
--- a/app/soapbox/reducers/theme.js
+++ b/app/soapbox/reducers/theme.js
@@ -7,6 +7,17 @@ import { brightness, hue, convert } from 'chromatism';
 
 const initialState = ImmutableMap();
 
+const modes = ImmutableMap({
+  light: ImmutableMap({
+    'primary-text-color': '#000000',
+    'primary-text-color-faint': 'rgba(0, 0, 0, 0.7)',
+  }),
+  dark: ImmutableMap({
+    'primary-text-color': '#ffffff',
+    'primary-text-color-faint': 'rgba(255, 255, 255, 0.7)',
+  }),
+});
+
 const cssrgba = (color, a) => {
   const { r, g, b } = convert(color).rgb;
   return `rgba(${[r, g, b, a].join(',')})`;
@@ -18,14 +29,14 @@ const makeContrast = (percent, color, mode) => {
 };
 
 export const generateTheme = (brandColor, mode) => {
-  return ImmutableMap({
+  return modes.get(mode).merge(ImmutableMap({
     'brand-color': brandColor,
     'accent-color': brightness(10, hue(-3, brandColor).hex).hex,
     'brand-color-faint': cssrgba(brandColor, 0.1),
     'brand-color-med': cssrgba(brandColor, 0.2),
     'highlight-text-color': makeContrast(5, brandColor, mode).hex,
     'brand-color-hicontrast': makeContrast(15, brandColor, mode).hex,
-  });
+  }));
 };
 
 export const setTheme = themeData => {
diff --git a/app/styles/soapbox-light/diff.scss b/app/styles/soapbox-light/diff.scss
index 158291190..23a696b98 100644
--- a/app/styles/soapbox-light/diff.scss
+++ b/app/styles/soapbox-light/diff.scss
@@ -187,7 +187,7 @@ body {
 // Change the default color used for the text in an empty column or on the error column
 .empty-column-indicator,
 .error-column {
-  color: $primary-text-color;
+  color: var(--primary-text-color);
   background: $white;
 }
 
@@ -210,12 +210,12 @@ body {
 
   .status.light {
     .status__content {
-      color: $primary-text-color;
+      color: var(--primary-text-color);
     }
 
     .display-name {
       strong {
-        color: $primary-text-color;
+        color: var(--primary-text-color);
       }
     }
   }
@@ -226,7 +226,7 @@ body {
 
     .name {
       a {
-        color: $primary-text-color;
+        color: var(--primary-text-color);
       }
     }
 
@@ -235,7 +235,7 @@ body {
     }
 
     .account__header__content {
-      color: $primary-text-color;
+      color: var(--primary-text-color);
     }
   }
 }
diff --git a/app/styles/soapbox-light/variables.scss b/app/styles/soapbox-light/variables.scss
index e405dcf66..9d9866ac6 100644
--- a/app/styles/soapbox-light/variables.scss
+++ b/app/styles/soapbox-light/variables.scss
@@ -22,7 +22,6 @@ $ui-primary-color: #9bcbed;
 $ui-secondary-color: $classic-base-color !default;
 $ui-highlight-color: #990099;
 
-$primary-text-color: $black !default;
 $darker-text-color: $classic-base-color !default;
 $dark-text-color: #444b5d;
 $action-button-color: #606984;
diff --git a/app/styles/soapbox/about.scss b/app/styles/soapbox/about.scss
index 65e0f2205..4fbeebff4 100644
--- a/app/styles/soapbox/about.scss
+++ b/app/styles/soapbox/about.scss
@@ -189,7 +189,7 @@ $small-breakpoint: 960px;
     font-family: $font-sans-serif, sans-serif;
     font-size: 16px;
     line-height: 28px;
-    color: $primary-text-color;
+    color: var(--primary-text-color);
     text-align: right;
     padding: 10px 15px;
 
@@ -274,7 +274,7 @@ $small-breakpoint: 960px;
 
       a {
         display: block;
-        color: $primary-text-color;
+        color: var(--primary-text-color);
         text-decoration: none;
 
         &:hover {
@@ -586,7 +586,7 @@ $small-breakpoint: 960px;
 
     h1 {
       font-weight: 500;
-      color: $primary-text-color;
+      color: var(--primary-text-color);
       margin-bottom: 0;
 
       small {
@@ -659,8 +659,6 @@ $small-breakpoint: 960px;
 }
 
 .public-layout {
-  $gab-background: $gab-background-base-dark !default;
-
   position: relative;
   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>');
@@ -966,7 +964,7 @@ $small-breakpoint: 960px;
 .brand__tagline {
   display: block;
   width: 470px;
-  color: $primary-text-color;
+  color: var(--primary-text-color);
   font-size: 30px;
   line-height: 1.4;
   margin-top: 25px;
diff --git a/app/styles/soapbox/accounts.scss b/app/styles/soapbox/accounts.scss
index 76432801e..8b70a4678 100644
--- a/app/styles/soapbox/accounts.scss
+++ b/app/styles/soapbox/accounts.scss
@@ -78,7 +78,7 @@
 
       strong {
         font-size: 15px;
-        color: $primary-text-color;
+        color: var(--primary-text-color);
         font-weight: 500;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -108,7 +108,7 @@
   .page,
   .gap {
     font-size: 14px;
-    color: $primary-text-color;
+    color: var(--primary-text-color);
     font-weight: 500;
     display: inline-block;
     padding: 6px 10px;
@@ -310,7 +310,7 @@
     }
 
     strong {
-      color: $primary-text-color;
+      color: var(--primary-text-color);
       font-weight: 700;
     }
   }
diff --git a/app/styles/soapbox/basics.scss b/app/styles/soapbox/basics.scss
index 766f70fcc..4a2e1e190 100644
--- a/app/styles/soapbox/basics.scss
+++ b/app/styles/soapbox/basics.scss
@@ -165,7 +165,7 @@ button {
 }
 
 .explanation-box {
-  color: $primary-text-color;
+  color: var(--primary-text-color);
   padding: 15px 20px;
   font-size: 14px;
   background-color: var(--brand-color-faint);
diff --git a/app/styles/soapbox/components.scss b/app/styles/soapbox/components.scss
index a7de62edd..80b1384f2 100644
--- a/app/styles/soapbox/components.scss
+++ b/app/styles/soapbox/components.scss
@@ -8,7 +8,7 @@
   border: 10px none;
   border-radius: 4px;
   box-sizing: border-box;
-  color: $primary-text-color;
+  color: var(--primary-text-color);
   cursor: pointer;
   display: inline-block;
   font-family: inherit;
@@ -188,7 +188,7 @@
   &.overlayed {
     box-sizing: content-box;
     background: rgba($base-overlay-background, 0.6);
-    color: rgba($primary-text-color, 0.7);
+    color: var(--primary-text-color-faint);
     border-radius: 4px;
     padding: 2px;
 
@@ -372,7 +372,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   padding-top: 2px;
-  color: $primary-text-color;
+  color: var(--primary-text-color);
 
   &:focus {
     outline: 0;
@@ -592,7 +592,7 @@
       }
 
       a.status__content__spoiler-link {
-        color: $primary-text-color;
+        color: var(--primary-text-color);
         background: $ui-primary-color;
 
         &:hover {
@@ -756,7 +756,7 @@
   .domain__domain-name {
     flex: 1 1 auto;
     display: block;
-    color: $primary-text-color;
+    color: var(--primary-text-color);
     text-decoration: none;
     font-size: 14px;
     font-weight: 500;
@@ -961,7 +961,7 @@ a .account__avatar {
     display: block;
     font-size: 15px;
     font-weight: 500;
-    color: $primary-text-color;
+    color: var(--primary-text-color);
 
     @each $lang in $cjk-langs {
       &:lang(#{$lang}) {
@@ -998,7 +998,7 @@ a .account__avatar {
 .status__display-name,
 .account__display-name {
   strong {
-    color: $primary-text-color;
+    color: var(--primary-text-color);
   }
 }
 
@@ -1044,7 +1044,7 @@ a.account__display-name {
 
   strong {
     font-size: 16px;
-    color: $primary-text-color;
+    color: var(--primary-text-color);
   }
 
   .display-name__account {
@@ -1139,7 +1139,7 @@ a.account__display-name {
   text-decoration: none;
 
   &:hover {
-    color: $primary-text-color;
+    color: var(--primary-text-color);
     text-decoration: underline;
   }
 }
@@ -1678,13 +1678,13 @@ a.account__display-name {
   &__btn {
     display: block;
     text-align: left;
-    color: $primary-text-color;
+    color: var(--primary-text-color);
     text-decoration: none;
     font-size: 15px;
     padding: 0 20px;
 
     &:hover {
-      color: darken($primary-text-color, 14%);
+      color: var(--primary-text-color-faint);
 
       span {
         text-decoration: underline;
@@ -1949,7 +1949,7 @@ a.account__display-name {
 
 .column-link {
   background: var(--brand-color-med);
-  color: $primary-text-color;
+  color: var(--primary-text-color);
   display: block;
   font-size: 16px;
   padding: 15px;
@@ -1973,7 +1973,7 @@ a.account__display-name {
     &:focus,
     &:active {
       background: transparent;
-      color: $primary-text-color;
+      color: var(--primary-text-color);
     }
 
     &.active {
@@ -2098,7 +2098,7 @@ a.account__display-name {
 
   &:focus,
   &:active {
-    color: $primary-text-color;
+    color: var(--primary-text-color);
     border-bottom-color: var(--highlight-text-color);
   }
 
@@ -2179,7 +2179,7 @@ a.account__display-name {
       &:hover,
       &:active,
       &:focus {
-        color: $primary-text-color;
+        color: var(--primary-text-color);
       }
     }
 
@@ -2455,7 +2455,7 @@ a.status-card.compact:hover {
     }
 
     &.active {
-      color: $primary-text-color;
+      color: var(--primary-text-color);
       border-radius: 10px;
       background-color: var(--brand-color-faint);
     }
@@ -2513,11 +2513,11 @@ a.status-card.compact:hover {
   &:hover {color: lighten($darker-text-color, 7%);}
 
   &.active {
-    color: $primary-text-color;
+    color: var(--primary-text-color);
     background: var(--brand-color-med);
 
     &:hover {
-      color: $primary-text-color;
+      color: var(--primary-text-color);
       background: var(--brand-color-med);
     }
   }
@@ -2683,7 +2683,7 @@ a.status-card.compact:hover {
 .video-error-cover {
   align-items: center;
   background: $base-overlay-background;
-  color: $primary-text-color;
+  color: var(--primary-text-color);
   cursor: pointer;
   display: flex;
   flex-direction: column;
@@ -2756,7 +2756,7 @@ a.status-card.compact:hover {
       background: rgba($base-overlay-background, 0.5);
       border-radius: 8px;
       padding: 8px 12px;
-      color: $primary-text-color;
+      color: var(--primary-text-color);
       font-weight: 500;
       font-size: 14px;
     }
@@ -2890,7 +2890,7 @@ a.status-card.compact:hover {
 }
 
 .relationship-tag {
-  color: $primary-text-color;
+  color: var(--primary-text-color);
   margin-bottom: 4px;
   display: block;
   vertical-align: top;
@@ -3244,14 +3244,14 @@ a.status-card.compact:hover {
   &:hover,
   &.active {
     background: var(--brand-color);
-    color: $primary-text-color;
+    color: var(--primary-text-color);
     outline: 0;
 
     .privacy-dropdown__option__content {
-      color: $primary-text-color;
+      color: var(--primary-text-color);
 
       strong {
-        color: $primary-text-color;
+        color: var(--primary-text-color);
       }
     }
   }
@@ -3299,7 +3299,7 @@ a.status-card.compact:hover {
       background: var(--brand-color);
 
       .icon-button {
-        color: $primary-text-color;
+        color: var(--primary-text-color);
       }
     }
   }
@@ -3433,7 +3433,7 @@ a.status-card.compact:hover {
 .media-gallery__gifv__label {
   display: block;
   position: absolute;
-  color: $primary-text-color;
+  color: var(--primary-text-color);
   background: rgba($base-overlay-background, 0.5);
   bottom: 6px;
   left: 6px;
@@ -3572,7 +3572,7 @@ a.status-card.compact:hover {
     &::before {
       content: 'GIF';
       position: absolute;
-      color: $primary-text-color;
+      color: var(--primary-text-color);
       background: rgba($base-overlay-background, 0.5);
       bottom: 6px;
       left: 6px;
@@ -3664,7 +3664,7 @@ a.status-card.compact:hover {
 
 .status__video-player-expand,
 .status__video-player-mute {
-  color: $primary-text-color;
+  color: var(--primary-text-color);
   opacity: 0.8;
   position: absolute;
   right: 4px;
@@ -3673,7 +3673,7 @@ a.status-card.compact:hover {
 
 .status__video-player-spoiler {
   display: none;
-  color: $primary-text-color;
+  color: var(--primary-text-color);
   left: 4px;
   position: absolute;
   text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color;
@@ -4008,7 +4008,7 @@ a.status-card.compact:hover {
 
 .media-spoiler-video-play-icon {
   border-radius: 100px;
-  color: rgba($primary-text-color, 0.8);
+  color: var(--primary-text-color-faint);
   font-size: 36px;
   left: 50%;
   padding: 5px;
@@ -4073,7 +4073,7 @@ a.status-card.compact:hover {
     position: relative;
 
     &.active {
-      color: $primary-text-color;
+      color: var(--primary-text-color);
 
       &::before,
       &::after {
@@ -4262,7 +4262,7 @@ noscript {
       padding: 10px;
       font-family: $font-monospace, monospace;
       background: var(--brand-color-med);
-      color: $primary-text-color;
+      color: var(--primary-text-color);
       font-size: 14px;
       margin: 0;
       margin-bottom: 15px;
@@ -4711,7 +4711,7 @@ noscript {
 
   &__label {
     flex: 1 1;
-    color: $primary-text-color;
+    color: var(--primary-text-color);
     font-size: 16px;
     font-weight: bold;
     line-height: 19px;
@@ -4782,7 +4782,7 @@ noscript {
     margin-top: 6px;
 
     &__name {
-      color: $primary-text-color;
+      color: var(--primary-text-color);
       font-size: 14px;
       font-weight: bold;
       line-height: 16px;
@@ -4808,7 +4808,7 @@ noscript {
     }
 
     &__icon {
-    color: $primary-text-color;
+    color: var(--primary-text-color);
     }
   }
   }
@@ -4969,7 +4969,7 @@ noscript {
         }
 
         span {
-          color: $primary-text-color;
+          color: var(--primary-text-color);
           font-size: 15px;
           line-height: 1.25;
         }
@@ -5017,7 +5017,7 @@ noscript {
     &__bio {
       display: block;
       flex: 1 1;
-      color: $primary-text-color;
+      color: var(--primary-text-color);
       margin: 15px 0;
       font-size: 15px;
       line-height: 1.25;
@@ -5155,7 +5155,7 @@ noscript {
   }
 
   &__title-text {
-    color: $primary-text-color;
+    color: var(--primary-text-color);
     font-size: 27px;
     font-weight: bold;
     line-height: 32px;
diff --git a/app/styles/soapbox/components/account-header.scss b/app/styles/soapbox/components/account-header.scss
index 77f3da9b2..28054339e 100644
--- a/app/styles/soapbox/components/account-header.scss
+++ b/app/styles/soapbox/components/account-header.scss
@@ -128,7 +128,7 @@
           display: block;
 
           &:first-of-type {
-            color: $primary-text-color;
+            color: var(--primary-text-color);
             font-size: 20px;
             font-weight: 800;
             line-height: 24px;
@@ -148,7 +148,7 @@
 
         &:hover,
         &.active {
-          border-bottom: 2px solid $primary-text-color;
+          border-bottom: 2px solid var(--primary-text-color);
         }
         &.score {border-bottom: 0 !important;}
       }
diff --git a/app/styles/soapbox/components/compose-form.scss b/app/styles/soapbox/components/compose-form.scss
index 42f8b0b80..c51f7a3e5 100644
--- a/app/styles/soapbox/components/compose-form.scss
+++ b/app/styles/soapbox/components/compose-form.scss
@@ -30,7 +30,7 @@
   }
 
   .compose-form__warning {
-          color: $primary-text-color;
+          color: var(--primary-text-color);
     margin-bottom: 10px;
     background: $ui-primary-color;
     box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3);
diff --git a/app/styles/soapbox/components/group-card.scss b/app/styles/soapbox/components/group-card.scss
index f3cee9223..567a170cb 100644
--- a/app/styles/soapbox/components/group-card.scss
+++ b/app/styles/soapbox/components/group-card.scss
@@ -47,7 +47,7 @@
     padding: 15px;
 
     .group-card__title {
-      color: $primary-text-color;
+      color: var(--primary-text-color);
       font-size: 16px;
       font-weight: bold;
     }
@@ -60,7 +60,7 @@
     }
 
     .group-card__description {
-      color: $primary-text-color;
+      color: var(--primary-text-color);
       font-size: 14px;
     }
   }
diff --git a/app/styles/soapbox/components/group-detail.scss b/app/styles/soapbox/components/group-detail.scss
index 4d28c1800..43c798fb6 100644
--- a/app/styles/soapbox/components/group-detail.scss
+++ b/app/styles/soapbox/components/group-detail.scss
@@ -26,11 +26,11 @@
     text-decoration: none;
     padding: 16px 22px;
         text-align: center;
-        color: $primary-text-color;
+        color: var(--primary-text-color);
 
         &:hover,
         &--active {
-          border-bottom: 2px solid $primary-text-color;
+          border-bottom: 2px solid var(--primary-text-color);
         }
       }
 
diff --git a/app/styles/soapbox/components/group-sidebar-panel.scss b/app/styles/soapbox/components/group-sidebar-panel.scss
index bbe96bdae..6b4fa681d 100644
--- a/app/styles/soapbox/components/group-sidebar-panel.scss
+++ b/app/styles/soapbox/components/group-sidebar-panel.scss
@@ -3,13 +3,13 @@
     padding: 0 15px 15px;
 
     &__show-all {
-      color: $primary-text-color;
+      color: var(--primary-text-color);
     }
   }
 
   &__item {
     display: block;
-    color: $primary-text-color;
+    color: var(--primary-text-color);
     text-decoration: none;
     margin-bottom: 15px;
 
diff --git a/app/styles/soapbox/components/hotkeys-modal.scss b/app/styles/soapbox/components/hotkeys-modal.scss
index 62e17521c..af5ef6cd8 100644
--- a/app/styles/soapbox/components/hotkeys-modal.scss
+++ b/app/styles/soapbox/components/hotkeys-modal.scss
@@ -27,7 +27,7 @@
       display: block;
       padding-left: 10px;
       margin-bottom: 10px;
-      color: $primary-text-color;
+      color: var(--primary-text-color);
       font-size: 16px;
       font-weight: 600;
     }
diff --git a/app/styles/soapbox/components/modal.scss b/app/styles/soapbox/components/modal.scss
index e9aa559df..f855983e4 100644
--- a/app/styles/soapbox/components/modal.scss
+++ b/app/styles/soapbox/components/modal.scss
@@ -98,7 +98,7 @@
   background: rgba($base-overlay-background, 0.5);
   box-sizing: border-box;
   border: 0;
-  color: $primary-text-color;
+  color: var(--primary-text-color);
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -158,7 +158,7 @@
 }
 
 .media-modal__button {
-  background-color: $primary-text-color;
+  background-color: var(--primary-text-color);
   height: 12px;
   width: 12px;
   border-radius: 6px;
diff --git a/app/styles/soapbox/components/user-panel.scss b/app/styles/soapbox/components/user-panel.scss
index 98b610e59..63fcc31fa 100644
--- a/app/styles/soapbox/components/user-panel.scss
+++ b/app/styles/soapbox/components/user-panel.scss
@@ -43,7 +43,7 @@
   &__account {
     a {
       text-decoration: none;
-      color: $primary-text-color;
+      color: var(--primary-text-color);
     }
 
     &__name {
@@ -85,7 +85,7 @@
     a {
       text-decoration: none;
 
-      color: $primary-text-color;
+      color: var(--primary-text-color);
 
       &:hover {
         opacity: 0.8;
diff --git a/app/styles/soapbox/containers.scss b/app/styles/soapbox/containers.scss
index a98f84f60..073bc216b 100644
--- a/app/styles/soapbox/containers.scss
+++ b/app/styles/soapbox/containers.scss
@@ -30,7 +30,7 @@
       display: flex;
       justify-content: center;
       align-items: center;
-      color: $primary-text-color;
+      color: var(--primary-text-color);
       text-decoration: none;
       outline: 0;
       padding: 12px 16px;
@@ -329,7 +329,7 @@
       font-size: 14px;
       font-weight: 600;
       text-decoration: none;
-      color: $primary-text-color;
+      color: var(--primary-text-color);
       white-space: nowrap;
       text-align: center;
 
@@ -337,7 +337,7 @@
       &:focus,
       &:active {
         text-decoration: underline;
-        color: $primary-text-color;
+        color: var(--primary-text-color);
       }
 
       &--hollow {
@@ -574,7 +574,7 @@
         h1 {
           font-size: 20px;
           line-height: 18px * 1.5;
-          color: $primary-text-color;
+          color: var(--primary-text-color);
           font-weight: 500;
           overflow: hidden;
           white-space: nowrap;
@@ -584,7 +584,7 @@
           small {
             display: block;
             font-size: 14px;
-            color: $primary-text-color;
+            color: var(--primary-text-color);
             font-weight: 400;
             overflow: hidden;
             text-overflow: ellipsis;
@@ -695,7 +695,7 @@
             font-weight: 500;
             font-size: 18px;
             margin-bottom: 5px;
-            color: $primary-text-color;
+            color: var(--primary-text-color);
             font-family: $font-display, sans-serif;
           }
         }
@@ -744,7 +744,7 @@
 
           strong {
             font-weight: 700;
-            color: $primary-text-color;
+            color: var(--primary-text-color);
           }
         }
       }
@@ -801,7 +801,7 @@
     .account__header__content {
       padding: 20px;
       padding-bottom: 0;
-      color: $primary-text-color;
+      color: var(--primary-text-color);
     }
 
     &__extra,
diff --git a/app/styles/soapbox/dashboard.scss b/app/styles/soapbox/dashboard.scss
index c92abd543..8b8654e0c 100644
--- a/app/styles/soapbox/dashboard.scss
+++ b/app/styles/soapbox/dashboard.scss
@@ -36,7 +36,7 @@
     font-weight: 500;
     font-size: 24px;
     line-height: 21px;
-    color: $primary-text-color;
+    color: var(--primary-text-color);
     font-family: $font-display, sans-serif;
     margin-bottom: 20px;
     line-height: 30px;
diff --git a/app/styles/soapbox/donations.scss b/app/styles/soapbox/donations.scss
index 56a6dc6dc..f9e63420a 100644
--- a/app/styles/soapbox/donations.scss
+++ b/app/styles/soapbox/donations.scss
@@ -20,7 +20,7 @@
 
     &--active {
       background-color: var(--brand-color);
-      color: $primary-text-color;
+      color: var(--primary-text-color);
     }
   }
 }
@@ -126,7 +126,7 @@
     background: transparent;
     border: 0;
     margin: 0;
-    color: $primary-text-color;
+    color: var(--primary-text-color);
     appearance: textfield;
 
     &::-webkit-inner-spin-button,
diff --git a/app/styles/soapbox/footer.scss b/app/styles/soapbox/footer.scss
index bcc19f592..167595478 100644
--- a/app/styles/soapbox/footer.scss
+++ b/app/styles/soapbox/footer.scss
@@ -48,13 +48,13 @@
       margin-right: auto;
 
       span {
-        color: $primary-text-color;
+        color: var(--primary-text-color);
         font-size: 1.3rem;
         font-weight: 500;
         line-height: 1.5;
 
         &:last-of-type {
-          color: darken($primary-text-color, 20%);
+          color: var(--primary-text-color-faint);
         }
       }
     }
diff --git a/app/styles/soapbox/forms.scss b/app/styles/soapbox/forms.scss
index 3ecae3ccd..b55ae17f8 100644
--- a/app/styles/soapbox/forms.scss
+++ b/app/styles/soapbox/forms.scss
@@ -49,7 +49,7 @@ code {
         font-family: inherit;
         font-size: 14px;
         padding-top: 5px;
-        color: $primary-text-color;
+        color: var(--primary-text-color);
         display: block;
         width: auto;
       }
@@ -148,7 +148,7 @@ code {
       & > label {
         font-family: inherit;
         font-size: 14px;
-        color: $primary-text-color;
+        color: var(--primary-text-color);
         font-weight: 500;
         min-width: 150px;
         flex: 0 0 auto;
@@ -170,7 +170,7 @@ code {
     .label_input > label {
       font-family: inherit;
       font-size: 14px;
-      color: $primary-text-color;
+      color: var(--primary-text-color);
       display: block;
       margin-bottom: 8px;
       word-wrap: break-word;
@@ -192,7 +192,7 @@ code {
     & > label {
       font-family: inherit;
       font-size: 16px;
-      color: $primary-text-color;
+      color: var(--primary-text-color);
       display: block;
       font-weight: 500;
       padding-top: 5px;
@@ -266,7 +266,7 @@ code {
     margin-bottom: 5px;
     font-family: inherit;
     font-size: 14px;
-    color: $primary-text-color;
+    color: var(--primary-text-color);
     display: block;
     width: auto;
   }
@@ -276,7 +276,7 @@ code {
       label {
         font-family: inherit;
         font-size: 14px;
-        color: $primary-text-color;
+        color: var(--primary-text-color);
         display: inline-block;
         width: auto;
         position: relative;
@@ -300,8 +300,8 @@ code {
     input[type=email],
     input[type=password],
     textarea {
-      color: rgba($primary-text-color, 0.5);
-      border-color: rgba($primary-text-color, 0.5);
+      color: var(--primary-text-color-faint);
+      border-color: var(--primary-text-color-faint);
     }
   }
 
@@ -312,7 +312,7 @@ code {
   textarea {
     box-sizing: border-box;
     font-size: 16px;
-    color: $primary-text-color;
+    color: var(--primary-text-color);
     display: block;
     width: 100%;
     outline: 0;
@@ -390,7 +390,7 @@ code {
     border: 0;
     border-radius: 4px;
     background: var(--brand-color);
-    color: $primary-text-color;
+    color: var(--primary-text-color);
     font-size: 18px;
     line-height: inherit;
     height: auto;
@@ -440,7 +440,7 @@ code {
     appearance: none;
     box-sizing: border-box;
     font-size: 16px;
-    color: $primary-text-color;
+    color: var(--primary-text-color);
     display: block;
     width: 100%;
     outline: 0;
@@ -509,7 +509,7 @@ code {
         &.rich-formatting {
           &,
           p {
-            color: $primary-text-color;
+            color: var(--primary-text-color);
           }
         }
       }
@@ -550,7 +550,7 @@ code {
     text-decoration: none;
 
     &:hover {
-      color: $primary-text-color;
+      color: var(--primary-text-color);
       text-decoration: underline;
     }
   }
@@ -568,7 +568,7 @@ code {
     padding: 10px;
     font-family: $font-monospace, monospace;
     background: var(--brand-color-med);
-    color: $primary-text-color;
+    color: var(--primary-text-color);
     font-size: 14px;
     margin: 0;
 
@@ -719,7 +719,7 @@ code {
   .warning {
     box-sizing: border-box;
     background: rgba($error-value-color, 0.5);
-    color: $primary-text-color;
+    color: var(--primary-text-color);
     text-shadow: 1px 1px 0 rgba($base-shadow-color, 0.3);
     box-shadow: 0 2px 6px rgba($base-shadow-color, 0.4);
     border-radius: 4px;
@@ -727,7 +727,7 @@ code {
     margin-bottom: 15px;
 
     a {
-      color: $primary-text-color;
+      color: var(--primary-text-color);
       text-decoration: underline;
 
       &:hover,
@@ -787,7 +787,7 @@ code {
 
   h4 {
     font-size: 16px;
-    color: $primary-text-color;
+    color: var(--primary-text-color);
     text-align: center;
     margin-bottom: 20px;
     border: 0;
diff --git a/app/styles/soapbox/stream_entries.scss b/app/styles/soapbox/stream_entries.scss
index 9ec7d1bfe..ab098eef3 100644
--- a/app/styles/soapbox/stream_entries.scss
+++ b/app/styles/soapbox/stream_entries.scss
@@ -77,7 +77,7 @@
   flex: 0 auto;
   font-size: 14px;
   background: var(--brand-color);
-  color: $primary-text-color;
+  color: var(--primary-text-color);
   text-transform: none;
   line-height: 36px;
   height: auto;
@@ -89,7 +89,7 @@
     height: auto;
     vertical-align: middle;
     margin-right: 5px;
-    fill: $primary-text-color;
+    fill: var(--primary-text-color);
   }
 
   &:active,
diff --git a/app/styles/soapbox/tables.scss b/app/styles/soapbox/tables.scss
index f46f89af7..41ed16dc6 100644
--- a/app/styles/soapbox/tables.scss
+++ b/app/styles/soapbox/tables.scss
@@ -113,7 +113,7 @@ a.table-action-link {
   font-weight: 500;
 
   &:hover {
-    color: $primary-text-color;
+    color: var(--primary-text-color);
   }
 
   i.fa {
diff --git a/app/styles/soapbox/variables.scss b/app/styles/soapbox/variables.scss
index 9a7ab1255..0b82dcbcc 100644
--- a/app/styles/soapbox/variables.scss
+++ b/app/styles/soapbox/variables.scss
@@ -9,7 +9,6 @@
 // STATIC COLORS
 
 $gab-brand-default: #990099 !default;
-$gab-alert-red: #e600e6 !default;
 $gab-secondary-text: #999 !default;
 $gab-text-highlight: #e600e6 !default;
 $gab-small-cta-primary: #607cf5 !default;
@@ -72,7 +71,6 @@ $classic-highlight-color: $gab-text-highlight;
 // Variables for defaults in UI
 $base-shadow-color: $black !default;
 $base-overlay-background: $black !default;
-$base-border-color: $white !default;
 $simple-background-color: $white !default;
 $valid-value-color: $success-green !default;
 $error-value-color: $error-red !default;
@@ -89,7 +87,6 @@ $nav-ui-highlight-color: $gab-text-highlight !default;
 $nav-ui-search-bg-color: darken($nav-ui-highlight-color, 52%) !default;
 
 // Variables for texts
-$primary-text-color: $white !default;
 $darker-text-color: $gab-secondary-text !default;
 $dark-text-color: $ui-base-lighter-color !default;
 $secondary-text-color: $ui-secondary-color !default;
diff --git a/app/styles/soapbox/widgets.scss b/app/styles/soapbox/widgets.scss
index e504a5368..704cd0d97 100644
--- a/app/styles/soapbox/widgets.scss
+++ b/app/styles/soapbox/widgets.scss
@@ -142,7 +142,7 @@
     margin-top: 10px;
 
     a {
-      color: $primary-text-color;
+      color: var(--primary-text-color);
       text-decoration: none;
     }
   }
@@ -237,7 +237,7 @@
   margin: 10px 0;
 
   h1 {
-    color: $primary-text-color;
+    color: var(--primary-text-color);
     font-size: 36px;
     line-height: 1.1;
     font-weight: 700;
@@ -303,7 +303,7 @@
       flex: 1 1 auto;
       font-size: 18px;
       font-weight: 700;
-      color: $primary-text-color;
+      color: var(--primary-text-color);
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -325,7 +325,7 @@
       &,
       .fa,
       small {
-        color: $primary-text-color;
+        color: var(--primary-text-color);
       }
     }
 
@@ -407,7 +407,7 @@
     text-align: center;
     font-size: 15px;
     font-weight: 500;
-    color: $primary-text-color;
+    color: var(--primary-text-color);
 
     small {
       display: block;