diff --git a/app/soapbox/containers/soapbox.js b/app/soapbox/containers/soapbox.js
index 8f568a51c..1b4a6ab3c 100644
--- a/app/soapbox/containers/soapbox.js
+++ b/app/soapbox/containers/soapbox.js
@@ -76,7 +76,7 @@ class SoapboxMount extends React.PureComponent {
   };
 
   componentDidMount() {
-    this.props.dispatch(generateTheme('#0482d8', 'light'));
+    this.props.dispatch(generateTheme('#bb0000', 'light'));
   }
 
   render() {
diff --git a/app/soapbox/reducers/theme.js b/app/soapbox/reducers/theme.js
index 606fdc06c..233aa74b3 100644
--- a/app/soapbox/reducers/theme.js
+++ b/app/soapbox/reducers/theme.js
@@ -11,10 +11,14 @@ const modes = ImmutableMap({
   light: ImmutableMap({
     'primary-text-color': '#000000',
     'primary-text-color-faint': 'rgba(0, 0, 0, 0.7)',
+    'background-color': '#f2f2f2',
+    'foreground-color': '#ffffff',
   }),
   dark: ImmutableMap({
     'primary-text-color': '#ffffff',
     'primary-text-color-faint': 'rgba(255, 255, 255, 0.7)',
+    'background-color': '#333333',
+    'foreground-color': '#222222',
   }),
 });
 
diff --git a/app/styles/soapbox-light/diff.scss b/app/styles/soapbox-light/diff.scss
index 64aba8f99..ecfd000bd 100644
--- a/app/styles/soapbox-light/diff.scss
+++ b/app/styles/soapbox-light/diff.scss
@@ -1,419 +1,384 @@
-// Notes!
-// Sass color functions, "darken" and "lighten" are automatically replaced.
-
-body {
-  color: $gab-default-text-light;
-  background-color: $gab-background;
-}
-
-// Change the colors of button texts
-.button {
-  color: #ffffff;
-
-  &.button-alternative-2 {
-    color: #000;
-  }
-}
-
-// Change default background colors of columns
-.column {
-  article {
-    background: #ffffff;
-  }
-}
-
-.drawer__inner {
-  background: var(--brand-color-med);
-}
-
-.drawer__inner__soapbox {
-  background: var(--brand-color-med) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color(#ffffff)}"/></svg>') no-repeat bottom / 100% auto;
-}
-
-// Change the colors used in compose-form
-.compose-form {
-  .compose-form__modifiers {
-    .compose-form__upload-description input {
-      color: lighten(#ffffff, 7%);
-      &::placeholder {color: lighten(#ffffff, 7%);}
-    }
-  }
-
-  .autosuggest-textarea__suggestions {
-    background: darken($ui-base-color, 6%);
-  }
-
-  .autosuggest-textarea__suggestions__item {
-    &:hover,
-    &:focus,
-    &:active,
-    &.selected {
-      background: var(--brand-color-faint);
-    }
-  }
-}
-
-.emoji-mart-bar {
-  border-color: var(--brand-color-faint);
-
-  &:first-child {
-    background: darken($ui-base-color, 6%);
-  }
-}
-
-.emoji-mart-search input {
-  background: rgba($ui-base-color, 0.3);
-  border-color: var(--brand-color-med);
-}
-
-// Change the background colors of statuses
-.focusable:focus {
-  background: var(--brand-color-faint);
-}
-
-.status.status-direct {
-  background: var(--brand-color-faint);
-}
-
-.focusable:focus .status.status-direct {
-  background: var(--brand-color-med);
-}
-
-// Change the background colors of status__content__spoiler-link
-.reply-indicator__content .status__content__spoiler-link,
-.status__content .status__content__spoiler-link {
-  background: $ui-base-lighter-color;
-
-  &:hover {
-    background: lighten($ui-base-lighter-color, 6%);
-  }
-}
-
-// Change the background colors of media and video spoilers
-.media-spoiler,
-.video-player__spoiler {
-  background: var(--brand-color-med);
-}
-
-// Change the colors used in the dropdown menu
-.dropdown-menu {
-  &__item {
-    a {
-      color: $darker-text-color;
-    }
-  }
-}
-
-// Change the text colors on inverted background
-.privacy-dropdown__option.active .privacy-dropdown__option__content,
-.privacy-dropdown__option.active .privacy-dropdown__option__content strong,
-.privacy-dropdown__option:hover .privacy-dropdown__option__content,
-.privacy-dropdown__option:hover .privacy-dropdown__option__content strong,
-.actions-modal ul li:not(:empty) a.active,
-.actions-modal ul li:not(:empty) a.active button,
-.actions-modal ul li:not(:empty) a:active,
-.actions-modal ul li:not(:empty) a:active button,
-.actions-modal ul li:not(:empty) a:focus,
-.actions-modal ul li:not(:empty) a:focus button,
-.actions-modal ul li:not(:empty) a:hover,
-.actions-modal ul li:not(:empty) a:hover button,
-.simple_form .block-button,
-.simple_form .button,
-.simple_form button {
-  color: #ffffff;
-}
-
-.dropdown-menu__separator {
-  border-bottom-color: var(--brand-color-med);
-}
-
-// Change the background colors of modals
-.actions-modal,
-.boost-modal,
-.confirmation-modal,
-.mute-modal,
-.report-modal,
-.error-modal,
-.onboarding-modal {
-  background: var(--brand-color-med);
-}
-
-.embed-modal {
-  background: #333;
-  color: #fff;
-}
-
-.boost-modal__action-bar,
-.confirmation-modal__action-bar,
-.mute-modal__action-bar,
-.onboarding-modal__paginator,
-.error-modal__footer {
-  background: darken($ui-base-color, 6%);
-
-  .onboarding-modal__nav,
-  .error-modal__nav {
-    &:hover,
-    &:focus,
-    &:active {
-      background-color: darken($ui-base-color, 12%);
-    }
-  }
-}
-
-.display-case__case {
-  background: #ffffff;
-}
-
-.embed-modal .embed-modal__container .embed-modal__html {
-  background: #ffffff;
-
-  &:focus {
-    background: darken($ui-base-color, 6%);
-  }
-}
-
-.react-toggle-track {
-  background: $ui-secondary-color;
-}
-
-.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
-  background: darken($ui-secondary-color, 10%);
-}
-
-.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
-  background: lighten($gab-brand-default, 10%);
-}
-
-// Change the default color used for the text in an empty column or on the error column
-.empty-column-indicator,
-.error-column {
-  color: var(--primary-text-color);
-  background: #ffffff;
-}
-
-// Change the default colors used on some parts of the profile pages
-.activity-stream-tabs {
-  background: $account-background-color;
-  border-bottom-color: var(--brand-color-med);
-}
-
-.activity-stream {
-  .entry {
-    background: $account-background-color;
-
-    .detailed-status.light,
-    .more.light,
-    .status.light {
-      border-bottom-color: var(--brand-color-med);
-    }
-  }
-
-  .status.light {
-    .status__content {
-      color: var(--primary-text-color);
-    }
-
-    .display-name {
-      strong {
-        color: var(--primary-text-color);
-      }
-    }
-  }
-}
-
-.accounts-grid {
-  .account-grid-card {
-
-    .name {
-      a {
-        color: var(--primary-text-color);
-      }
-    }
-
-    .username {
-      color: $darker-text-color;
-    }
-
-    .account__header__content {
-      color: var(--primary-text-color);
-    }
-  }
-}
-
-.simple_form,
-.table-form {
-  .warning {
-    box-shadow: none;
-    background: rgba($error-red, 0.5);
-    text-shadow: none;
-  }
-}
-
-.simple_form input[type="text"],
-.simple_form input[type="number"],
-.simple_form input[type="email"],
-.simple_form input[type="password"],
-.simple_form textarea {
-  border-color: var(--brand-color);
-
-  &:hover {
-    border-color: var(--brand-color);
-  }
-}
-
-.simple_form select,
-.admin select.dropdown {
-  border-color: $gab-secondary-text;
-}
-
-.button.logo-button {
-  color: #ffffff;
-
-  svg {
-    fill: #ffffff;
-  }
-}
-
-.public-layout {
-  .header,
-  .public-account-header,
-  .public-account-bio {
-    box-shadow: none;
-  }
-
-  .public-account-header {
-    &__image {
-      background: var(--brand-color-med);
-
-      &::after {
-        box-shadow: none;
-      }
-    }
-
-    &__tabs {
-      &__name {
-        h1,
-        h1 small {
-          color: #ffffff;
-        }
-      }
-    }
-  }
-}
-
-.account__section-headline a.active::after {
-  border-color: transparent transparent #ffffff;
-}
-
-.hero-widget,
-.box-widget,
-.contact-widget,
-.landing-page__information.contact-widget,
-.moved-account-widget,
-.memoriam-widget,
-.activity-stream,
-.nothing-here,
-.directory__tag > a,
-.directory__tag > div {
-  box-shadow: none;
-}
-
-.btngroup__btn--active {
-  color: #fff;
-}
-
-.promo-panel-item {
-  @include light-theme-shadow;
-  background: $gab-background-container-light;
-}
-
-.column-header {
-  background: $gab-background-container-light;
-  color: $gab-default-text-light;
-}
-
-.column-header__button {
-  color: $gab-default-text-light;
-  background: $gab-background-container-light;
-}
-
-.column-header__collapsible-inner {
-  background: #e6e6e6;
-}
-
-.wtf-panel {
-  @include light-theme-shadow;
-  background: $gab-background-container-light;
-}
-
-.profile-info-panel .profile-info-panel-content span,
-.profile-info-panel .profile-info-panel-content__name h1,
-.profile-info-panel .profile-info-panel-content__name h1 span:first-of-type {
-  color: $gab-default-text-light;
-}
-
-.group-card .group-card__header img {
-  background: $gab-background-container-light;
-}
-
-.group .group__header {
-  background: $gab-background-container-light;
-}
-
-.group .group__panel .group__panel__label {
-  background: $gab-background-container-light;
-}
-
-.group .group__feed {
-  background: $gab-background-container-light;
-}
-
-input[type='text'],
-textarea {
-  &.standard {
-    @include input-placeholder($gab-secondary-text);
-    color: $gab-placeholder-accent;
-    border-color: $gab-secondary-text;
-    background: $gab-background-base-light;
-  }
-}
-
-
-.boost-modal,
-.confirmation-modal,
-.report-modal,
-.actions-modal,
-.mute-modal {
-  color: $gab-default-text-light;
-}
-
-.report-modal__statuses {
-  .status__content,
-  .status__content p {
-    color: $gab-default-text-light;
-  }
-}
-
-.user-panel__header {
-  background: darken($gab-background-container-light, 4%);
-}
-
-.user-panel__profile .account__avatar {
-  border: 6px solid $gab-background-base-light;
-}
-
-.user-panel__account__name {
-  color: $gab-default-text-light;
-}
-
-.user-panel .user-panel-stats-item__value {
-  color: $gab-default-text-light;
-}
-
-.poll__text {
-  color: $gab-default-text-light;
-}
-
-.fa-site-icon::before {
-  filter: grayscale(100%) invert(0);
-}
+// // Notes!
+// // Sass color functions, "darken" and "lighten" are automatically replaced.
+//
+// // Change the colors of button texts
+// .button {
+//   color: #ffffff;
+//
+//   &.button-alternative-2 {
+//     color: #000;
+//   }
+// }
+//
+// .drawer__inner {
+//   background: var(--brand-color-med);
+// }
+//
+// .drawer__inner__soapbox {
+//   background: var(--brand-color-med) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color(#ffffff)}"/></svg>') no-repeat bottom / 100% auto;
+// }
+//
+// // Change the colors used in compose-form
+// .compose-form {
+//   .compose-form__modifiers {
+//     .compose-form__upload-description input {
+//       color: lighten(#ffffff, 7%);
+//       &::placeholder {color: lighten(#ffffff, 7%);}
+//     }
+//   }
+//
+//   .autosuggest-textarea__suggestions {
+//     background: darken($ui-base-color, 6%);
+//   }
+//
+//   .autosuggest-textarea__suggestions__item {
+//     &:hover,
+//     &:focus,
+//     &:active,
+//     &.selected {
+//       background: var(--brand-color-faint);
+//     }
+//   }
+// }
+//
+// .emoji-mart-bar {
+//   border-color: var(--brand-color-faint);
+//
+//   &:first-child {
+//     background: darken($ui-base-color, 6%);
+//   }
+// }
+//
+// .emoji-mart-search input {
+//   background: rgba($ui-base-color, 0.3);
+//   border-color: var(--brand-color-med);
+// }
+//
+// // Change the background colors of statuses
+// .focusable:focus {
+//   background: var(--brand-color-faint);
+// }
+//
+// .status.status-direct {
+//   background: var(--brand-color-faint);
+// }
+//
+// .focusable:focus .status.status-direct {
+//   background: var(--brand-color-med);
+// }
+//
+// // Change the background colors of status__content__spoiler-link
+// .reply-indicator__content .status__content__spoiler-link,
+// .status__content .status__content__spoiler-link {
+//   background: $ui-base-lighter-color;
+//
+//   &:hover {
+//     background: lighten($ui-base-lighter-color, 6%);
+//   }
+// }
+//
+// // Change the background colors of media and video spoilers
+// .media-spoiler,
+// .video-player__spoiler {
+//   background: var(--brand-color-med);
+// }
+//
+// // Change the colors used in the dropdown menu
+// .dropdown-menu {
+//   &__item {
+//     a {
+//       color: var(--primary-color-faint);
+//     }
+//   }
+// }
+//
+// // Change the text colors on inverted background
+// .privacy-dropdown__option.active .privacy-dropdown__option__content,
+// .privacy-dropdown__option.active .privacy-dropdown__option__content strong,
+// .privacy-dropdown__option:hover .privacy-dropdown__option__content,
+// .privacy-dropdown__option:hover .privacy-dropdown__option__content strong,
+// .actions-modal ul li:not(:empty) a.active,
+// .actions-modal ul li:not(:empty) a.active button,
+// .actions-modal ul li:not(:empty) a:active,
+// .actions-modal ul li:not(:empty) a:active button,
+// .actions-modal ul li:not(:empty) a:focus,
+// .actions-modal ul li:not(:empty) a:focus button,
+// .actions-modal ul li:not(:empty) a:hover,
+// .actions-modal ul li:not(:empty) a:hover button,
+// .simple_form .block-button,
+// .simple_form .button,
+// .simple_form button {
+//   color: #ffffff;
+// }
+//
+// .dropdown-menu__separator {
+//   border-bottom-color: var(--brand-color-med);
+// }
+//
+// // Change the background colors of modals
+// .actions-modal,
+// .boost-modal,
+// .confirmation-modal,
+// .mute-modal,
+// .report-modal,
+// .error-modal,
+// .onboarding-modal {
+//   background: var(--brand-color-med);
+// }
+//
+// .embed-modal {
+//   background: #333;
+//   color: #fff;
+// }
+//
+// .boost-modal__action-bar,
+// .confirmation-modal__action-bar,
+// .mute-modal__action-bar,
+// .onboarding-modal__paginator,
+// .error-modal__footer {
+//   background: darken($ui-base-color, 6%);
+//
+//   .onboarding-modal__nav,
+//   .error-modal__nav {
+//     &:hover,
+//     &:focus,
+//     &:active {
+//       background-color: darken($ui-base-color, 12%);
+//     }
+//   }
+// }
+//
+// .display-case__case {
+//   background: #ffffff;
+// }
+//
+// .embed-modal .embed-modal__container .embed-modal__html {
+//   background: #ffffff;
+//
+//   &:focus {
+//     background: darken($ui-base-color, 6%);
+//   }
+// }
+//
+// .react-toggle-track {
+//   background: $ui-secondary-color;
+// }
+//
+// .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
+//   background: darken($ui-secondary-color, 10%);
+// }
+//
+// .react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
+//   background: lighten($gab-brand-default, 10%);
+// }
+//
+// // Change the default color used for the text in an empty column or on the error column
+// .empty-column-indicator,
+// .error-column {
+//   color: var(--primary-text-color);
+//   background: #ffffff;
+// }
+//
+// // Change the default colors used on some parts of the profile pages
+// .activity-stream-tabs {
+//   background: $account-background-color;
+//   border-bottom-color: var(--brand-color-med);
+// }
+//
+// .activity-stream {
+//   .entry {
+//     background: $account-background-color;
+//
+//     .detailed-status.light,
+//     .more.light,
+//     .status.light {
+//       border-bottom-color: var(--brand-color-med);
+//     }
+//   }
+//
+//   .status.light {
+//     .status__content {
+//       color: var(--primary-text-color);
+//     }
+//
+//     .display-name {
+//       strong {
+//         color: var(--primary-text-color);
+//       }
+//     }
+//   }
+// }
+//
+// .accounts-grid {
+//   .account-grid-card {
+//
+//     .name {
+//       a {
+//         color: var(--primary-text-color);
+//       }
+//     }
+//
+//     .username {
+//       color: var(--primary-color-faint);
+//     }
+//
+//     .account__header__content {
+//       color: var(--primary-text-color);
+//     }
+//   }
+// }
+//
+// .simple_form,
+// .table-form {
+//   .warning {
+//     box-shadow: none;
+//     background: rgba($error-red, 0.5);
+//     text-shadow: none;
+//   }
+// }
+//
+// .simple_form input[type="text"],
+// .simple_form input[type="number"],
+// .simple_form input[type="email"],
+// .simple_form input[type="password"],
+// .simple_form textarea {
+//   border-color: var(--brand-color);
+//
+//   &:hover {
+//     border-color: var(--brand-color);
+//   }
+// }
+//
+// .simple_form select,
+// .admin select.dropdown {
+//   border-color: var(--primary-color-faint);
+// }
+//
+// .button.logo-button {
+//   color: #ffffff;
+//
+//   svg {
+//     fill: #ffffff;
+//   }
+// }
+//
+// .public-layout {
+//   .header,
+//   .public-account-header,
+//   .public-account-bio {
+//     box-shadow: none;
+//   }
+//
+//   .public-account-header {
+//     &__image {
+//       background: var(--brand-color-med);
+//
+//       &::after {
+//         box-shadow: none;
+//       }
+//     }
+//
+//     &__tabs {
+//       &__name {
+//         h1,
+//         h1 small {
+//           color: #ffffff;
+//         }
+//       }
+//     }
+//   }
+// }
+//
+// .account__section-headline a.active::after {
+//   border-color: transparent transparent #ffffff;
+// }
+//
+// .hero-widget,
+// .box-widget,
+// .contact-widget,
+// .landing-page__information.contact-widget,
+// .moved-account-widget,
+// .memoriam-widget,
+// .activity-stream,
+// .nothing-here,
+// .directory__tag > a,
+// .directory__tag > div {
+//   box-shadow: none;
+// }
+//
+// .btngroup__btn--active {
+//   color: #fff;
+// }
+//
+// .wtf-panel {
+//   @include light-theme-shadow;
+//   background: var(--foreground-color);
+// }
+//
+// .profile-info-panel .profile-info-panel-content span,
+// .profile-info-panel .profile-info-panel-content__name h1,
+// .profile-info-panel .profile-info-panel-content__name h1 span:first-of-type {
+//   color: $gab-default-text-light;
+// }
+//
+// .group-card .group-card__header img {
+//   background: var(--foreground-color);
+// }
+//
+// .group .group__header {
+//   background: var(--foreground-color);
+// }
+//
+// .group .group__panel .group__panel__label {
+//   background: var(--foreground-color);
+// }
+//
+// .group .group__feed {
+//   background: var(--foreground-color);
+// }
+//
+// input[type='text'],
+// textarea {
+//   &.standard {
+//     @include input-placeholder($gab-secondary-text);
+//     color: $gab-placeholder-accent;
+//     border-color: var(--primary-color-faint);
+//     background: $gab-background-base-light;
+//   }
+// }
+//
+//
+// .boost-modal,
+// .confirmation-modal,
+// .report-modal,
+// .actions-modal,
+// .mute-modal {
+//   color: $gab-default-text-light;
+// }
+//
+// .report-modal__statuses {
+//   .status__content,
+//   .status__content p {
+//     color: $gab-default-text-light;
+//   }
+// }
+//
+// .user-panel__header {
+//   background: darken($gab-background-container-light, 4%);
+// }
+//
+// .user-panel__profile .account__avatar {
+//   border: 6px solid $gab-background-base-light;
+// }
+//
+// .user-panel .user-panel-stats-item__value {
+//   color: $gab-default-text-light;
+// }
+//
+// .poll__text {
+//   color: $gab-default-text-light;
+// }
+//
+// .fa-site-icon::before {
+//   filter: grayscale(100%) invert(0);
+// }
diff --git a/app/styles/soapbox/_mixins.scss b/app/styles/soapbox/_mixins.scss
index ef5a1f7b5..aceaae121 100644
--- a/app/styles/soapbox/_mixins.scss
+++ b/app/styles/soapbox/_mixins.scss
@@ -1,19 +1,15 @@
-// NEW GAB SPECIFIC MIXINS
-
 // THEME MIXINS
 
 // standard container drop shadow
-@mixin light-theme-shadow {box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);}
+@mixin light-theme-shadow {
+  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
+}
 
 // common properties for all standard containers
 @mixin gab-container-standards {
+  @include light-theme-shadow;
   border-radius: 10px;
-  background: $gab-background-container;
-  $light-theme: false !default;
-  @if $light-theme {
-    @include light-theme-shadow;
-    background: $gab-background-container-light;
-  }
+  background: var(--foreground-color);
 }
 
 // SHORTCUTS
@@ -24,7 +20,6 @@
   &:-moz-placeholder {color: $color;}
 }
 
-// OLDER MIXINS
 @mixin avatar-radius {
   border-radius: 50%;
   background: transparent no-repeat;
@@ -77,7 +72,7 @@
   border: 1px solid $gab-placeholder-accent;
   padding: 8px 10px 17px;
   margin: 4px 0 0;
-  color: $gab-secondary-text;
+  color: var(--primary-color-faint);
   box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
 
   h4 {
diff --git a/app/styles/soapbox/about.scss b/app/styles/soapbox/about.scss
index 6e081bc0f..e24368a53 100644
--- a/app/styles/soapbox/about.scss
+++ b/app/styles/soapbox/about.scss
@@ -21,7 +21,7 @@ $small-breakpoint: 960px;
   font-weight: 400;
   font-size: 16px;
   line-height: 30px;
-  color: $darker-text-color;
+  color: var(--primary-color-faint);
   max-width: 600px;
   padding: 15px 30px;
 
@@ -47,7 +47,7 @@ $small-breakpoint: 960px;
     font-weight: 400;
     font-size: 16px;
     line-height: 30px;
-    color: $darker-text-color;
+    color: var(--primary-color-faint);
 
     a {
       color: var(--highlight-text-color);
@@ -72,7 +72,7 @@ $small-breakpoint: 960px;
     margin-top: 2em;
     margin-bottom: 1.25em;
     font-weight: 500;
-    color: $secondary-text-color;
+    color: var(--primary-text-color-faint);
   }
 
   hr + {
@@ -200,7 +200,7 @@ $small-breakpoint: 960px;
 
     span {
       &:last-child {
-        color: $secondary-text-color;
+        color: var(--primary-text-color-faint);
       }
     }
 
@@ -232,7 +232,7 @@ $small-breakpoint: 960px;
       font-size: 14px;
       line-height: 24px;
       font-weight: 500;
-      color: $darker-text-color;
+      color: var(--primary-color-faint);
       padding-bottom: 5px;
       margin-bottom: 15px;
       border-bottom: 1px solid var(--brand-color-faint);
@@ -286,7 +286,7 @@ $small-breakpoint: 960px;
 
       .username {
         display: block;
-        color: $darker-text-color;
+        color: var(--primary-color-faint);
       }
     }
   }
@@ -301,7 +301,7 @@ $small-breakpoint: 960px;
     font-size: 16px;
     line-height: 30px;
     margin-bottom: 12px;
-    color: $darker-text-color;
+    color: var(--primary-color-faint);
 
     a {
       color: var(--highlight-text-color);
@@ -327,7 +327,7 @@ $small-breakpoint: 960px;
     line-height: 30px;
     font-weight: 500;
     margin-bottom: 20px;
-    color: $secondary-text-color;
+    color: var(--primary-text-color-faint);
 
     small {
       font-family: $font-sans-serif, sans-serif;
@@ -344,7 +344,7 @@ $small-breakpoint: 960px;
     line-height: 26px;
     font-weight: 500;
     margin-bottom: 20px;
-    color: $secondary-text-color;
+    color: var(--primary-text-color-faint);
   }
 
   h3 {
@@ -353,7 +353,7 @@ $small-breakpoint: 960px;
     line-height: 24px;
     font-weight: 500;
     margin-bottom: 20px;
-    color: $secondary-text-color;
+    color: var(--primary-text-color-faint);
   }
 
   h4 {
@@ -362,7 +362,7 @@ $small-breakpoint: 960px;
     line-height: 24px;
     font-weight: 500;
     margin-bottom: 20px;
-    color: $secondary-text-color;
+    color: var(--primary-text-color-faint);
   }
 
   h5 {
@@ -371,7 +371,7 @@ $small-breakpoint: 960px;
     line-height: 24px;
     font-weight: 500;
     margin-bottom: 20px;
-    color: $secondary-text-color;
+    color: var(--primary-text-color-faint);
   }
 
   h6 {
@@ -380,7 +380,7 @@ $small-breakpoint: 960px;
     line-height: 24px;
     font-weight: 500;
     margin-bottom: 20px;
-    color: $secondary-text-color;
+    color: var(--primary-text-color-faint);
   }
 
   ul,
@@ -581,7 +581,7 @@ $small-breakpoint: 960px;
     }
 
     p a {
-      color: $secondary-text-color;
+      color: var(--primary-text-color-faint);
     }
 
     h1 {
@@ -590,10 +590,10 @@ $small-breakpoint: 960px;
       margin-bottom: 0;
 
       small {
-        color: $darker-text-color;
+        color: var(--primary-color-faint);
 
         span {
-          color: $secondary-text-color;
+          color: var(--primary-text-color-faint);
         }
       }
     }
@@ -812,7 +812,7 @@ $small-breakpoint: 960px;
       text-transform: uppercase;
       font-weight: 700;
       font-size: 13px;
-      color: $darker-text-color;
+      color: var(--primary-color-faint);
     }
 
     &__text {
@@ -859,18 +859,18 @@ $small-breakpoint: 960px;
 
       span {
         font-size: 14px;
-        color: $darker-text-color;
+        color: var(--primary-color-faint);
       }
     }
   }
 
   .simple_form .user_agreement .label_input > label {
     font-weight: 400;
-    color: $darker-text-color;
+    color: var(--primary-color-faint);
   }
 
   .simple_form p.lead {
-    color: $darker-text-color;
+    color: var(--primary-color-faint);
     font-size: 15px;
     line-height: 20px;
     font-weight: 400;
diff --git a/app/styles/soapbox/accounts.scss b/app/styles/soapbox/accounts.scss
index 8b70a4678..b7d130979 100644
--- a/app/styles/soapbox/accounts.scss
+++ b/app/styles/soapbox/accounts.scss
@@ -87,7 +87,7 @@
       span {
         display: block;
         font-size: 14px;
-        color: $gab-secondary-text;
+        color: var(--primary-color-faint);
         font-weight: 400;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -130,7 +130,7 @@
   .older,
   .newer {
     text-transform: uppercase;
-    color: $secondary-text-color;
+    color: var(--primary-text-color-faint);
   }
 
   .older {
@@ -175,7 +175,7 @@
 .nothing-here {
   background: var(--brand-color-med);
   box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
-  color: $gab-secondary-text;
+  color: var(--primary-color-faint);
   font-size: 14px;
   font-weight: 500;
   text-align: center;
@@ -251,13 +251,13 @@
     font-weight: 500;
     width: 120px;
     flex: 0 0 auto;
-    color: $secondary-text-color;
+    color: var(--primary-text-color-faint);
     background: rgba(darken($ui-base-color, 8%), 0.5);
   }
 
   dd {
     flex: 1 1 auto;
-    color: $darker-text-color;
+    color: var(--primary-color-faint);
   }
 
   a {
@@ -296,7 +296,7 @@
 
 .pending-account {
   &__header {
-    color: $darker-text-color;
+    color: var(--primary-color-faint);
 
     a {
       color: $ui-secondary-color;
diff --git a/app/styles/soapbox/basics.scss b/app/styles/soapbox/basics.scss
index 83731fe6c..454b35d79 100644
--- a/app/styles/soapbox/basics.scss
+++ b/app/styles/soapbox/basics.scss
@@ -23,8 +23,8 @@ body {
   font-feature-settings: "kern";
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   -webkit-tap-highlight-color: transparent;
-  color: #fff;
-  background-color: $gab-background-base;
+  color: var(--primary-text-color);
+  background-color: var(--background-color);
 
   &.system-font {
     // system-ui => standard property (Chrome/Android WebView 56+, Opera 43+, Safari 11+)
@@ -95,7 +95,7 @@ body {
   &.error {
     position: absolute;
     text-align: center;
-    color: $darker-text-color;
+    color: var(--primary-color-faint);
     background: var(--brand-color-med);
     width: 100%;
     height: 100%;
diff --git a/app/styles/soapbox/compact_header.scss b/app/styles/soapbox/compact_header.scss
index 4980ab5f1..5357ced5c 100644
--- a/app/styles/soapbox/compact_header.scss
+++ b/app/styles/soapbox/compact_header.scss
@@ -2,7 +2,7 @@
   h1 {
     font-size: 24px;
     line-height: 28px;
-    color: $darker-text-color;
+    color: var(--primary-color-faint);
     font-weight: 500;
     margin-bottom: 20px;
     padding: 0 10px;
@@ -20,7 +20,7 @@
 
     small {
       font-weight: 400;
-      color: $secondary-text-color;
+      color: var(--primary-text-color-faint);
     }
 
     img {
diff --git a/app/styles/soapbox/components.scss b/app/styles/soapbox/components.scss
index 9b289b1a1..4685e4cd4 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: var(--primary-text-color);
+  color: #fff;
   cursor: pointer;
   display: inline-block;
   font-family: inherit;
@@ -89,7 +89,7 @@
   }
 
   &.button-secondary {
-    color: $darker-text-color;
+    color: var(--primary-color-faint);
     background: transparent;
     padding: 3px 15px;
     border: 1px solid $ui-primary-color;
@@ -121,7 +121,7 @@
 .icon-button {
   display: inline-block;
   padding: 0;
-  color: $gab-secondary-text;
+  color: var(--primary-color-faint);
   border: 0;
   background: transparent;
   cursor: pointer;
@@ -158,7 +158,7 @@
   }
 
   &.inverted {
-    color: $gab-secondary-text;
+    color: var(--primary-color-faint);
 
     &:hover,
     &:active,
@@ -181,19 +181,19 @@
 
   &.overlayed {
     box-sizing: content-box;
-    background: rgba($base-overlay-background, 0.6);
+    background: var(--foreground-color);
     color: var(--primary-text-color-faint);
     border-radius: 4px;
     padding: 2px;
 
     &:hover {
-      background: rgba($base-overlay-background, 0.9);
+      background: var(--background-color);
     }
   }
 }
 
 .text-icon-button {
-  color: $gab-secondary-text;
+  color: var(--primary-color-faint);
   border: 0;
   background: transparent;
   cursor: pointer;
@@ -561,11 +561,11 @@
 
   &.light {
     .status__relative-time {
-      color: $light-text-color;
+      color: var(--primary-text-color-faint);
     }
 
     .status__display-name {
-      color: $inverted-text-color;
+      color: var(--primary-text-color-faint);
     }
 
     .display-name {
@@ -598,7 +598,7 @@
 
   &__meta {
     font-size: 14px;
-    color: $gab-secondary-text;
+    color: var(--primary-color-faint);
 
     a {
       color: var(--brand-color);
@@ -624,13 +624,13 @@
 
 .status__relative-time,
 .notification__relative_time {
-  color: $dark-text-color;
+  color: var(--primary-text-color-faint);
   float: right;
   font-size: 14px;
 }
 
 .status__display-name {
-  color: $dark-text-color;
+  color: var(--primary-text-color-faint);
 }
 
 .status__info .status__display-name {
@@ -786,7 +786,7 @@
   .account__display-name {
     flex: 1 1 auto;
     display: block;
-    color: $darker-text-color;
+    color: var(--primary-color-faint);
     overflow: hidden;
     text-decoration: none;
     font-size: 14px;
@@ -862,7 +862,7 @@ a .account__avatar {
 
 .account__reciprocal_follow_message {
   padding: 0 5px;
-  color: $gab-secondary-text;
+  color: var(--primary-color-faint);
   text-align: center;
 }
 
@@ -948,7 +948,7 @@ a .account__avatar {
     display: block;
     text-transform: uppercase;
     font-size: 11px;
-    color: $darker-text-color;
+    color: var(--primary-color-faint);
   }
 
   strong {
@@ -1023,7 +1023,7 @@ a.account__display-name {
 }
 
 .detailed-status__display-name {
-  color: $secondary-text-color;
+  color: var(--primary-text-color-faint);
   display: flex;
   line-height: 24px;
   margin-bottom: 15px;
@@ -1098,7 +1098,7 @@ a.account__display-name {
   margin: 0 10px 0 68px;
   padding: 8px 0 0;
   cursor: default;
-  color: $gab-secondary-text;
+  color: var(--primary-color-faint);
   font-size: 15px;
   line-height: 22px;
   position: relative;
@@ -1223,10 +1223,10 @@ a.account__display-name {
   align-items: center;
   flex-shrink: 0;
   cursor: default;
-  color: $darker-text-color;
+  color: var(--primary-color-faint);
 
   strong {
-    color: $secondary-text-color;
+    color: var(--primary-text-color-faint);
   }
 
   a {
@@ -1346,11 +1346,6 @@ a.account__display-name {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-
-  article {
-    // TEMPORARY - content of columns may be significantly altered
-    background: $gab-background-container;
-  }
 }
 
 .ui {
@@ -1368,7 +1363,7 @@ a.account__display-name {
     width: 100%;
     height: auto;
     z-index: 105;
-    background: $gab-background-container-light;
+    background: var(--foreground-color);
 
     @media (min-width: 895px) {
       top: -290px;
@@ -1397,7 +1392,7 @@ a.account__display-name {
   display: block;
   flex: 1 1 auto;
   padding: 15px 5px 13px;
-  color: $darker-text-color;
+  color: var(--primary-color-faint);
   text-decoration: none;
   text-align: center;
   font-size: 16px;
@@ -1462,6 +1457,7 @@ a.account__display-name {
     height: 100%;
     padding: 0;
   }
+
   .autosuggest-textarea__textarea {font-size: 16px;}
 
   .search__input {
@@ -1647,11 +1643,12 @@ a.account__display-name {
 }
 
 .promo-panel-item {
+  @include light-theme-shadow;
   display: block;
   height: 42px;
   line-height: 42px;
   border-bottom: 1px solid var(--brand-color-med);
-  background: $gab-background-container;
+  background: var(--foreground-color);
 
   &--highlighted {
     background-color: #30ce7d;
@@ -2017,13 +2014,13 @@ a.account__display-name {
 }
 
 .getting-started {
-  color: $dark-text-color;
   overflow: auto;
 
   &__footer {
     flex: 0 0 auto;
     padding: 10px;
     padding-top: 20px;
+    opacity: 0.7;
 
     ul {
       margin-bottom: 10px;
@@ -2034,19 +2031,21 @@ a.account__display-name {
     }
 
     p {
-      color: $dark-text-color;
+      color: var(--primary-text-color);
       font-size: 13px;
       margin-bottom: 20px;
 
       a {
-        color: $gab-secondary-text;
+        color: var(--primary-text-color-faint);
         text-decoration: underline;
+        opacity: 0.8;
       }
     }
 
     a {
       text-decoration: none;
-      color: $gab-secondary-text;
+      color: var(--primary-text-color-faint);
+      opacity: 0.8;
 
       &:hover,
       &:focus,
@@ -2079,7 +2078,7 @@ a.account__display-name {
 }
 
 .setting-text {
-  color: $darker-text-color;
+  color: var(--primary-color-faint);
   background: transparent;
   border: 0;
   border-bottom: 2px solid $ui-primary-color;
@@ -2162,7 +2161,7 @@ a.account__display-name {
     button,
     a {
       display: inline;
-      color: $secondary-text-color;
+      color: var(--primary-text-color-faint);
       background: transparent;
       border: 0;
       padding: 0 8px;
@@ -2213,7 +2212,7 @@ a.status-card {
   display: block;
   font-weight: 500;
   margin-bottom: 5px;
-  color: $darker-text-color;
+  color: var(--primary-color-faint);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -2227,7 +2226,7 @@ a.status-card {
 }
 
 .status-card__description {
-  color: $darker-text-color;
+  color: var(--primary-color-faint);
 }
 
 .status-card__host {
@@ -2391,7 +2390,9 @@ a.status-card.compact:hover {
   }
 }
 
-.columns-area--mobile .column {@include gab-container-standards;}
+.columns-area--mobile .column {
+  @include gab-container-standards;
+}
 
 .column-header__wrapper {
   position: relative;
@@ -2419,7 +2420,6 @@ a.status-card.compact:hover {
 .column-header {
   display: flex;
   font-size: 16px;
-  background: $gab-background-container;
   flex: 0 0 auto;
   cursor: pointer;
   position: relative;
@@ -2503,8 +2503,11 @@ a.status-card.compact:hover {
   padding: 0 15px;
   font-size: 16px;
   color: #fff;
-  background: $gab-background-container;
-  &:hover {color: lighten($darker-text-color, 7%);}
+  background: transparent;
+
+  &:hover {
+    color: lighten($darker-text-color, 7%);
+  }
 
   &.active {
     color: var(--primary-text-color);
@@ -2521,7 +2524,7 @@ a.status-card.compact:hover {
   max-height: 70vh;
   overflow: hidden;
   overflow-y: auto;
-  color: $darker-text-color;
+  color: var(--primary-color-faint);
   transition: max-height 150ms ease-in-out, opacity 300ms linear;
   opacity: 1;
 
@@ -2558,7 +2561,7 @@ a.status-card.compact:hover {
   }
 
   &:hover {
-    color: $darker-text-color;
+    color: var(--primary-color-faint);
     text-decoration: underline;
   }
 }
@@ -2676,7 +2679,7 @@ a.status-card.compact:hover {
 
 .video-error-cover {
   align-items: center;
-  background: $base-overlay-background;
+  background: var(--background-color);
   color: var(--primary-text-color);
   cursor: pointer;
   display: flex;
@@ -2690,8 +2693,8 @@ a.status-card.compact:hover {
 }
 
 .media-spoiler {
-  background: $base-overlay-background;
-  color: $darker-text-color;
+  background: var(--background-color);
+  color: var(--primary-color-faint);
   border: 0;
   padding: 0;
   width: 100%;
@@ -2790,7 +2793,7 @@ a.status-card.compact:hover {
 }
 
 .column-settings__section {
-  color: $darker-text-color;
+  color: var(--primary-color-faint);
   cursor: default;
   display: block;
   font-weight: 500;
@@ -2834,7 +2837,7 @@ a.status-card.compact:hover {
 
     &__multi-value__label,
     &__input {
-      color: $darker-text-color;
+      color: var(--primary-color-faint);
     }
 
     &__clear-indicator,
@@ -2888,7 +2891,7 @@ a.status-card.compact:hover {
   margin-bottom: 4px;
   display: block;
   vertical-align: top;
-  background-color: $base-overlay-background;
+  background-color: var(--background-color);
   text-transform: uppercase;
   font-size: 11px;
   font-weight: 500;
@@ -2907,7 +2910,7 @@ a.status-card.compact:hover {
 }
 
 .setting-toggle__label {
-  color: $darker-text-color;
+  color: var(--primary-color-faint);
   display: inline-block;
   margin-bottom: 14px;
   margin-left: 8px;
@@ -3124,7 +3127,7 @@ a.status-card.compact:hover {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: $secondary-text-color;
+  color: var(--primary-text-color-faint);
   font-size: 18px;
   font-weight: 500;
   border: 2px dashed var(--brand-color-med);
@@ -3399,7 +3402,7 @@ a.status-card.compact:hover {
 .search-results__hashtag {
   display: block;
   padding: 10px;
-  color: $secondary-text-color;
+  color: var(--primary-text-color-faint);
   text-decoration: none;
 
   &:hover,
@@ -3545,7 +3548,7 @@ a.status-card.compact:hover {
   cursor: zoom-in;
   display: block;
   text-decoration: none;
-  color: $secondary-text-color;
+  color: var(--primary-text-color-faint);
   line-height: 0;
   position: relative;
   z-index: 1;
@@ -3567,7 +3570,7 @@ a.status-card.compact:hover {
       content: 'GIF';
       position: absolute;
       color: var(--primary-text-color);
-      background: rgba($base-overlay-background, 0.5);
+      background: var(--foreground-color);
       bottom: 6px;
       left: 6px;
       padding: 2px 6px;
@@ -3603,7 +3606,7 @@ a.status-card.compact:hover {
   top: 0;
   left: 0;
   z-index: 0;
-  background: $base-overlay-background;
+  background: var(--background-color);
 
   &--hidden {
     display: none;
@@ -3638,7 +3641,7 @@ a.status-card.compact:hover {
 
 /* Status Video Player */
 .status__video-player {
-  background: $base-overlay-background;
+  background: var(--background-color);
   box-sizing: border-box;
   cursor: default; /* May not be needed */
   margin-top: 8px;
@@ -3774,8 +3777,8 @@ a.status-card.compact:hover {
     height: 100%;
     z-index: 4;
     border: 0;
-    background: $base-overlay-background;
-    color: $darker-text-color;
+    background: var(--background-color);
+    color: var(--primary-color-faint);
     transition: none;
     pointer-events: none;
 
@@ -4058,7 +4061,7 @@ a.status-card.compact:hover {
   a {
     display: block;
     flex: 1 1 auto;
-    color: $secondary-text-color;
+    color: var(--primary-text-color-faint);
     padding: 15px 0;
     font-size: 14px;
     font-weight: 500;
@@ -4127,7 +4130,7 @@ noscript {
   div {
     font-size: 14px;
     margin: 30px auto;
-    color: $secondary-text-color;
+    color: var(--primary-text-color-faint);
     max-width: 400px;
 
     a {
@@ -4530,7 +4533,7 @@ noscript {
 }
 
 .account__header__content {
-  color: $darker-text-color;
+  color: var(--primary-color-faint);
   font-size: 14px;
   font-weight: 400;
   overflow: hidden;
@@ -4594,7 +4597,7 @@ noscript {
       }
 
       a {
-        color: $darker-text-color;
+        color: var(--primary-color-faint);
         text-decoration: none;
         font-size: 14px;
         font-weight: 500;
@@ -4620,7 +4623,7 @@ noscript {
       line-height: 36px;
       font-weight: 500;
       text-align: center;
-      color: $secondary-text-color;
+      color: var(--primary-text-color-faint);
     }
 
     &__sparkline {
@@ -4724,7 +4727,7 @@ noscript {
   &__subtitle {
     display: block;
     padding: 0 15px;
-    color: $secondary-text-color;
+    color: var(--primary-text-color-faint);
   }
 
   &__form {
@@ -4798,7 +4801,7 @@ noscript {
     padding-top: 6px;
 
     &__button {
-    display: flex;
+      display: flex;
     }
 
     &__icon {
@@ -4991,7 +4994,7 @@ noscript {
         span:first-of-type {
           font-size: 20px !important;
           line-height: 1.25;
-          color: #ffffff;
+          color: var(--primary-text-color);
           font-weight: 600 !important;
           max-width: 260px;
         }
@@ -5000,7 +5003,7 @@ noscript {
           display: block;
           font-size: 16px;
           line-height: 1.5;
-          color: $secondary-text-color;
+          color: var(--primary-text-color-faint);
           font-weight: 400;
           overflow: hidden;
           text-overflow: ellipsis;
@@ -5101,7 +5104,7 @@ noscript {
 
     > span {
       font-size: 14px;
-      color: $secondary-text-color;
+      color: var(--primary-text-color-faint);
 
       a {
         color: var(--brand-color) !important;
@@ -5122,7 +5125,7 @@ noscript {
     span {
       display: block;
       text-align: center;
-      color: $secondary-text-color;
+      color: var(--primary-text-color-faint);
     }
 
     a {
@@ -5185,15 +5188,17 @@ noscript {
   width: 100%;
   max-height: 46px;
   position: relative;
-  background-color: darken($ui-base-color, 8%);
+  background-color: var(--brand-color-faint);
   border-bottom: 1px solid;
   border-top: 1px solid;
   border-color: var(--brand-color-faint);
   transition: max-height 150ms ease;
   overflow: hidden;
+  opacity: 1;
 
   &.hidden {
     max-height: 0;
+    opacity: 0;
   }
 
   &__btn {
@@ -5204,7 +5209,7 @@ noscript {
     line-height: 46px;
     font-size: 14px;
     cursor: pointer;
-    color: $secondary-text-color;
+    color: var(--primary-text-color-faint);
 
     span {
       height: 46px;
diff --git a/app/styles/soapbox/components/account-header.scss b/app/styles/soapbox/components/account-header.scss
index 1626963ef..c0702b301 100644
--- a/app/styles/soapbox/components/account-header.scss
+++ b/app/styles/soapbox/components/account-header.scss
@@ -115,7 +115,7 @@
     &__links {
       display: flex;
       font-size: 14px;
-      color: $darker-text-color;
+      color: var(--primary-color-faint);
       @media screen and (max-width: 895px) {
         justify-content: center;
         flex-wrap: wrap;
@@ -143,7 +143,7 @@
           }
 
           &:last-of-type {
-            color: $ui-secondary-color;
+            color: var(--primary-text-color-faint);
             font-size: 12px;
             line-height: 14px;
             padding-top: 2px;
diff --git a/app/styles/soapbox/components/compose-form.scss b/app/styles/soapbox/components/compose-form.scss
index c51f7a3e5..05e43be4f 100644
--- a/app/styles/soapbox/components/compose-form.scss
+++ b/app/styles/soapbox/components/compose-form.scss
@@ -219,7 +219,7 @@
 
         .icon-button {
           flex: 0 1 auto;
-          color: $gab-secondary-text;
+          color: var(--primary-color-faint);
           font-size: 14px;
           font-weight: 500;
           padding: 10px;
@@ -250,8 +250,8 @@
           background: rgba(0, 0, 0, 0.3);
           box-sizing: border-box;
           background: transparent;
-          color: $gab-secondary-text;
-          border: 1px solid $gab-secondary-text;
+          color: var(--primary-color-faint);
+          border: 1px solid var(--primary-color-faint);
           outline: none;
           padding: 10px;
           margin: 0;
@@ -263,7 +263,7 @@
           &:focus {color: #fff;}
 
           &::placeholder {
-            color: $gab-secondary-text;
+            color: var(--primary-color-faint);
           }
         }
         &.active {opacity: 1;}
@@ -314,7 +314,7 @@
         font-family: $font-sans-serif, sans-serif;
         font-size: 14px;
         font-weight: 600;
-        color: $gab-secondary-text;
+        color: var(--primary-color-faint);
         &.character-counter--over {color: $warning-red;}
       }
     }
diff --git a/app/styles/soapbox/components/detailed-status.scss b/app/styles/soapbox/components/detailed-status.scss
index fe665967b..e00395446 100644
--- a/app/styles/soapbox/components/detailed-status.scss
+++ b/app/styles/soapbox/components/detailed-status.scss
@@ -45,7 +45,7 @@
 
 .detailed-status__meta {
   margin-top: 15px;
-  color: $dark-text-color;
+  color: var(--primary-text-color-faint);
   font-size: 14px;
   line-height: 18px;
   display: flex;
@@ -60,7 +60,7 @@
 }
 
 .detailed-status__link {
-  color: $action-button-color;
+  color: var(--primary-text-color-faint);
   cursor: pointer;
   text-decoration: none;
   font-size: 13px;
diff --git a/app/styles/soapbox/components/dropdown-menu.scss b/app/styles/soapbox/components/dropdown-menu.scss
index d90118e40..905a1b7fe 100644
--- a/app/styles/soapbox/components/dropdown-menu.scss
+++ b/app/styles/soapbox/components/dropdown-menu.scss
@@ -4,10 +4,10 @@
   @include font-weight(normal);
   z-index: 9999;
   position: absolute;
-  background: $gab-background-base-light;
+  background: var(--background-color);
   border-radius: 6px;
   padding: 4px 0;
-  color: $gab-secondary-text;
+  color: var(--primary-text-color);
   box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
   &.left {transform-origin: 100% 50%;}
   &.top {transform-origin: 50% 100%;}
@@ -24,28 +24,28 @@
       right: -5px;
       margin-top: -5px;
       border-width: 5px 0 5px 5px;
-      border-left-color: $gab-background-base-light;
+      border-left-color: var(--background-color);
     }
 
     &.top {
       bottom: -5px;
       margin-left: -5px;
       border-width: 5px 5px 0;
-      border-top-color: $gab-background-base-light;
+      border-top-color: var(--background-color);
     }
 
     &.bottom {
       top: -5px;
       margin-left: -5px;
       border-width: 0 5px 5px;
-      border-bottom-color: $gab-background-base-light;
+      border-bottom-color: var(--background-color);
     }
 
     &.right {
       left: -5px;
       margin-top: -5px;
       border-width: 5px 5px 5px 0;
-      border-right-color: $gab-background-base-light;
+      border-right-color: var(--background-color);
     }
   }
 
@@ -63,7 +63,7 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     text-transform: capitalize;
-    color: $gab-secondary-text;
+    color: var(--primary-text-color);
 
     &:focus,
     &:hover,
@@ -78,7 +78,7 @@
     display: block;
     margin: 10px !important;
     height: 1px;
-    background: $gab-background-base;
+    background: var(--foreground-color);
   }
 }
 // end .dropdown-menu
@@ -146,7 +146,7 @@
 
     &:hover {
       background: var(--brand-color);
-      color: $secondary-text-color;
+      color: var(--primary-text-color-faint);
     }
   }
 }
diff --git a/app/styles/soapbox/components/emoji-reacts.scss b/app/styles/soapbox/components/emoji-reacts.scss
index 24783b3f3..14b5aeba9 100644
--- a/app/styles/soapbox/components/emoji-reacts.scss
+++ b/app/styles/soapbox/components/emoji-reacts.scss
@@ -6,7 +6,7 @@
     img {
       width: 20px;
       height: 20px;
-      filter: drop-shadow(2px 0 0 #fff); // FIXME: Use theme color
+      filter: drop-shadow(2px 0 0 var(--foreground-color));
     }
   }
 
@@ -57,7 +57,7 @@
 .emoji-react-selector {
   position: absolute;
   display: flex;
-  background-color: #fff;
+  background-color: var(--background-color);
   padding: 5px 8px;
   border-radius: 9999px;
   box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
diff --git a/app/styles/soapbox/components/group-card.scss b/app/styles/soapbox/components/group-card.scss
index 567a170cb..a846da2f6 100644
--- a/app/styles/soapbox/components/group-card.scss
+++ b/app/styles/soapbox/components/group-card.scss
@@ -53,7 +53,7 @@
     }
 
     .group-card__meta {
-      color: $gab-secondary-text;
+      color: var(--primary-color-faint);
       font-size: 14px;
       margin-top: 5px;
       margin-bottom: 10px;
diff --git a/app/styles/soapbox/components/group-form.scss b/app/styles/soapbox/components/group-form.scss
index e9cef5766..41fce791d 100644
--- a/app/styles/soapbox/components/group-form.scss
+++ b/app/styles/soapbox/components/group-form.scss
@@ -31,7 +31,7 @@
     float: left;
     height: 20px;
     padding: 3px 0 0 33px;
-    color: $gab-secondary-text;
+    color: var(--primary-color-faint);
     background-repeat: no-repeat;
     background-image: url('../images/sprite-post-functions.png');
     background-size: 100px 1200px;
diff --git a/app/styles/soapbox/components/group-sidebar-panel.scss b/app/styles/soapbox/components/group-sidebar-panel.scss
index 6b4fa681d..e8d84d8cd 100644
--- a/app/styles/soapbox/components/group-sidebar-panel.scss
+++ b/app/styles/soapbox/components/group-sidebar-panel.scss
@@ -23,7 +23,7 @@
 
     &__meta {
       font-size: 0.8em;
-      color: $gab-secondary-text;
+      color: var(--primary-color-faint);
 
       &__unread {
         color: var(--brand-color);
diff --git a/app/styles/soapbox/components/modal.scss b/app/styles/soapbox/components/modal.scss
index 3c9587fa6..9d48af78d 100644
--- a/app/styles/soapbox/components/modal.scss
+++ b/app/styles/soapbox/components/modal.scss
@@ -290,7 +290,7 @@
 
   &__case {
     background: var(--brand-color-med);
-    color: $secondary-text-color;
+    color: var(--primary-text-color-faint);
     font-weight: 500;
     padding: 10px;
     border-radius: 4px;
@@ -316,7 +316,7 @@
   max-width: 90vw;
   border-radius: 4px;
   border: 1px solid $gab-placeholder-accent;
-  color: $gab-secondary-text;
+  color: var(--primary-color-faint);
   background: $gab-background-container;
 
   .status__display-name {
@@ -440,7 +440,7 @@
 
   .status__content,
   .status__content p {
-    color: $gab-secondary-text;
+    color: var(--primary-color-faint);
   }
 
   @media screen and (max-width: 480px) {
@@ -532,7 +532,7 @@
         align-items: center;
         padding: 13px 10px 12px;
         @inclide font-size(14);
-        color: $gab-secondary-text;
+        color: var(--primary-color-faint);
         text-decoration: none;
 
         &,
diff --git a/app/styles/soapbox/components/user-panel.scss b/app/styles/soapbox/components/user-panel.scss
index 63fcc31fa..80edc0ab9 100644
--- a/app/styles/soapbox/components/user-panel.scss
+++ b/app/styles/soapbox/components/user-panel.scss
@@ -9,7 +9,7 @@
     display: block;
     height: 112px;
     width: 100%;
-    background: lighten($gab-background-container, 4%);
+    background: var(--brand-color-faint);
 
     img {
       display: block;
@@ -30,7 +30,7 @@
       display: block;
       width: 82px;
       height: 82px;
-      border: 6px solid $gab-background-base;
+      border: 6px solid var(--foreground-color);
       background-size: cover;
     }
   }
@@ -51,7 +51,7 @@
       font-size: 20px;
       font-weight: bold;
       line-height: 24px;
-      color: #fff;
+      color: var(--primary-text-color);
     }
 
     &:hover & {
@@ -64,7 +64,7 @@
       display: block;
       font-size: 14px;
       line-height: 16px;
-      color: $gab-secondary-text;
+      color: var(--primary-color-faint);
       text-decoration: none !important;
     }
   }
@@ -84,7 +84,6 @@
 
     a {
       text-decoration: none;
-
       color: var(--primary-text-color);
 
       &:hover {
@@ -95,7 +94,7 @@
     &__value {
       display: block;
       width: 100%;
-      color: #fff;
+      color: var(--primary-text-color);
       font-size: 20px;
       font-weight: 800;
       line-height: 24px;
@@ -104,7 +103,7 @@
     &__label {
       display: block;
       width: 100%;
-      color: $gab-secondary-text;
+      color: var(--primary-color-faint);
       font-size: 12px;
       line-height: 14px;
     }
diff --git a/app/styles/soapbox/containers.scss b/app/styles/soapbox/containers.scss
index 030c17940..410b2b3cd 100644
--- a/app/styles/soapbox/containers.scss
+++ b/app/styles/soapbox/containers.scss
@@ -94,7 +94,7 @@
 
   .name {
     flex: 1 1 auto;
-    color: $secondary-text-color;
+    color: var(--primary-text-color-faint);
     width: calc(100% - 88px);
 
     .username {
@@ -431,7 +431,7 @@
       }
 
       .logo-button {
-        background-color: $secondary-text-color;
+        background-color: var(--primary-text-color-faint);
       }
     }
 
@@ -612,7 +612,7 @@
             text-shadow: none;
 
             small {
-              color: $darker-text-color;
+              color: var(--primary-color-faint);
             }
           }
         }
@@ -640,7 +640,7 @@
           width: 33.3%;
           box-sizing: border-box;
           flex: 0 0 auto;
-          color: $darker-text-color;
+          color: var(--primary-color-faint);
           padding: 10px;
           border-right: 1px solid var(--brand-color-faint);
           cursor: default;
@@ -674,7 +674,7 @@
             }
 
             &.inactive::after {
-              border-bottom-color: $secondary-text-color;
+              border-bottom-color: var(--primary-text-color-faint);
             }
           }
 
@@ -737,11 +737,11 @@
       &__links {
         margin-top: -15px;
         font-size: 14px;
-        color: $darker-text-color;
+        color: var(--primary-color-faint);
 
         a {
           display: inline-block;
-          color: $darker-text-color;
+          color: var(--primary-color-faint);
           text-decoration: none;
           padding: 15px;
           font-weight: 500;
@@ -812,7 +812,7 @@
     .roles {
       padding: 20px;
       font-size: 14px;
-      color: $darker-text-color;
+      color: var(--primary-color-faint);
     }
 
     .roles {
diff --git a/app/styles/soapbox/dashboard.scss b/app/styles/soapbox/dashboard.scss
index 8b8654e0c..5da8419cf 100644
--- a/app/styles/soapbox/dashboard.scss
+++ b/app/styles/soapbox/dashboard.scss
@@ -48,7 +48,7 @@
 
   &__label {
     font-size: 14px;
-    color: $gab-secondary-text;
+    color: var(--primary-color-faint);
     text-align: center;
     font-weight: 500;
   }
diff --git a/app/styles/soapbox/footer.scss b/app/styles/soapbox/footer.scss
index 1a2b2f578..e1695bcdf 100644
--- a/app/styles/soapbox/footer.scss
+++ b/app/styles/soapbox/footer.scss
@@ -34,7 +34,7 @@
       text-transform: uppercase;
       font-weight: 700;
       margin-bottom: 8px;
-      color: $darker-text-color;
+      color: var(--primary-color-faint);
       font-size: 1.6rem;
       line-height: 1.5;
 
diff --git a/app/styles/soapbox/forms.scss b/app/styles/soapbox/forms.scss
index 5bbf634cf..e7dd7dee6 100644
--- a/app/styles/soapbox/forms.scss
+++ b/app/styles/soapbox/forms.scss
@@ -95,7 +95,7 @@ code {
   }
 
   .hint {
-    color: $gab-secondary-text;
+    color: var(--primary-color-faint);
 
     a {
       color: var(--highlight-text-color);
@@ -116,7 +116,7 @@ code {
 
   p.hint {
     margin-bottom: 15px;
-    color: $gab-secondary-text;
+    color: var(--primary-color-faint);
 
     &.subtle-hint {
       text-align: center;
@@ -390,7 +390,7 @@ code {
     border: 0;
     border-radius: 4px;
     background: var(--brand-color);
-    color: var(--primary-text-color);
+    color: #fff;
     font-size: 18px;
     line-height: inherit;
     height: auto;
@@ -519,7 +519,7 @@ code {
 
 .flash-message {
   background: var(--brand-color-med);
-  color: $darker-text-color;
+  color: var(--primary-color-faint);
   border-radius: 4px;
   padding: 15px 10px;
   margin-bottom: 30px;
@@ -539,7 +539,7 @@ code {
 
   a {
     display: inline-block;
-    color: $darker-text-color;
+    color: var(--primary-color-faint);
     text-decoration: none;
 
     &:hover {
@@ -600,7 +600,7 @@ code {
   text-align: center;
 
   a {
-    color: $darker-text-color;
+    color: var(--primary-color-faint);
     text-decoration: none;
 
     &:hover {
@@ -636,7 +636,7 @@ code {
 .oauth-prompt,
 .follow-prompt {
   margin-bottom: 30px;
-  color: $darker-text-color;
+  color: var(--primary-color-faint);
 
   h2 {
     font-size: 16px;
@@ -645,7 +645,7 @@ code {
   }
 
   strong {
-    color: $secondary-text-color;
+    color: var(--primary-text-color-faint);
     font-weight: 500;
 
     @each $lang in $cjk-langs {
@@ -682,7 +682,7 @@ code {
 
 .qr-alternative {
   margin-bottom: 20px;
-  color: $secondary-text-color;
+  color: var(--primary-text-color-faint);
   flex: 150px;
 
   samp {
@@ -767,7 +767,7 @@ code {
 
 .post-follow-actions {
   text-align: center;
-  color: $darker-text-color;
+  color: var(--primary-color-faint);
 
   div {
     margin-bottom: 4px;
diff --git a/app/styles/soapbox/introduction.scss b/app/styles/soapbox/introduction.scss
index 161238937..aad322e60 100644
--- a/app/styles/soapbox/introduction.scss
+++ b/app/styles/soapbox/introduction.scss
@@ -92,7 +92,7 @@
       font-size: 16px;
       line-height: 24px;
       font-weight: 400;
-      color: $darker-text-color;
+      color: var(--primary-color-faint);
 
       code {
         display: inline-block;
diff --git a/app/styles/soapbox/stream_entries.scss b/app/styles/soapbox/stream_entries.scss
index ab098eef3..c45192f50 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: var(--primary-text-color);
+  color: #fff;
   text-transform: none;
   line-height: 36px;
   height: auto;
diff --git a/app/styles/soapbox/tables.scss b/app/styles/soapbox/tables.scss
index 41ed16dc6..f498cfec2 100644
--- a/app/styles/soapbox/tables.scss
+++ b/app/styles/soapbox/tables.scss
@@ -109,7 +109,7 @@ a.table-action-link {
   display: inline-block;
   margin-right: 5px;
   padding: 0 10px;
-  color: $gab-secondary-text;
+  color: var(--primary-color-faint);
   font-weight: 500;
 
   &:hover {
diff --git a/app/styles/soapbox/variables.scss b/app/styles/soapbox/variables.scss
index e8f32439c..08aec71a0 100644
--- a/app/styles/soapbox/variables.scss
+++ b/app/styles/soapbox/variables.scss
@@ -24,7 +24,6 @@ $gab-placeholder-accent: #666 !default;
 
 // light theme
 $gab-background-base-light: #f6f2f6 !default;
-$gab-background-container-light: #fff !default;
 $gab-default-text-light: #6c6c6c !default;
 
 $gab-background: $gab-background-base !default;
diff --git a/app/styles/soapbox/widgets.scss b/app/styles/soapbox/widgets.scss
index 704cd0d97..c51a8cca2 100644
--- a/app/styles/soapbox/widgets.scss
+++ b/app/styles/soapbox/widgets.scss
@@ -24,7 +24,7 @@
     padding: 20px;
     border-radius: 0 0 4px 4px;
     font-size: 15px;
-    color: $darker-text-color;
+    color: var(--primary-color-faint);
     line-height: 20px;
     word-wrap: break-word;
     font-weight: 400;
@@ -56,7 +56,7 @@
     }
 
     a {
-      color: $secondary-text-color;
+      color: var(--primary-text-color-faint);
       text-decoration: none;
 
       &:hover {
@@ -79,7 +79,7 @@
     text-transform: uppercase;
     font-weight: 700;
     font-size: 13px;
-    color: $darker-text-color;
+    color: var(--primary-color-faint);
   }
 
   .account {
@@ -121,7 +121,7 @@
 
 .contact-widget {
   font-size: 15px;
-  color: $darker-text-color;
+  color: var(--primary-color-faint);
   line-height: 20px;
   word-wrap: break-word;
   font-weight: 400;
@@ -154,7 +154,7 @@
   border-radius: 4px;
   background: var(--brand-color-med);
   box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
-  color: $secondary-text-color;
+  color: var(--primary-text-color-faint);
   font-weight: 400;
   margin-bottom: 10px;
 
@@ -197,7 +197,7 @@
 
     .fa {
       margin-right: 5px;
-      color: $darker-text-color;
+      color: var(--primary-color-faint);
     }
   }
 
@@ -224,7 +224,7 @@
   background: $base-shadow-color;
   box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
   font-size: 14px;
-  color: $darker-text-color;
+  color: var(--primary-color-faint);
   margin-bottom: 10px;
 }
 
@@ -246,7 +246,7 @@
 
   p {
     font-size: 15px;
-    color: $darker-text-color;
+    color: var(--primary-color-faint);
   }
 
   @media screen and (max-width: $no-gap-breakpoint) {
@@ -309,7 +309,7 @@
       text-overflow: ellipsis;
 
       .fa {
-        color: $darker-text-color;
+        color: var(--primary-color-faint);
       }
 
       small {
@@ -317,7 +317,7 @@
         font-weight: 400;
         font-size: 15px;
         margin-top: 8px;
-        color: $darker-text-color;
+        color: var(--primary-color-faint);
       }
     }
 
@@ -383,7 +383,7 @@
   thead th {
     text-align: center;
     text-transform: uppercase;
-    color: $darker-text-color;
+    color: var(--primary-color-faint);
     font-weight: 700;
     padding: 10px;
 
@@ -411,7 +411,7 @@
 
     small {
       display: block;
-      color: $darker-text-color;
+      color: var(--primary-color-faint);
       font-weight: 400;
       font-size: 14px;
     }
@@ -508,7 +508,7 @@ $fluid-breakpoint: $maximum-width + 20px;
 
 .notice-widget {
   margin-bottom: 10px;
-  color: $darker-text-color;
+  color: var(--primary-color-faint);
 
   p {
     margin-bottom: 10px;