Support setting color: to override icon coloring. Fix #24

nervetattoo · Jan 30, 2020 · 0cb5b8c · 0cb5b8c
1 parent de854ae
commit 0cb5b8c
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -141,7 +141,22 @@ The card uses the following CSS variables:
 | --banner-card-heading-color-dark  | var(--primary-text-color) | The card measures your bg color to figure out to use dark or light text color |
 | --banner-card-heading-color-light | #fff                      | The card measures your bg color to figure out to use dark or light text color |
 
-## Example configurations
+## Examples
+
+_Using map_state to render a switch as a colored icon_
+
+```yaml
+- entity: switch.switch
+  name: Is it on?
+  domain: sensor
+  value: mdi:star
+  color: black
+  map_state:
+    "on":
+      color: yellow
+```
+
+_Basic examples_
 
 ```yaml
 type: custom:banner-card
@@ -160,7 +175,9 @@ entities:
 
 ```yaml
 type: custom:banner-card
-heading: "\U0001F6C1 Bathroom"
+heading:
+  - mdi:shower
+  - Bathroom
 background: "#B0C2ED"
 link: /lovelace/bathroom
 entities:

diff --git a/src/index.js b/src/index.js
@@ -245,10 +245,15 @@ class BannerCard extends LitElement {
     `;
   }
 
-  renderValue({ icon, value, image, action, click }, fallback) {
+  renderValue({ icon, value, image, action, click, color }, fallback) {
     if (icon || isIcon(value)) {
+      color = color ? `color: ${color}` : "";
       return html`
-        <ha-icon .icon="${icon || value}" @click=${click}></ha-icon>
+        <ha-icon
+          .icon="${icon || value}"
+          style="${color}"
+          @click=${click}
+        ></ha-icon>
       `;
     } else if (image === true) {
       return html`
@@ -262,9 +267,9 @@ class BannerCard extends LitElement {
     return fallback();
   }
 
-  renderDomainDefault({ value, unit, image, icon, name, size, onClick }) {
+  renderDomainDefault({ value, unit, name, size, onClick, ...data }) {
     const htmlContent = this.renderValue(
-      { icon, image, value, click: onClick },
+      { ...data, value, click: onClick },
       () =>
         html`
           ${value} ${unit}
@@ -278,9 +283,9 @@ class BannerCard extends LitElement {
     `;
   }
 
-  renderCustom({ value, unit, action, image, icon, name, size, onClick }) {
+  renderCustom({ value, unit, action, name, size, onClick, ...data }) {
     const htmlContent = this.renderValue(
-      { icon, image, value, click: action },
+      { ...data, value, unit, click: action },
       () => html`
         <mwc-button ?dense=${true} @click=${action}>
           ${value} ${unit}