diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
index f96f375c0..a67c23f99 100644
--- a/app/assets/stylesheets/admin.scss
+++ b/app/assets/stylesheets/admin.scss
@@ -711,7 +711,7 @@ table {
 // ---------------
 
 .markdown-editor {
-  background-color: #fff;
+  background-color: $body-background;
 
   .markdown-area,
   .markdown-preview {
diff --git a/app/assets/stylesheets/autocomplete_overrides.scss b/app/assets/stylesheets/autocomplete_overrides.scss
index a80be864c..25c759d8c 100644
--- a/app/assets/stylesheets/autocomplete_overrides.scss
+++ b/app/assets/stylesheets/autocomplete_overrides.scss
@@ -14,7 +14,7 @@
   list-style: none;
   padding: $line-height / 4 $line-height / 3;
   display: block;
-  background: #fff;
+  background: $body-background;
   border: 1px solid $border;
   font-size: $small-font-size;
 
diff --git a/app/assets/stylesheets/budgets/phases.scss b/app/assets/stylesheets/budgets/phases.scss
index 2cf816322..be9d2f9b0 100644
--- a/app/assets/stylesheets/budgets/phases.scss
+++ b/app/assets/stylesheets/budgets/phases.scss
@@ -74,7 +74,7 @@
     }
 
     a {
-      background: $white;
+      background: $body-background;
       color: inherit;
       height: 100%;
       padding: $line-height $line-height * 1.5;
diff --git a/app/assets/stylesheets/dashboard.scss b/app/assets/stylesheets/dashboard.scss
index ca913b0e7..56d2268bc 100644
--- a/app/assets/stylesheets/dashboard.scss
+++ b/app/assets/stylesheets/dashboard.scss
@@ -234,7 +234,7 @@
   position: relative;
 
   &::before {
-    background: #fff;
+    background: $body-background;
     border: 1px solid $border;
     border-radius: rem-calc(36);
     content: "\77";
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 5dc90f53e..3a5341170 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -569,7 +569,7 @@ body > header,
 
       @include breakpoint(medium) {
         @include brand-text;
-        background: #fff;
+        background: $body-background;
         text-align: center;
       }
     }
@@ -585,7 +585,7 @@ body > header,
   .menu {
 
     &.is-dropdown-submenu {
-      background: #fff;
+      background: $body-background;
       color: $text;
       margin: 0;
       margin-top: rem-calc(-12);
@@ -685,7 +685,7 @@ body > header,
 .subnavigation {
 
   @include breakpoint(medium) {
-    background: #fff;
+    background: $body-background;
     color: $text;
     padding-bottom: 0;
   }
@@ -966,7 +966,7 @@ footer {
   text-align: center;
 
   span {
-    background: #fff;
+    background: $body-background;
     box-decoration-break: clone;
     font-weight: bold;
     padding: 0 $line-height / 2;
@@ -991,7 +991,7 @@ footer {
   select {
 
     option {
-      background: #fff;
+      background: $body-background;
       color: $text;
       border: 0;
       outline: none;
@@ -1352,7 +1352,7 @@ form {
   }
 
   &::before {
-    background: #fff;
+    background: $body-background;
     color: $brand;
     content: "\4d";
     font-family: "icons" !important;
@@ -1773,7 +1773,7 @@ table {
     position: relative;
 
     .icon-letter {
-      background: #fff;
+      background: $body-background;
       color: $color-info;
       font-size: rem-calc(24);
       margin-left: -27px;
@@ -1788,7 +1788,7 @@ table {
 // ------------
 
 .comments {
-  background: #fff;
+  background: $body-background;
   background-repeat: repeat-x;
   padding-bottom: $line-height * 4;
 
@@ -2266,7 +2266,7 @@ table {
   }
 
   .recommendation {
-    background: #fff;
+    background: $body-background;
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
     display: block;
     margin-bottom: $line-height / 4;
@@ -2688,9 +2688,9 @@ table {
     }
 
     span {
-      background: #fff;
+      background: $body-background;
       border-radius: rem-calc(4);
-      color: #000;
+      color: $text;
       display: inline-block;
       font-size: $small-font-size;
       font-weight: bold;
diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss
index 9cbebc07b..66e93edf1 100644
--- a/app/assets/stylesheets/participation.scss
+++ b/app/assets/stylesheets/participation.scss
@@ -539,7 +539,7 @@
 .fixed-mobile-content {
 
   @include breakpoint(medium down) {
-    background: #fff;
+    background: $body-background;
     margin-bottom: rem-calc(-1) !important;
     padding-top: $line-height / 2;
   }
@@ -598,7 +598,7 @@
 }
 
 %panel {
-  background: #fff;
+  background: $body-background;
   border: 1px solid;
   border-color: #e5e6e9 #dfe0e4 #d0d1d5;
   border-radius: 0;
@@ -1086,7 +1086,7 @@
       margin-top: 0;
 
       &:hover {
-        background: #fff;
+        background: $body-background;
         color: $text;
       }
     }
@@ -1202,7 +1202,7 @@
 }
 
 .jumbo-budget {
-  background: $white;
+  background: $body-background;
   border-bottom: 2px solid $border;
 
   &.budget-heading {
@@ -1405,7 +1405,7 @@
     transition: height 0.3s;
 
     &.is-fixed {
-      background: $white;
+      background: $body-background;
       border-bottom: 2px solid $border;
       height: auto;
       left: 0;
@@ -1631,9 +1631,9 @@
 }
 
 .zoom-link {
-  background: #fff;
+  background: $body-background;
   border-radius: rem-calc(48);
-  color: #000;
+  color: $text;
   font-size: rem-calc(24);
   font-weight: bold;
   height: rem-calc(48);