diff --git a/app/soapbox/features/ui/components/compose_modal.js b/app/soapbox/features/ui/components/compose_modal.js
index 1a3aae011..0e5e65a87 100644
--- a/app/soapbox/features/ui/components/compose_modal.js
+++ b/app/soapbox/features/ui/components/compose_modal.js
@@ -59,9 +59,7 @@ class ComposeModal extends ImmutablePureComponent {
           <IconButton className='compose-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={this.onClickClose} size={20} />
         </div>
         <div className='compose-modal__content compose-modal__content--scroll'>
-          <div className='timeline-compose-block'>
-            <ComposeFormContainer />
-          </div>
+          <ComposeFormContainer />
         </div>
       </div>
     );
diff --git a/app/styles/about.scss b/app/styles/about.scss
index 7986ac846..7c8ed6f45 100644
--- a/app/styles/about.scss
+++ b/app/styles/about.scss
@@ -841,7 +841,7 @@ $small-breakpoint: 960px;
     width: 100%;
     height: 0;
     border: 0;
-    border-bottom: 1px solid rgba(var(--background-color), .6);
+    border-bottom: 1px solid rgba(var(--background-color-rgb), .6);
     margin: 2em 0;
 
     &.spacer {
@@ -1095,7 +1095,7 @@ $small-breakpoint: 960px;
     width: 100%;
     height: 0;
     border: 0;
-    border-bottom: 1px solid rgba(var(--background-color), .6);
+    border-bottom: 1px solid rgba(var(--background-color-rgb), .6);
     margin: 20px 0;
 
     &.spacer {
diff --git a/app/styles/accounts.scss b/app/styles/accounts.scss
index e6dd0829f..b37dbddf4 100644
--- a/app/styles/accounts.scss
+++ b/app/styles/accounts.scss
@@ -116,7 +116,7 @@
   }
 
   .current {
-    background: $simple-background-color;
+    background: var(--foreground-color);
     border-radius: 100px;
     color: var(--inverted-text-color);
     cursor: default;
@@ -206,8 +206,8 @@
   line-height: 12px;
   font-weight: 500;
   color: var(--background-color);
-  background-color: rgba(var(--background-color), 0.1);
-  border: 1px solid rgba(var(--background-color), 0.5);
+  background-color: rgba(var(--background-color-rgb), 0.1);
+  border: 1px solid rgba(var(--background-color-rgb), 0.5);
 
   &.moderator {
     color: $success-green;
@@ -252,7 +252,7 @@
     width: 120px;
     flex: 0 0 auto;
     color: var(--primary-text-color-faint);
-    background: rgba(var(--background-color), 0.5);
+    background: rgba(var(--background-color-rgb), 0.5);
   }
 
   dd {
diff --git a/app/styles/components.scss b/app/styles/components.scss
index bdcf0c6eb..8b6b0a1e8 100644
--- a/app/styles/components.scss
+++ b/app/styles/components.scss
@@ -279,7 +279,7 @@
         height: 0;
         width: 0;
         border-top: 11px solid transparent;
-        border-right: 12px solid #fff;
+        border-right: 12px solid var(--background-color);
         border-bottom: 11px solid transparent;
         border-left: 11px solid transparent;
         left: -22px;
@@ -317,7 +317,7 @@
 .reply-indicator {
   border-radius: 4px;
   margin-bottom: 10px;
-  background: var(--background-color);
+  background: var(--brand-color-faint);
   padding: 10px;
   min-height: 23px;
   overflow-y: auto;
@@ -338,13 +338,17 @@
 }
 
 .reply-indicator__display-name {
-  color: var(--inverted-text-color);
+  color: var(--primary-text-color);
   display: block;
   max-width: 100%;
   line-height: 24px;
   overflow: hidden;
   padding-right: 25px;
   text-decoration: none;
+
+  .display-name__account {
+    color: var(--primary-text-color-faint);
+  }
 }
 
 .reply-indicator__display-avatar {
@@ -1902,7 +1906,7 @@ a.account__display-name {
   height: 22px;
   border: 1px solid var(--brand-color-med);
   border-radius: 50%;
-  background-color: darken($simple-background-color, 2%);
+  background-color: var(--background-color);
   box-sizing: border-box;
   transition: all 0.25s ease;
   transition-property: border-color, left;
@@ -3000,10 +3004,9 @@ a.status-card.compact:hover {
 }
 
 .emoji-picker-dropdown__menu {
-  background: $simple-background-color;
+  @include standard-panel;
+  background: var(--foreground-color);
   position: absolute;
-  box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
-  border-radius: 4px;
   margin-top: 5px;
   z-index: 20000;
 
@@ -3028,7 +3031,7 @@ a.status-card.compact:hover {
   z-index: 4;
   top: -4px;
   left: -8px;
-  background: $simple-background-color;
+  background: var(--foreground-color);
   border-radius: 4px;
   box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
   overflow: hidden;
@@ -3043,7 +3046,7 @@ a.status-card.compact:hover {
     &:hover,
     &:focus,
     &:active {
-      background: rgba(var(--background-color), 0.4);
+      background: rgba(var(--background-color-rgb), 0.4);
     }
   }
 
@@ -3192,7 +3195,7 @@ a.status-card.compact:hover {
 
 .privacy-dropdown__dropdown {
   position: absolute;
-  background: $simple-background-color;
+  background: var(--foreground-color);
   box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
   border-radius: 4px;
   margin-left: 40px;
@@ -3260,7 +3263,7 @@ a.status-card.compact:hover {
 
 .privacy-dropdown.active {
   .privacy-dropdown__value {
-    background: $simple-background-color;
+    background: var(--foreground-color);
     border-radius: 4px 4px 0 0;
     box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1);
 
@@ -4837,10 +4840,7 @@ noscript {
   &__header {
     display: block;
     position: relative;
-    border-bottom: 1px solid var(--background-color);
-    border-radius: 6px 6px 0 0;
-    padding-top: 12px;
-    padding-bottom: 12px;
+    padding: 5px 0;
 
     &__title {
       display: block;
@@ -4849,7 +4849,7 @@ noscript {
       font-size: 18px;
       font-weight: bold;
       line-height: 24px;
-      color: var(--background-color);
+      color: var(--primary-text-color);
       text-align: center;
     }
   }
@@ -4857,7 +4857,7 @@ noscript {
   &__close {
     position: absolute;
     right: 10px;
-    top: 10px;
+    top: 5px;
     color: #999;
   }
 
@@ -4876,7 +4876,7 @@ noscript {
     .timeline-compose-block {
       background: transparent !important;
       width: 100%;
-      padding: 10px 5px;
+      padding: 0;
       margin-bottom: 0;
 
       .compose-form {
diff --git a/app/styles/components/compose-form.scss b/app/styles/components/compose-form.scss
index 9b48619df..52cb2c020 100644
--- a/app/styles/components/compose-form.scss
+++ b/app/styles/components/compose-form.scss
@@ -1,5 +1,4 @@
 .compose-form {
-  padding: 10px;
 
   &__sensitive-button {
     padding: 10px;
@@ -97,16 +96,22 @@
     box-sizing: border-box;
     width: 100%;
     margin: 0;
-    color: var(--inverted-text-color);
-    background: #f2f2f2;
+    background: var(--background-color);
+    color: var(--primary-text-color);
     padding: 10px;
     font-family: inherit;
-    font-size: 14px;
+    font-size: 16px;
     resize: vertical;
     border: 0;
     outline: 0;
-    &:focus {outline: 0;}
-    @media screen and (max-width: 600px) {font-size: 16px;}
+
+    &:focus {
+      outline: 0;
+    }
+
+    @media screen and (max-width: 600px) {
+      font-size: 16px;
+    }
   }
   .spoiler-input__input {border-radius: 4px;}
 
@@ -184,13 +189,16 @@
     width: 16px;
     height: 16px;
   }
-  .autosuggest-account .display-name__account {color: var(--highlight-text-color);}
+
+  .autosuggest-account .display-name__account {
+    color: var(--highlight-text-color-faint);
+  }
 
   .compose-form__modifiers {
     color: var(--inverted-text-color);
     font-family: inherit;
     font-size: 14px;
-    background: $simple-background-color;
+    background: var(--foreground-color);
     .compose-form__upload-wrapper {overflow: hidden;}
 
     .compose-form__uploads-wrapper {
@@ -200,7 +208,7 @@
 
       &.contains-media {
         padding: 5px;
-        border-top: 1px solid darken($simple-background-color, 8%);
+        border-top: 1px solid var(--foreground-color);
       }
     }
 
diff --git a/app/styles/emoji_picker.scss b/app/styles/emoji_picker.scss
index 8bc0280f5..474766a66 100644
--- a/app/styles/emoji_picker.scss
+++ b/app/styles/emoji_picker.scss
@@ -1,7 +1,7 @@
 .emoji-mart {
   font-size: 13px;
   display: inline-block;
-  color: var(--inverted-text-color);
+  color: var(--primary-text-color);
 
   &,
   * {
@@ -21,7 +21,6 @@
     border-bottom-width: 1px;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
-    background: var(--background-color);
   }
 
   &:last-child {
@@ -36,7 +35,7 @@
   display: flex;
   justify-content: space-between;
   padding: 0 6px;
-  color: var(--highlight-text-color);
+  color: var(--primary-text-color-faint);
   line-height: 0;
 }
 
@@ -93,7 +92,7 @@
   height: 270px;
   max-height: 35vh;
   padding: 0 6px 6px;
-  background: $simple-background-color;
+  background: var(--foreground-color);
   will-change: transform;
 
   &::-webkit-scrollbar-track:hover,
@@ -105,7 +104,7 @@
 .emoji-mart-search {
   padding: 10px;
   padding-right: 45px;
-  background: $simple-background-color;
+  background: var(--foreground-color);
 
   input {
     font-size: 14px;
@@ -114,10 +113,9 @@
     font-family: inherit;
     display: block;
     width: 100%;
-    background: rgba(var(--background-color), 0.3);
-    color: var(--inverted-text-color);
-    border: 1px solid var(--background-color);
-    border-radius: 4px;
+    background: var(--background-color);
+    border: 1px solid var(--brand-color-faint);
+    border-radius: 9999px;
 
     &::-moz-focus-inner {
       border: 0;
@@ -148,7 +146,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: rgba(var(--background-color), 0.7);
+    background-color: rgba(var(--background-color-rgb), 0.7);
     border-radius: 100%;
   }
 }
@@ -165,7 +163,7 @@
     width: 100%;
     font-weight: 500;
     padding: 5px 6px;
-    background: $simple-background-color;
+    background: var(--foreground-color);
   }
 }
 
diff --git a/app/styles/forms.scss b/app/styles/forms.scss
index d9a3e3551..53c8fc65f 100644
--- a/app/styles/forms.scss
+++ b/app/styles/forms.scss
@@ -471,7 +471,7 @@ code {
         right: 0;
         bottom: 1px;
         width: 5px;
-        background-image: linear-gradient(to right, rgba(var(--background-color), 0), var(--background-color));
+        background-image: linear-gradient(to right, rgba(var(--background-color-rgb), 0), var(--background-color));
       }
     }
   }
@@ -664,7 +664,7 @@ code {
 
 .qr-code {
   flex: 0 0 auto;
-  background: $simple-background-color;
+  background: var(--foreground-color);
   padding: 4px;
   margin: 0 10px 20px 0;
   box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
diff --git a/app/styles/polls.scss b/app/styles/polls.scss
index e330775d7..72746e862 100644
--- a/app/styles/polls.scss
+++ b/app/styles/polls.scss
@@ -51,8 +51,8 @@
       display: block;
       outline: 0;
       font-family: inherit;
-      background: $simple-background-color;
-      border: 1px solid darken($simple-background-color, 14%);
+      background: var(--foreground-color);
+      border: 1px solid var(--foreground-color);
       border-radius: 4px;
       padding: 6px 10px;
 
@@ -142,14 +142,14 @@
 }
 
 .compose-form__poll-wrapper {
-  border-top: 1px solid darken($simple-background-color, 8%);
+  border-top: 1px solid var(--foreground-color);
 
   ul {
     padding: 10px;
   }
 
   .poll__footer {
-    border-top: 1px solid darken($simple-background-color, 8%);
+    border-top: 1px solid var(--foreground-color);
     padding: 10px;
     margin: -5px 0 0 -5px;
 
@@ -190,7 +190,7 @@
     width: auto;
     outline: 0;
     font-family: inherit;
-    background-color: $simple-background-color;
+    background-color: var(--foreground-color);
     background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{rgba(#0482d8, 0.999)}'/></svg>");
     background-repeat: no-repeat;
     background-position: right 8px center;
@@ -202,7 +202,7 @@
   }
 
   .icon-button.disabled {
-    color: darken($simple-background-color, 14%);
+    color: var(--foreground-color);
   }
 }
 
diff --git a/app/styles/rtl.scss b/app/styles/rtl.scss
index b47035515..0322ce20b 100644
--- a/app/styles/rtl.scss
+++ b/app/styles/rtl.scss
@@ -238,7 +238,7 @@ body.rtl {
     &::after {
       right: auto;
       left: 0;
-      background-image: linear-gradient(to left, rgba(var(--background-color), 0), var(--background-color));
+      background-image: linear-gradient(to left, rgba(var(--background-color-rgb), 0), var(--background-color));
     }
   }
 
diff --git a/app/styles/themes.scss b/app/styles/themes.scss
index e905cb8d3..528da5fc4 100644
--- a/app/styles/themes.scss
+++ b/app/styles/themes.scss
@@ -16,13 +16,17 @@ body {
     calc(255 - var(--primary-text-color-g)),
     calc(255 - var(--primary-text-color-b))
   );
+  --background-color-rgb: var(--background-color-r), var(--background-color-g), var(--background-color-b);
+  --background-color: rgb(var(--background-color-rgb));
 }
 
 body.theme-mode-light {
   --primary-text-color-r: 0;
   --primary-text-color-g: 0;
   --primary-text-color-b: 0;
-  --background-color: #f2f2f2;
+  --background-color-r: 242;
+  --background-color-g: 242;
+  --background-color-b: 242;
   --foreground-color: #ffffff;
   --highlight-text-color: rgb(
     calc(var(--brand-color-r) - 25),
@@ -40,7 +44,9 @@ body.theme-mode-dark {
   --primary-text-color-r: 255;
   --primary-text-color-g: 255;
   --primary-text-color-b: 255;
-  --background-color: #333333;
+  --background-color-r: 51;
+  --background-color-g: 51;
+  --background-color-b: 51;
   --foreground-color: #222222;
   --highlight-text-color: rgb(
     calc(var(--brand-color-r) + 25),
diff --git a/app/styles/variables.scss b/app/styles/variables.scss
index 047828cc7..75f571b1d 100644
--- a/app/styles/variables.scss
+++ b/app/styles/variables.scss
@@ -21,7 +21,6 @@ $gold-star: #ca8f04 !default;        // Dark Goldenrod
 // Variables for defaults in UI
 $base-shadow-color: #000000 !default;
 $base-overlay-background: #000000 !default;
-$simple-background-color: #ffffff !default;
 $valid-value-color: $success-green !default;
 $error-value-color: $error-red !default;