[gnome-sound-recorder] waveform: make it visible in a dark theme

[Bilal Elmoussaoui <bilelmoussaoui src gnome org>]

commit 9fb49647579e07e197eaa971b1555adf43e87f99
Author: Kavan Mevada <kavanmevada gmail com>
Date:   Mon Aug 10 11:27:44 2020 +0530

    waveform: make it visible in a dark theme
    
    Fixes #83

 src/waveform.js | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)
---
diff --git a/src/waveform.js b/src/waveform.js
index 6484321b..9908896b 100644
--- a/src/waveform.js
+++ b/src/waveform.js
@@ -23,7 +23,7 @@
 
 // based on code from Pitivi
 
-const { Gdk, GObject, Gtk } = imports.gi;
+const { Gdk, Gio, GObject, Gtk } = imports.gi;
 const Cairo = imports.cairo;
 
 var WaveType = {
@@ -32,6 +32,7 @@ var WaveType = {
 };
 
 const GUTTER = 4;
+const IsDark = new Gio.Settings({ schema: 'org.gnome.desktop.interface' 
}).get_string('gtk-theme').endsWith('dark');
 
 var WaveForm = GObject.registerClass({
     Properties: {
@@ -63,6 +64,9 @@ var WaveForm = GObject.registerClass({
                 Gdk.EventMask.BUTTON1_MOTION_MASK);
         }
 
+        this.rightColor = (IsDark ? [80, 80, 80] : [192, 191, 188]).map(x => x / 255);
+        this.leftColor = (IsDark ? [192, 191, 188] : [46, 52, 54]).map(x => x / 255);
+        this.dividerColor = (this.waveType === WaveType.PLAYER ? [28, 113, 216] : [255, 0, 0]).map(x => x / 
255);
 
         this.show();
     }
@@ -94,10 +98,7 @@ var WaveForm = GObject.registerClass({
         ctx.setLineCap(Cairo.LineCap.ROUND);
         ctx.setLineWidth(2);
 
-        if (this.waveType === WaveType.PLAYER)
-            ctx.setSourceRGB(28 / 255, 113 / 255, 216 / 255);
-        else
-            ctx.setSourceRGB(1, 0, 0);
+        ctx.setSourceRGB(...this.dividerColor);
 
         ctx.moveTo(horizCenter, vertiCenter - maxHeight);
         ctx.lineTo(horizCenter, vertiCenter + maxHeight);
@@ -106,10 +107,14 @@ var WaveForm = GObject.registerClass({
         ctx.setLineWidth(1);
 
         this._peaks.forEach(peak => {
-            if (pointer > horizCenter)
-                ctx.setSourceRGB(192 / 255, 191 / 255, 188 / 255);
-            else
-                ctx.setSourceRGB(46 / 255, 52 / 255, 54 / 255);
+            if (this.waveType === WaveType.PLAYER) {
+                if (pointer > horizCenter)
+                    ctx.setSourceRGB(...this.rightColor);
+                else
+                    ctx.setSourceRGB(...this.leftColor);
+            } else {
+                ctx.setSourceRGB(...this.leftColor);
+            }
 
             ctx.moveTo(pointer, vertiCenter + peak * maxHeight);
             ctx.lineTo(pointer, vertiCenter - peak * maxHeight);