Add dark theme support #13

clapper_src/app.js

@@ -21,6 +21,8 @@ class ClapperApp extends Gtk.Application
             playlist: [],
         };
         Object.assign(this, defaults, opts);
+
+        this.doneFirstActivate = false;
     }
 
     vfunc_startup()
@@ -70,9 +72,9 @@ class ClapperApp extends Gtk.Application
     {
         super.vfunc_activate();
 
-        this.windowShowSignal = this.active_window.connect(
+        if(!this.doneFirstActivate)
-            'show', this._onWindowShow.bind(this)
+            this._onFirstActivate();
-        );
+
         this.active_window.present();
     }
 
@@ -81,6 +83,22 @@ class ClapperApp extends Gtk.Application
         super.run(arr || []);
     }
 
+    _onFirstActivate()
+    {
+        let gtkSettings = Gtk.Settings.get_default();
+        settings.bind(
+            'dark-theme', gtkSettings,
+            'gtk_application_prefer_dark_theme',
+            Gio.SettingsBindFlags.GET
+        );
+
+        this.windowShowSignal = this.active_window.connect(
+            'show', this._onWindowShow.bind(this)
+        );
+
+        this.doneFirstActivate = true;
+    }
+
     _onWindowShow(window)
     {
          window.disconnect(this.windowShowSignal);

clapper_src/prefs.js

@@ -22,6 +22,9 @@ class ClapperGeneralPage extends PrefsBase.Grid
         let spinButton = this.addSpinButton('Value (percentage)', 0, 200, 'volume-value');
         this._onVolumeInitialChanged(spinButton, comboBox);
         comboBox.connect('changed', this._onVolumeInitialChanged.bind(this, spinButton));
+
+        this.addTitle('Appearance');
+        this.addCheckButton('Enable dark theme', 'dark-theme');
     }
 
     _onVolumeInitialChanged(spinButton, comboBox)

data/com.github.rafostar.Clapper.gschema.xml

@@ -14,6 +14,10 @@
       <default>100</default>
       <summary>Custom initial volume value after startup</summary>
     </key>
+    <key name="dark-theme" type="b">
+      <default>false</default>
+      <summary>Enable to force the app to use dark theme variant</summary>
+    </key>
 
     <!-- Behaviour -->
     <key name="seeking-mode" type="s">