Use view-background-color throughout the app

Change-Id: Ib74162411afde7cdb2121f5e7b78e81a97341bfd

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;

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;

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;

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) {

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;

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;
       }

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%;

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 {
         /**

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;

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>

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

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;

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 {

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;
       }

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;
       }
 

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;

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);