diff --git a/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html b/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html
index 96b06282f1..cb854b2ac5 100644
--- a/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html
+++ b/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html
@@ -250,7 +250,7 @@ limitations under the License.
           display: block;
         }
         .row.selected {
-          background-color: #fff;
+          background-color: var(--view-background-color);
         }
         .stats {
           display: none;
diff --git a/polygerrit-ui/app/elements/change/gr-included-in-dialog/gr-included-in-dialog.html b/polygerrit-ui/app/elements/change/gr-included-in-dialog/gr-included-in-dialog.html
index 77f95ec0fc..85140615c3 100644
--- a/polygerrit-ui/app/elements/change/gr-included-in-dialog/gr-included-in-dialog.html
+++ b/polygerrit-ui/app/elements/change/gr-included-in-dialog/gr-included-in-dialog.html
@@ -29,7 +29,7 @@ limitations under the License.
         padding: 4.5em 1em 1em 1em;
       }
       header {
-        background: #fff;
+        background: var(--view-background-color);
         border-bottom: 1px solid var(--border-color);
         left: 0;
         padding: 1em;
diff --git a/polygerrit-ui/app/elements/change/gr-messages-list/gr-messages-list.html b/polygerrit-ui/app/elements/change/gr-messages-list/gr-messages-list.html
index 761e8eefc2..ec917159d0 100644
--- a/polygerrit-ui/app/elements/change/gr-messages-list/gr-messages-list.html
+++ b/polygerrit-ui/app/elements/change/gr-messages-list/gr-messages-list.html
@@ -48,7 +48,7 @@ limitations under the License.
       }
       @keyframes fadeOut {
         0% { background-color: #fff9c4; }
-        100% { background-color: #fff; }
+        100% { background-color: var(--view-background-color); }
       }
       #messageControlsContainer {
         align-items: center;
diff --git a/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.html b/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.html
index bdf5d3ba91..595ad335a0 100644
--- a/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.html
+++ b/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.html
@@ -121,7 +121,7 @@ limitations under the License.
         text-decoration: none;
       }
       .dropdown-content {
-        background-color: #fff;
+        background-color: var(--view-background-color);
         box-shadow: 0 1px 5px rgba(0, 0, 0, .3);
       }
       @media screen and (max-width: 50em) {
diff --git a/polygerrit-ui/app/elements/core/gr-search-bar/gr-search-bar.html b/polygerrit-ui/app/elements/core/gr-search-bar/gr-search-bar.html
index 1117bacef5..39b2f7ee5e 100644
--- a/polygerrit-ui/app/elements/core/gr-search-bar/gr-search-bar.html
+++ b/polygerrit-ui/app/elements/core/gr-search-bar/gr-search-bar.html
@@ -28,7 +28,7 @@ limitations under the License.
         display: flex;
       }
       gr-autocomplete {
-        background-color: white;
+        background-color: var(--view-background-color);
         border: 1px solid var(--border-color);
         border-radius: 2px 0 0 2px;
         flex: 1;
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.html b/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.html
index 839d3f6011..e20a7650e4 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.html
@@ -57,7 +57,7 @@ limitations under the License.
         }
       }
       gr-fixed-panel {
-        background-color: #fff;
+        background-color: var(--view-background-color);
         border-bottom: 1px solid var(--border-color);
         z-index: 1;
       }
diff --git a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
index 008a85b5e9..f45b2d35e4 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
@@ -87,7 +87,7 @@ limitations under the License.
       }
       .blank,
       .content {
-        background-color: #fff;
+        background-color: var(--view-background-color);
       }
       .full-width {
         width: 100%;
diff --git a/polygerrit-ui/app/elements/gr-app.html b/polygerrit-ui/app/elements/gr-app.html
index 62f802b953..7cfb3b0f2f 100644
--- a/polygerrit-ui/app/elements/gr-app.html
+++ b/polygerrit-ui/app/elements/gr-app.html
@@ -64,9 +64,10 @@ limitations under the License.
   <template>
     <style include="shared-styles">
       :host {
+        background-color: var(--view-background-color);
         display: flex;
-        min-height: 100%;
         flex-direction: column;
+        min-height: 100%;
       }
       gr-fixed-panel {
         /**
diff --git a/polygerrit-ui/app/elements/shared/gr-alert/gr-alert.html b/polygerrit-ui/app/elements/shared/gr-alert/gr-alert.html
index 0e6a000d81..b47d5a43d6 100644
--- a/polygerrit-ui/app/elements/shared/gr-alert/gr-alert.html
+++ b/polygerrit-ui/app/elements/shared/gr-alert/gr-alert.html
@@ -33,7 +33,7 @@ limitations under the License.
         bottom: 1.25rem;
         border-radius: 3px;
         box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
-        color: #fff;
+        color: var(--view-background-color);
         left: 1.25rem;
         padding: 1em 1.5em;
         position: fixed;
diff --git a/polygerrit-ui/app/elements/shared/gr-autocomplete-dropdown/gr-autocomplete-dropdown.html b/polygerrit-ui/app/elements/shared/gr-autocomplete-dropdown/gr-autocomplete-dropdown.html
index ef9ed4e98b..5179783c63 100644
--- a/polygerrit-ui/app/elements/shared/gr-autocomplete-dropdown/gr-autocomplete-dropdown.html
+++ b/polygerrit-ui/app/elements/shared/gr-autocomplete-dropdown/gr-autocomplete-dropdown.html
@@ -46,7 +46,7 @@ limitations under the License.
         background-color: #eee;
       }
       .dropdown-content {
-        background: #fff;
+        background: var(--view-background-color);
         box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
       }
     </style>
diff --git a/polygerrit-ui/app/elements/shared/gr-button/gr-button.html b/polygerrit-ui/app/elements/shared/gr-button/gr-button.html
index 6dd197d8de..9757af17a5 100644
--- a/polygerrit-ui/app/elements/shared/gr-button/gr-button.html
+++ b/polygerrit-ui/app/elements/shared/gr-button/gr-button.html
@@ -27,7 +27,7 @@ limitations under the License.
     <style include="shared-styles">
       /* general styles for all buttons */
       :host {
-        --background-color: var(--gr-button-background, #fff);
+        --background-color: var(--gr-button-background, var(--view-background-color));
         --button-color: var(--gr-button-color, var(--color-link));
         display: inline-block;
         font-family: var(--font-family-bold);
@@ -66,7 +66,7 @@ limitations under the License.
       :host([primary][raised]),
       :host([secondary][raised]) {
         --background-color: var(--color-link);
-        --button-color: #fff;
+        --button-color: var(--view-background-color);
       }
 
       /* Keep below color definition for primary/secondary so that this takes
diff --git a/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list.html b/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list.html
index b855045678..7f79196b5a 100644
--- a/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list.html
+++ b/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list.html
@@ -43,7 +43,7 @@ limitations under the License.
         padding: 0;
       }
       .dropdown-content {
-        background-color: #fff;
+        background-color: var(--view-background-color);
         box-shadow: 0 1px 5px rgba(0, 0, 0, .3);
         max-height: 70vh;
         margin-top: 2em;
diff --git a/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.html b/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.html
index 3f8d93ee3c..46fe0466b3 100644
--- a/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.html
+++ b/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.html
@@ -36,7 +36,7 @@ limitations under the License.
         width: 100%;
       }
       .dropdown-content {
-        background-color: #fff;
+        background-color: var(--view-background-color);
         box-shadow: 0 1px 5px rgba(0, 0, 0, .3);
       }
       gr-button {
@@ -75,7 +75,7 @@ limitations under the License.
       }
       li .itemAction:not(.disabled):hover {
         background-color: #6B82D6;
-        color: #fff;
+        color: var(--view-background-color);
       }
       li:focus,
       li.selected {
diff --git a/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.html b/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.html
index 8addfb6ff9..6d3c864cea 100644
--- a/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.html
+++ b/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.html
@@ -55,7 +55,7 @@ limitations under the License.
         box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
       }
       .inputContainer {
-        background-color: #fff;
+        background-color: var(--view-background-color);
         padding: .8em;
         @apply --input-style;
       }
diff --git a/polygerrit-ui/app/elements/shared/gr-overlay/gr-overlay.html b/polygerrit-ui/app/elements/shared/gr-overlay/gr-overlay.html
index e9bfb6d27d..ea940869bf 100644
--- a/polygerrit-ui/app/elements/shared/gr-overlay/gr-overlay.html
+++ b/polygerrit-ui/app/elements/shared/gr-overlay/gr-overlay.html
@@ -23,7 +23,7 @@ limitations under the License.
   <template>
     <style include="shared-styles">
       :host {
-        background: #fff;
+        background: var(--view-background-color);
         box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
       }
 
diff --git a/polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip.html b/polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip.html
index 12a8f1ca8c..ac9226cf48 100644
--- a/polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip.html
+++ b/polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip.html
@@ -27,7 +27,7 @@ limitations under the License.
 
         background-color: var(--tooltip-background-color, #333);
         box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
-        color: #fff;
+        color: var(--view-background-color);
         font-size: var(--font-size-small);
         position: absolute;
         z-index: 1000;
diff --git a/polygerrit-ui/app/styles/gr-page-nav-styles.html b/polygerrit-ui/app/styles/gr-page-nav-styles.html
index 8d8659e12f..b1b51496ba 100644
--- a/polygerrit-ui/app/styles/gr-page-nav-styles.html
+++ b/polygerrit-ui/app/styles/gr-page-nav-styles.html
@@ -49,7 +49,7 @@ limitations under the License.
         margin: .4em 0;
       }
       .navStyles .selected {
-        background-color: #fff;
+        background-color: var(--view-background-color);
         border-bottom: 1px dotted #808080;
         border-top: 1px dotted #808080;
         font-family: var(--font-family-bold);