diff --git a/app/styles/about.scss b/app/styles/about.scss
index a111afa5b..5f4d94595 100644
--- a/app/styles/about.scss
+++ b/app/styles/about.scss
@@ -16,7 +16,7 @@ $small-breakpoint: 960px;
   .content {
     display: block;
     margin: 40px 0;
-    background: #fff;
+    background: var(--foreground-color);
     border-radius: 6px;
 
     @media screen and (max-width: 767px) {
@@ -1413,7 +1413,7 @@ $small-breakpoint: 960px;
     &--right {
       margin-left: auto;
       width: 395px;
-      background-color: #fff;
+      background-color: var(--foreground-color);
       border-radius: 6px;
 
       .simple_form {
diff --git a/app/styles/components.scss b/app/styles/components.scss
index b2134add6..28fb3b924 100644
--- a/app/styles/components.scss
+++ b/app/styles/components.scss
@@ -427,7 +427,7 @@
     transition: 0.2s;
 
     &:hover {
-      background: var(--brand-color-faint);
+      background: rgba(var(--brand-color-rgb), 0.5);
       text-decoration: none;
     }
 
@@ -476,7 +476,7 @@
   border-radius: 2px;
   background: transparent;
   border: 0;
-  color: $inverted-text-color;
+  color: var(--primary-text-color);
   font-weight: 700;
   font-size: 11px;
   padding: 0 6px;
@@ -1701,7 +1701,7 @@ a.account__display-name {
 .drawer__inner {
   top: 0;
   left: 0;
-  background: lighten($ui-base-color, 13%);
+  background: var(--foreground-color);
   box-sizing: border-box;
   padding: 0;
   display: flex;
@@ -1710,32 +1710,6 @@ a.account__display-name {
   overflow-y: auto;
   width: 100%;
   height: 100%;
-
-  &.darker {
-    background: var(--brand-color-med);
-  }
-}
-
-.drawer__inner__soapbox {
-  background: lighten($ui-base-color, 13%) 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($ui-base-color)}"/></svg>') no-repeat bottom / 100% auto;
-  flex: 1;
-  min-height: 47px;
-  display: none;
-
-  > img {
-    display: block;
-    object-fit: contain;
-    object-position: bottom left;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    user-drag: none;
-    user-select: none;
-  }
-
-  @media screen and (min-height: 640px) {
-    display: block;
-  }
 }
 
 .pseudo-drawer {
@@ -1776,7 +1750,7 @@ a.account__display-name {
 }
 
 .column-back-button {
-  background: var(--brand-color-faint);
+  background: var(--brand-color-med);
   color: var(--highlight-text-color);
   cursor: pointer;
   flex: 0 0 auto;
@@ -2632,7 +2606,7 @@ a.status-card.compact:hover {
   height: 42px;
   box-sizing: border-box;
   background-color: transparent;
-  border: 0 solid var(--brand-color-med);
+  border: 0 solid rgba(var(--brand-color-rgb), 0.5);
   border-width: 6px;
   border-radius: 50%;
 }
@@ -2649,11 +2623,11 @@ a.status-card.compact:hover {
   0% {
     width: 0;
     height: 0;
-    background-color: var(--brand-color-med);
+    background-color: rgba(var(--brand-color-rgb), 0.5);
   }
 
   29% {
-    background-color: var(--brand-color-med);
+    background-color: rgba(var(--brand-color-rgb), 0.5);
   }
 
   30% {
@@ -3364,7 +3338,7 @@ a.status-card.compact:hover {
 
 .search-results__header {
   color: $dark-text-color;
-  background: var(--brand-color-faint);
+  background: var(--brand-color-med);
   padding: 15px;
   font-weight: 500;
   font-size: 16px;
@@ -3380,8 +3354,8 @@ a.status-card.compact:hover {
   margin-bottom: 5px;
 
   h5 {
-    background: var(--brand-color-med);
-    border-bottom: 1px solid var(--brand-color-med);
+    background: var(--brand-color-faint);
+    border-bottom: 1px solid var(--brand-color-faint);
     cursor: default;
     display: flex;
     padding: 15px;
@@ -4047,8 +4021,8 @@ a.status-card.compact:hover {
 
 .notification__filter-bar,
 .account__section-headline {
-  background: var(--brand-color-med);
-  border-bottom: 1px solid var(--brand-color-med);
+  background: var(--brand-color-faint);
+  border-bottom: 1px solid var(--brand-color-faint);
   cursor: default;
   display: flex;
   flex-shrink: 0;
@@ -4086,12 +4060,12 @@ a.status-card.compact:hover {
         transform: translateX(-50%);
         border-style: solid;
         border-width: 0 10px 10px;
-        border-color: transparent transparent var(--brand-color-med);
+        border-color: transparent transparent var(--foreground-color);
       }
 
       &::after {
         bottom: -1px;
-        border-color: transparent transparent var(--brand-color-med);
+        border-color: transparent transparent var(--foreground-color);
       }
     }
   }
@@ -5148,7 +5122,7 @@ noscript {
   &__text-container {
     display: none;
     padding: 25px 0;
-    background-color: var(--brand-color-faint);
+    background-color: var(--brand-color-med);
 
     @media (min-width: 895px) {
       display: block;
diff --git a/app/styles/components/account-header.scss b/app/styles/components/account-header.scss
index 8778945f9..06b08a8aa 100644
--- a/app/styles/components/account-header.scss
+++ b/app/styles/components/account-header.scss
@@ -36,7 +36,7 @@
     min-height: 74px;
     width: 100%;
     position: relative;
-    background: var(--brand-color-faint);
+    background: var(--brand-color-med);
     @media (min-width: 895px) {height: 74px;}
   }
 
diff --git a/app/styles/components/detailed-status.scss b/app/styles/components/detailed-status.scss
index e00395446..807c1638a 100644
--- a/app/styles/components/detailed-status.scss
+++ b/app/styles/components/detailed-status.scss
@@ -7,7 +7,7 @@
 }
 
 .detailed-status {
-  background: var(--brand-color-faint);
+  background: rgba(var(--brand-color-rgb), 0.03);
   padding: 14px 10px;
 
   &--flex {
@@ -52,9 +52,9 @@
 }
 
 .detailed-status__action-bar {
-  background: var(--brand-color-faint);
-  border-top: 1px solid var(--brand-color-med);
-  border-bottom: 1px solid var(--brand-color-med);
+  background: rgba(var(--brand-color-rgb), 0.03);
+  border-top: 1px solid var(--brand-color-faint);
+  border-bottom: 1px solid var(--brand-color-faint);
   display: flex;
   flex-direction: row;
 }
diff --git a/app/styles/components/emoji-reacts.scss b/app/styles/components/emoji-reacts.scss
index 14b5aeba9..7ce5731f8 100644
--- a/app/styles/components/emoji-reacts.scss
+++ b/app/styles/components/emoji-reacts.scss
@@ -57,7 +57,7 @@
 .emoji-react-selector {
   position: absolute;
   display: flex;
-  background-color: var(--background-color);
+  background-color: var(--foreground-color);
   padding: 5px 8px;
   border-radius: 9999px;
   box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
diff --git a/app/styles/polls.scss b/app/styles/polls.scss
index 5c9a2c88a..8ad9596da 100644
--- a/app/styles/polls.scss
+++ b/app/styles/polls.scss
@@ -27,7 +27,7 @@
     overflow: hidden;
     width: 100%;
     text-overflow: ellipsis;
-    color: #fff;
+    color: var(--primary-text-color-faint);
 
     input[type=radio],
     input[type=checkbox] {