Merge pull request #12 from Villhellm/theme

added custom theme options
Villhellm · Aug 17, 2020 · 33160f3 · 33160f3
2 parents 1612a95 + 49dc4e8
commit 33160f3
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -14,6 +14,7 @@ A simple analog clock card for Home Assistant. Colors are based on your current
 | show_city | boolean | **Optional** | Display the timezone city beneath the clock
 | caption | string | **Optional** | Caption to display under the clock. This will override both show_city and show_continent
 | display_date | string | **Optional** | Display the current Date object. See below for format options
+| theme | object | **Optional** | Change the theme colors manually. Theme options below
 
 
 ## Display date string format options
@@ -39,6 +40,16 @@ A simple analog clock card for Home Assistant. Colors are based on your current
 | DD | current day with leading zero eg: `06`
 | D | current day eg: `6`
 
+## Theme options
+All theme options can be set with a CSS valid color option.
+
+| Name | Type | Requirement | Description
+| ---- | ---- | ------- | -----------
+| background | string | **Optional** | Clock face background color
+| hands | string | **Optional** | Color of the hands and clock border (if `border` is not defined)
+| numbers | string | **Optional** | Color of the numbers
+| border | string | **Optional** | Color of the clock face border
+
 ## Example Configuration
 
 ```yaml
@@ -48,6 +59,11 @@ A simple analog clock card for Home Assistant. Colors are based on your current
   disable_seconds: true #OPTIONAL
   caption: "Corporate"
   display_date: "MM/DD/YY"
+  theme:
+    background: black
+    hands: orange
+    numbers: white
+    border: grey
 ```
 
 [Troubleshooting](https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins)
diff --git a/dist/clock-card.js b/dist/clock-card.js
@@ -49,6 +49,7 @@ class ClockCard extends HTMLElement {
     set hass(hass) {
         if (!this.content) {
             var config = this.config;
+            var theme = config.theme ? config.theme : {};
             var clock_size = config.size ? config.size : 300;
             const card = document.createElement('ha-card');
             this.content = document.createElement('div');
@@ -93,9 +94,9 @@ class ClockCard extends HTMLElement {
             function drawFace(ctx, radius) {
                 ctx.beginPath();
                 ctx.arc(0, 0, radius, 0, 2 * Math.PI);
-                ctx.fillStyle = getComputedStyle(document.documentElement).getPropertyValue('--primary-background-color');
+                ctx.fillStyle = theme.background ? theme.background : getComputedStyle(document.documentElement).getPropertyValue('--primary-background-color');
                 ctx.fill();
-                ctx.strokeStyle = getComputedStyle(document.documentElement).getPropertyValue('--accent-color');
+                ctx.strokeStyle = theme.border ? theme.border : theme.hands ? theme.hands : getComputedStyle(document.documentElement).getPropertyValue('--accent-color');
                 ctx.lineWidth = radius * 0.03;
                 ctx.stroke();
                 ctx.beginPath();
@@ -112,7 +113,7 @@ class ClockCard extends HTMLElement {
                 ctx.textAlign = "center";
                 for (num = 1; num < 13; num++) {
                     ang = num * Math.PI / 6;
-                    ctx.fillStyle = getComputedStyle(document.documentElement).getPropertyValue('--primary-text-color');
+                    ctx.fillStyle = theme.numbers ? theme.numbers : getComputedStyle(document.documentElement).getPropertyValue('--primary-text-color');
                     ctx.rotate(ang);
                     ctx.translate(0, -radius * 0.85);
                     ctx.rotate(-ang);
@@ -158,7 +159,7 @@ class ClockCard extends HTMLElement {
             }
 
             function drawHand(ctx, pos, length, width) {
-                ctx.strokeStyle = getComputedStyle(document.documentElement).getPropertyValue('--accent-color');
+                ctx.strokeStyle = theme.hands ? theme.hands : getComputedStyle(document.documentElement).getPropertyValue('--accent-color');
                 ctx.beginPath();
                 ctx.lineWidth = width;
                 ctx.lineCap = "round";