Variable colours (cards, backgrounds, sidebar, ...) (#361)

* Update partial-cards.html

* Update ha-card.html

* Update ha-card.html

* Update ha-style.html

* Update partial-cards.html

* Update ha-sidebar.html

* Update ha-panel-dev-service.html

* Update ha-media_player-card.html

* Update ha-media_player-card.html

* Update partial-cards.html

* Update ha-style.html

* Update ha-style.html

* Update ha-state-label-badge.html

* Update ha-style.html

* Update ha-panel-dev-service.html

* Update ha-media_player-card.html

* Update ha-state-label-badge.html

* Update ha-card.html

* Update ha-style.html

* Update ha-style.html

* Update partial-cards.html

* Update ha-style.html

* Update ha-style.html

* Update ha-panel-dev-service.html

* Update ha-panel-dev-state.html

* Update state-badge.html

* Update ha-label-badge.html

* Update home-assistant-main.html

* Update ha-style.html

* Update ha-label-badge.html

* Update ha-label-badge.html

* Update ha-style.html

* Update ha-panel-dev-state.html

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

@@ -48,8 +48,12 @@
         vertical-align: top;
       }
 
+      .attributes tr:nth-child(odd) {
+        background-color: var(--table-row-background-color,#eee)
+      }
+
       .attributes tr:nth-child(even) {
-        background-color: #eee;
+        background-color: var(--table-row-alternative-background-color,#eee)
       }
 
       .attributes td:nth-child(3) {

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

@@ -33,8 +33,12 @@
         vertical-align: top;
       }
 
+      .entities tr:nth-child(odd) {
+        background-color: var(--table-row-background-color, #fff)
+      }
+
       .entities tr:nth-child(even) {
-        background-color: #eee;
+        background-color: var(--table-row-alternative-background-color, #eee)
       }
 
       .entities td:nth-child(3) {

src/cards/ha-media_player-card.html

@@ -112,7 +112,7 @@
         padding: 8px;
         border-bottom-left-radius: 2px;
         border-bottom-right-radius: 2px;
-        background-color: white;
+        background-color: var(--paper-card-background-color, white);
       }
 
       .controls paper-icon-button {

src/components/entity/ha-state-label-badge.html

@@ -10,19 +10,27 @@
       }
 
       ha-label-badge {
-        --ha-label-badge-color: rgb(223, 76, 30);
+        --ha-label-badge-color: var(--label-badge-red, #DF4C1E);
+      }
+
+      .red {
+        --ha-label-badge-color: var(--label-badge-red, #DF4C1E);
       }
 
       .blue {
-        --ha-label-badge-color: #039be5;
+        --ha-label-badge-color: var(--label-badge-blue, #039be5);
       }
 
       .green {
-        --ha-label-badge-color: #0DA035;
+        --ha-label-badge-color: var(--label-badge-green, #0DA035);
+      }
+
+      .yellow {
+        --ha-label-badge-color: var(--label-badge-yellow, #f4b400);
       }
 
       .grey {
-        --ha-label-badge-color: var(--paper-grey-500);
+        --ha-label-badge-color: var(--label-badge-grey, --paper-grey-500);
       }
     </style>
 

src/components/entity/state-badge.html

@@ -9,7 +9,7 @@
       position: relative;
       display: inline-block;
       width: 40px;
-      color: #44739E;
+      color: var(--paper-item-icon-color, #44739e);
       border-radius: 50%;
       height: 40px;
       text-align: center;
@@ -26,7 +26,7 @@
     ha-state-icon[data-domain=switch][data-state=on],
     ha-state-icon[data-domain=binary_sensor][data-state=on],
     ha-state-icon[data-domain=sun][data-state=above_horizon] {
-      color: #FDD835;
+      color: var(--paper-item-icon-active-color, #FDD835);
     }
 
     /* Color the icon if unavailable */

src/components/ha-card.html

@@ -9,7 +9,7 @@
         border-radius: 2px;
         transition: all 0.30s ease-out;
 
-        background-color: white;
+        background-color: var(--paper-card-background-color, white);
       }
       .header {
         @apply(--paper-font-headline);

src/components/ha-label-badge.html

@@ -20,10 +20,10 @@
       font-size: var(--ha-label-badge-font-size, 1.5em);
       border-radius: 50%;
       border: 0.1em solid var(--ha-label-badge-color, --primary-color);
-      color: rgb(76, 76, 76);
+      color: var(--label-badge-text-color, rgb(76, 76, 76));
 
       white-space: nowrap;
-      background-color: white;
+      background-color: var(--label-badge-background-color, white);
       background-size: cover;
       transition: border .3s ease-in-out;
     }

src/components/ha-sidebar.html

@@ -25,6 +25,7 @@
         -webkit-user-select: none;
         -moz-user-select: none;
         border-right: 1px solid var(--divider-color);
+        background: var(--paper-listbox-background-color,var(--primary-background-color));
       }
 
       app-toolbar {

src/layouts/home-assistant-main.html

@@ -18,6 +18,11 @@
 
 <dom-module id='home-assistant-main'>
   <template>
+    <style>
+      :host {
+	      color: var(--primary-text-color);
+      }
+    </style>
     <more-info-dialog hass='[[hass]]'></more-info-dialog>
     <ha-url-sync hass='[[hass]]'></ha-url-sync>
     <app-location route="{{route}}"></app-location>

src/layouts/partial-cards.html

@@ -27,7 +27,7 @@
       }
 
       app-header-layout {
-        background-color: #E5E5E5;
+        background-color: var(--secondary-background-color, #E5E5E5);
       }
 
       paper-tabs {

src/resources/ha-style.html

@@ -9,17 +9,24 @@
     --paper-grey-50: #fafafa;
     --paper-grey-200: #eeeeee;
 
+    --paper-item-icon-color: #44739e;
+    --paper-item-icon-active-color: #FDD835;
+
     --dark-primary-color: #0288D1;
     --primary-color: #03A9F4;
     --light-primary-color: #B3E5FC;
     --text-primary-color: #ffffff;
     --accent-color: #FF9800;
     --primary-background-color: var(--paper-grey-50);
+    --secondary-background-color: #E5E5E5;
     --primary-text-color: #212121;
     --secondary-text-color: #727272;
     --disabled-text-color: #bdbdbd;
     --divider-color: rgba(0, 0, 0, .12);
 
+    --table-row-background-color: transparant;
+    --table-row-alternative-background-color: #eee;
+
     --paper-toggle-button-checked-ink-color: #039be5;
     --paper-toggle-button-checked-button-color: #039be5;
     --paper-toggle-button-checked-bar-color: #039be5;
@@ -34,6 +41,15 @@
     --paper-card-background-color: #FFF;
     --paper-listbox-background-color: #FFF;
 
+    /* for label-badge */
+    --label-badge-background-color: white;
+    --label-badge-text-color: rgb(76, 76, 76);
+    --label-badge-red: #DF4C1E;
+    --label-badge-blue: #039be5;
+    --label-badge-green: #0DA035;
+    --label-badge-yellow: #f4b400;
+    --label-badge-grey: var(--paper-grey-500);
+
     /* Taken from paper-styles/color.html */
     /* for paper-spinner */
     --google-red-500: #db4437;