components/download-graph: Adjust font and border colors for color scheme

Author: Turbo87

app/components/download-graph.hbs

@@ -11,6 +11,7 @@
     <canvas
       {{did-insert this.createChart}}
       {{did-update this.updateChart @data}}
+      {{did-update this.updateColorScheme this.colorScheme.resolvedScheme}}
       {{did-update this.updateStacked @stacked}}
       {{will-destroy this.destroyChart}}
     />

app/components/download-graph.js

@@ -15,20 +15,32 @@ const ONE_DAY = 24 * 60 * 60 * 1000;
 
 export default class DownloadGraph extends Component {
   @service chartjs;
+  @service colorScheme;
 
   @action loadChartJs() {
     waitForPromise(this.chartjs.loadTask.perform()).catch(() => {
       // Ignore Promise rejections. We'll handle them through the derived state properties.
     });
   }
 
+  get fontColor() {
+    return this.colorScheme.isDark ? '#ADBABD' : '#666';
+  }
+
+  get borderColor() {
+    return this.colorScheme.isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
+  }
+
   @action createChart(element) {
     let Chart = this.chartjs.loadTask.lastSuccessful.value;
 
+    let { fontColor: color, borderColor } = this;
+
     this.chart = new Chart(element, {
       type: 'line',
       data: this.data,
       options: {
+        color,
         maintainAspectRatio: false,
         layout: {
           padding: 10,
@@ -37,9 +49,15 @@ export default class DownloadGraph extends Component {
           x: {
             type: 'time',
             time: { tooltipFormat: 'MMM d', unit: 'day' },
-            ticks: { maxTicksLimit: 13 },
+            ticks: { maxTicksLimit: 13, color },
+            grid: { color: borderColor },
+          },
+          y: {
+            beginAtZero: true,
+            stacked: true,
+            ticks: { precision: 0, color },
+            grid: { color: borderColor },
           },
-          y: { beginAtZero: true, stacked: true, ticks: { precision: 0 } },
         },
         interaction: {
           mode: 'index',
@@ -50,6 +68,20 @@ export default class DownloadGraph extends Component {
     });
   }
 
+  @action updateColorScheme() {
+    let { chart } = this;
+
+    if (chart) {
+      let { fontColor, borderColor } = this;
+      chart.options.color = fontColor;
+      chart.options.scales.x.ticks.color = fontColor;
+      chart.options.scales.x.grid.color = borderColor;
+      chart.options.scales.y.ticks.color = fontColor;
+      chart.options.scales.y.grid.color = borderColor;
+      chart.update();
+    }
+  }
+
   @action updateChart() {
     let { chart } = this;