From 92f6482447baf7d9aeb9a8974104cffaefb1705c Mon Sep 17 00:00:00 2001
From: Cultus Mechanicus <cultusmechanicus@gmail.com>
Date: Wed, 29 May 2019 13:57:58 +0100
Subject: [PATCH 1/2]  Made Lost and Travelling entirely optional (so you can
 remove Travelling if your tracking doesn't report travelling for instance)
 Switched colors to use standard Theme variables, seems to play nicely with
 all the community themes and Clear + ClearNight

---
 weasley-card.js | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/weasley-card.js b/weasley-card.js
index 279094c..4fbf239 100644
--- a/weasley-card.js
+++ b/weasley-card.js
@@ -17,6 +17,13 @@ class WeasleyClockCard extends HTMLElement {
         }
       }
     }
+    if (this.config.lost){
+      this.zones.push(this.config.lost);
+    }
+    if (this.config.travelling){
+      this.zones.push(this.config.travelling);
+    }
+
     for (num = 0; num < this.config.wizards.length; num++){
       if (!this._hass.states[this.config.wizards[num].entity])
         throw new Error("Unable to find state for entity " + this.config.wizards[num].entity);
@@ -37,8 +44,8 @@ class WeasleyClockCard extends HTMLElement {
         this.zones.push(stateStr);
       }
     }
-    this.zones.push(this.travellingState);
-    this.zones.push(this.lostState);
+//    this.zones.push(this.travellingState);
+//    this.zones.push(this.lostState);
     if (!this.canvas) {
       const card = document.createElement('ha-card');
       //card.header = 'Wizard Clock';
@@ -133,18 +140,18 @@ class WeasleyClockCard extends HTMLElement {
 
     ctx.beginPath();
     ctx.arc(0, 0, radius, 0, 2*Math.PI);
-    ctx.fillStyle = '#f2e6d9';
+    ctx.fillStyle = getComputedStyle(document.documentElement).getPropertyValue('--secondary-background-color');
     ctx.fill();
 
-    ctx.fillStyle = '#333';
-    ctx.lineWidth = radius*0.06;
+    ctx.strokeStyle = getComputedStyle(document.documentElement).getPropertyValue('--primary-background-color:');
+    ctx.lineWidth = radius*0.02;
     ctx.stroke();
   }
 
   drawHinge(ctx, radius) {
     ctx.beginPath();
     ctx.arc(0, 0, radius*0.05, 0, 2*Math.PI);
-    ctx.fillStyle = '#333';
+    ctx.fillStyle = getComputedStyle(document.documentElement).getPropertyValue('--primary-color');
     ctx.shadowColor = "#0008";
     ctx.shadowBlur = 10;
     ctx.shadowOffsetX = 5;
@@ -161,6 +168,7 @@ class WeasleyClockCard extends HTMLElement {
       ctx.font = radius*0.15*this.fontScale + "px " + this.selectedFont;
       ctx.textBaseline="middle";
       ctx.textAlign="center";
+      ctx.fillStyle = getComputedStyle(document.documentElement).getPropertyValue('--primary-text-color');
       for(num= 0; num < locations.length; num++){
           ang = num * Math.PI / locations.length * 2;
           // rotate to center of drawing position
@@ -274,7 +282,7 @@ class WeasleyClockCard extends HTMLElement {
   drawHand(ctx, pos, length, width, wizard) {
     ctx.beginPath();
     ctx.lineWidth = width;
-    ctx.fillStyle = '#333';
+    ctx.fillStyle = getComputedStyle(document.documentElement).getPropertyValue('--primary-color');
     ctx.shadowColor = "#0008";
     ctx.shadowBlur = 10;
     ctx.shadowOffsetX = 5;

From a9f2f953263559baee84f0c59ca1755aa9aae108 Mon Sep 17 00:00:00 2001
From: Cultus Mechanicus <cultusmechanicus@gmail.com>
Date: Thu, 30 May 2019 11:28:18 +0100
Subject: [PATCH 2/2] Themed the text on the hands too

---
 weasley-card.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/weasley-card.js b/weasley-card.js
index 4fbf239..e647de8 100644
--- a/weasley-card.js
+++ b/weasley-card.js
@@ -297,7 +297,7 @@ class WeasleyClockCard extends HTMLElement {
     ctx.fill();
 
     ctx.font = width*this.fontScale + "px " + this.selectedFont;
-    ctx.fillStyle = 'white';
+    ctx.fillStyle = getComputedStyle(document.documentElement).getPropertyValue('--text-dark-color');
     ctx.translate(0, -length/2);
     ctx.rotate(Math.PI/2)
     if (pos < Math.PI && pos >= 0)