Merge pull request #39 from SNoof85/SNoof85-patch-6

Support icon_color
SNoof85 · May 31, 2021 · 0b11bd2 · 0b11bd2
2 parents 5f0915f + ec4e138
commit 0b11bd2
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -33,6 +33,7 @@ Add it as a custom card to your lovelace : `'custom:tempometer-gauge-card'`.
 | `icon1` | string | Icon on left side in custom style. |
 | `icon2` | string | Icon on center in custom style. |
 | `icon3` | string | Icon on right side in custom style. |
+| `icon_color` | string | Icon Color (Default var(--paper-item-icon-color))
 | `severity` | [severity object](#severity-object) | Severity map to change the gauge color. |
 | `decimals` | number | Decimal precision of entity value. |
 

diff --git a/tempometer-gauge-card.js b/tempometer-gauge-card.js
@@ -1,4 +1,4 @@
-console.info(`%c TEMPOMETER-CARD \n%c      v1.3       `, 'color: orange; font-weight: bold; background: black', 'color: white; font-weight: bold; background: dimgray');
+console.info(`%c TEMPOMETER-CARD \n%c      v1.31      `, 'color: orange; font-weight: bold; background: black', 'color: white; font-weight: bold; background: dimgray');
 class TempometerGaugeCard extends HTMLElement {
   constructor() {
     super();
@@ -40,6 +40,12 @@ class TempometerGaugeCard extends HTMLElement {
       cardConfig.entity_max = entityMaxParts.entity;
       if (entityMaxParts.attribute) cardConfig.maxAttribute = entityMaxParts.attribute;
     }
+
+    if (config.icon_color !== undefined) {
+        var icon_color = config.icon_color;
+    } else {
+        var icon_color = "var(--paper-item-icon-color)";
+    }
 
     let card_style = cardConfig.style;
     const card = document.createElement('ha-card');
@@ -124,21 +130,21 @@ class TempometerGaugeCard extends HTMLElement {
       .icon1{
             width: 18px;
             height: 18px;
-            color: var(--paper-item-icon-color);
+            color: ${icon_color};
             float: left;
             padding-top: 3em;
         }
       .icon2{
             width: 18px;
             height: 18px;
-            color: var(--paper-item-icon-color);
+            color: ${icon_color};
             padding-top: .5em;
             padding-right: 9px;
         }
       .icon3{
             width: 18px;
             height: 18px;
-            color: var(--paper-item-icon-color);
+            color: ${icon_color};
             float: right;
             padding-top: 3em;
         }