Merge pull request #8679 from Turbo87/fix-dark-chart

Fix low contrast on downloads graph labels and borders

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;
 

app/services/color-scheme.js

@@ -2,6 +2,8 @@ import { action } from '@ember/object';
 import Service from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 
+import { restartableTask, waitForEvent } from 'ember-concurrency';
+
 import * as localStorage from '../utils/local-storage';
 
 const DEFAULT_SCHEME = 'light';
@@ -10,6 +12,16 @@ const LS_KEY = 'color-scheme';
 
 export default class DesignService extends Service {
   @tracked _scheme = localStorage.getItem(LS_KEY);
+  @tracked resolvedScheme;
+
+  constructor() {
+    super(...arguments);
+    this.restartWatcherTask();
+  }
+
+  get isDark() {
+    return this.resolvedScheme === 'dark';
+  }
 
   get scheme() {
     return VALID_SCHEMES.has(this._scheme) ? this._scheme : DEFAULT_SCHEME;
@@ -18,5 +30,32 @@ export default class DesignService extends Service {
   @action set(scheme) {
     this._scheme = scheme;
     localStorage.setItem(LS_KEY, scheme);
+    this.restartWatcherTask();
   }
+
+  restartWatcherTask() {
+    this.watcherTask.perform().catch(() => {
+      // Ignore Promise rejections. This shouldn't be able to fail, and task cancellations are expected.
+    });
+  }
+
+  /**
+   * This task watches for changes in the system color scheme and updates the `resolvedScheme` property accordingly.
+   */
+  watcherTask = restartableTask(async () => {
+    let mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)');
+    // eslint-disable-next-line no-constant-condition
+    while (true) {
+      let scheme = this.scheme;
+      if (scheme === 'system') {
+        scheme = mediaQueryList.matches ? 'dark' : 'light';
+      }
+
+      if (this.resolvedScheme !== scheme) {
+        this.resolvedScheme = scheme;
+      }
+
+      await waitForEvent(mediaQueryList, 'change');
+    }
+  });
 }