From b617844317ef2cbb7adb2aac18cf811383385cc5 Mon Sep 17 00:00:00 2001
From: David Corry <dmcorry@gmail.com>
Date: Sun, 3 May 2020 21:22:06 -0700
Subject: [PATCH] Adjust chart colors, and update them automatically to match
 theme.

---
 css/styles.css |  8 ++++++++
 js/chart.js    | 25 +++++++++++++++++++++++--
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index 627a15c..e39bc3d 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -35,6 +35,10 @@
   --dialog-name-bg-color: #FF9A40;
   --dialog-name-text-color: #BA3B1F;
 
+  --chart-fill-color: var(--bg-color);
+  --chart-line-color: rgba(0, 0, 0, 0.1);
+  --chart-point-color: rgba(0, 0, 0, 0.1);
+
   --lng-select-text-color: var(--dialog-text-color);
   --lng-select-border-color: var(--bg-color);
   --lng-select-bg-color-hover: #EBFEFD;
@@ -84,6 +88,10 @@
     --dialog-name-bg-color: #BA3B1F;
     --dialog-name-text-color: #FF9A40;
 
+    --chart-fill-color: #2D5F21;
+    --chart-line-color: rgba(200, 200, 200, 0.4);
+    --chart-point-color: rgba(200, 200, 200, 0.6);
+
     --lng-select-text-color: #837865;
     --lng-select-border-color: var(--bg-color);
     --lng-select-bg-color-hover: #EBFEFD;
diff --git a/js/chart.js b/js/chart.js
index 64e96f4..49b7b46 100644
--- a/js/chart.js
+++ b/js/chart.js
@@ -5,8 +5,12 @@ Chart.defaults.global.defaultFontFamily = "'Varela Round', sans-serif";
 const chart_options = {
   elements: {
     line: {
-      backgroundColor: "#DEF2D9",
-      backgroundColor: "#DEF2D9",
+      get backgroundColor() {
+        return getComputedStyle(document.documentElement).getPropertyValue('--chart-fill-color');
+      },
+      get borderColor() {
+        return getComputedStyle(document.documentElement).getPropertyValue('--chart-line-color');
+      },
       cubicInterpolationMode: "monotone",
     },
   },
@@ -21,14 +25,23 @@ function update_chart(input_data, possibilities) {
   let ctx = $("#chart"),
   datasets = [{
       label: i18next.t("output.chart.input"),
+      get pointBorderColor() {
+        return getComputedStyle(document.documentElement).getPropertyValue('--chart-point-color');
+      },
       data: input_data.slice(1),
       fill: false,
     }, {
       label: i18next.t("output.chart.minimum"),
+      get pointBorderColor() {
+        return getComputedStyle(document.documentElement).getPropertyValue('--chart-point-color');
+      },
       data: possibilities[0].prices.slice(1).map(day => day.min),
       fill: false,
     }, {
       label: i18next.t("output.chart.maximum"),
+      get pointBorderColor() {
+        return getComputedStyle(document.documentElement).getPropertyValue('--chart-point-color');
+      },
       data: possibilities[0].prices.slice(1).map(day => day.max),
       fill: "-1",
     },
@@ -41,6 +54,7 @@ function update_chart(input_data, possibilities) {
   if (chart_instance) {
     chart_instance.data.datasets = datasets;
     chart_instance.data.labels = labels;
+    chart_instance.options = chart_options;
     chart_instance.update();
   } else {
     chart_instance = new Chart(ctx, {
@@ -53,3 +67,10 @@ function update_chart(input_data, possibilities) {
     });
   }
 }
+
+window.matchMedia("(prefers-color-scheme: dark)").addListener(() => {
+  if (chart_instance) {
+    chart_instance.options = chart_options;
+    chart_instance.update();
+  }
+});