Tweak colors

panels/config/ha-panel-config.html

@@ -11,10 +11,6 @@
 <dom-module id="ha-panel-config">
   <template>
     <style include="iron-flex ha-style">
-      app-header-layout {
-        background-color: #fafafa;
-      }
-
       .content {
         padding-bottom: 32px;
       }

panels/dev-event/ha-panel-dev-event.html

@@ -20,11 +20,11 @@
     <style is="custom-style" include="ha-style iron-flex iron-positioning"></style>
     <style>
       :host {
-        background-color: white;
         -ms-user-select: initial;
         -webkit-user-select: initial;
         -moz-user-select: initial;
       }
+
       .content {
         @apply(--paper-font-body1);
         padding: 16px;

panels/dev-info/ha-panel-dev-info.html

@@ -13,7 +13,6 @@
   <template>
     <style include="iron-positioning ha-style">
       :host {
-        background-color: white;
         -ms-user-select: initial;
         -webkit-user-select: initial;
         -moz-user-select: initial;

panels/dev-service/ha-panel-dev-service.html

@@ -17,7 +17,6 @@
   <template>
     <style include='ha-style'>
       :host {
-        background-color: white;
         -ms-user-select: initial;
         -webkit-user-select: initial;
         -moz-user-select: initial;

panels/dev-state/ha-panel-dev-state.html

@@ -16,7 +16,6 @@
   <template>
     <style include="ha-style">
       :host {
-        background-color: white;
         -ms-user-select: initial;
         -webkit-user-select: initial;
         -moz-user-select: initial;

panels/dev-template/ha-panel-dev-template.html

@@ -15,7 +15,6 @@
     <style is="custom-style" include="ha-style iron-flex iron-positioning"></style>
     <style>
       :host {
-        background-color: white;
         -ms-user-select: initial;
         -webkit-user-select: initial;
         -moz-user-select: initial;

src/components/ha-sidebar.html

@@ -15,7 +15,7 @@
     <style include="iron-flex iron-flex-alignment iron-positioning">
       :host {
         --sidebar-text: {
-          opacity: var(--dark-primary-opacity);
+          color: var(--primary-text-color);
           font-weight: 500;
           font-size: 14px;
         };
@@ -24,12 +24,14 @@
         -ms-user-select: none;
         -webkit-user-select: none;
         -moz-user-select: none;
+        border-right: 1px solid var(--divider-color);
       }
 
       app-toolbar {
         font-weight: 400;
-        opacity: var(--dark-primary-opacity);
+        color: var(--primary-text-color);
-        border-bottom: 1px solid #e0e0e0;
+        border-bottom: 1px solid var(--divider-color);
+        background-color: var(--primary-background-color);
       }
 
       paper-menu {
@@ -48,7 +50,7 @@
 
         --paper-item-selected: {
           color: var(--default-primary-color);
-          background-color: #e8e8e8;
+          background-color: var(--paper-grey-200);
           opacity: 1;
         };
       }

src/resources/ha-style.html

@@ -4,17 +4,21 @@
   html {
     font-size: 14px;
 
+    /* for paper-toggle-button */
+    --paper-grey-50: #fafafa;
+    --paper-grey-200: #eeeeee;
+
     --dark-primary-color: #0288D1;
     --default-primary-color: #03A9F4;
     --primary-color: #03A9F4;
     --light-primary-color: #B3E5FC;
     --text-primary-color: #ffffff;
     --accent-color: #FF9800;
-    --primary-background-color: #ffffff;
+    --primary-background-color: var(--paper-grey-50);
     --primary-text-color: #212121;
     --secondary-text-color: #727272;
     --disabled-text-color: #bdbdbd;
-    --divider-color: #B6B6B6;
+    --divider-color: rgba(0, 0, 0, .12);
 
     --paper-toggle-button-checked-ink-color: #039be5;
     --paper-toggle-button-checked-button-color: #039be5;
@@ -27,6 +31,9 @@
     --paper-slider-secondary-color: var(--light-primary-color);
     --paper-slider-container-color: var(--divider-color);
 
+    --paper-card-background-color: #FFF;
+    --paper-menu-background-color: #FFF;
+
     /* Taken from paper-styles/color.html */
     /* for paper-spinner */
     --google-red-500: #db4437;
@@ -34,9 +41,6 @@
     --google-green-500: #0f9d58;
     --google-yellow-500: #f4b400;
 
-    /* for paper-toggle-button */
-    --paper-grey-50: #fafafa;
-
     /* for paper-slider */
     --paper-green-400: #66bb6a;
     --paper-blue-400: #42a5f5;
@@ -63,6 +67,10 @@
         @apply(--paper-font-body1);
       }
 
+      app-header-layout {
+        background-color: var(--primary-background-color);
+      }
+
       app-header, app-toolbar {
         background-color: var(--primary-color);
         font-weight: 400;