Support setting the heading color as part of the config, fallback wil…

…l be automatic color discovery
nervetattoo · Aug 19, 2019 · 5866f29 · WhistleMaster · Aug 19, 2019 · nervetattoo
1 parent 14b140e
commit 5866f29
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -24,6 +24,7 @@ resources:
 | -------------------- | -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
 | heading              | _string_             | The heading to display. Remember to escape                                                                                                                                                                  | `heading: "\U0001F6CB Living room"`                                                   |
 | background           | _string_             | A valid CSS color to use as the background                                                                                                                                                                  | `background: "#EDE7B0"`, `background: red`                                            |
+| color                | _string_             | A valid CSS color to use as the text color                                                                                                                                                                  | `color: "#EDE7B0"`, `color: red`                                                      |
 | link                 | _string_             | A link, to a different view in HA for example                                                                                                                                                               | `link: /lovelace/living_room`                                                         |
 | entities             | _array_              | An array of entities to display for glances. Either as strings or as objects                                                                                                                                | `entities: [binary_sensor.remote_ui]`                                                 |
 | row_size             | _number_             | Configure number of "entity cells" in the grid before it wraps to a new line. 3 is the default and what looks best _in most cases_                                                                          | `row_size: 4`                                                                         |

diff --git a/src/index.js b/src/index.js
@@ -19,6 +19,7 @@ class BannerCard extends LitElement {
   static get properties() {
     return {
       config: Object,
+      oclor: String,
       gridSizes: Array,
       entities: Array,
       entityValues: Array,
@@ -46,6 +47,14 @@ class BannerCard extends LitElement {
     this.entities = (config.entities || []).map(parseEntity);
     this.config = config;
 
+    this.color =
+      config.color ||
+      readableColor(
+        config.background,
+        "var(--bc-heading-color-light)",
+        "var(--bc-heading-color-dark)"
+      );
+
     if (typeof config.row_size !== "undefined") {
       if (config.row_size < 1) {
         throw new Error("row_size must be at least 1");
@@ -140,15 +149,9 @@ class BannerCard extends LitElement {
       return null;
     }
 
-    const color = readableColor(
-      this.config.background,
-      "var(--bc-heading-color-light)",
-      "var(--bc-heading-color-dark)"
-    );
-
     const onClick = () => this.config.link && this.navigate(this.config.link);
     return html`
-      <h2 class="heading" style="color: ${color};" @click=${onClick}>
+      <h2 class="heading" @click=${onClick} style="color: ${this.color};">
         ${this.config.heading}
       </h2>
     `;