Adjust chart colors, and update them automatically to match theme.

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;

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();
+  }
+});