feat: Add option to follow the system theme

data/com.github.alainm23.byte.appdata.xml.in

@@ -22,7 +22,7 @@
   <provides>
     <binary>com.github.alainm23.byte</binary>
   </provides> 
-  ​<releases>
+  <releases>
     <release version="0.4.2" date="2020-05-26">
       <description>
         <p>New translations and performance improvement</p>

data/com.github.alainm23.byte.gschema.xml

@@ -30,6 +30,7 @@
 	</enum>
 
 	<enum id="com.github.alainm23.byte.theme">
+		<value nick="Auto" value="0" />
 		<value nick="Byte" value="1" />
 		<value nick="Black" value="2" />
     	<value nick="Turquoise" value="3" />

data/stylesheet.css

@@ -389,7 +389,7 @@ overshoot.left {
 }
 
 .settings-icon {
-    background-color: @colorPrimary;
+    background-color: @colorAccent;
     color: #fff;
     border-radius: 3px;
     padding: 3px;

meson.build

@@ -1,6 +1,6 @@
 project('com.github.alainm23.byte',
         'vala', 'c',
-        version: '0.4.2')
+        version: '0.4.3')
 
 gnome = import('gnome')
 i18n = import('i18n')

src/Application.vala

@@ -129,7 +129,12 @@ public class Byte : Gtk.Application {
         provider.load_from_resource ("/com/github/alainm23/byte/stylesheet.css");
         Gtk.StyleContext.add_provider_for_screen (Gdk.Screen.get_default (), provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
 
-        utils.apply_theme (Byte.settings.get_enum ("theme"));
+        var theme_id = Byte.settings.get_enum ("theme");
+        if (theme_id == 0) {
+            utils.auto_apply_theme ();
+        } else {
+            utils.apply_theme (theme_id);
+        }
     }
 
     public override void open (File[] files, string hint) {

src/Dialogs/Settings.vala

@@ -2,6 +2,19 @@ public class Dialogs.Settings : Gtk.Dialog {
     public const string COLOR_CSS = """
         .color-%s radio {
             background: %s;
+            border: 0.25em solid %s;
+            color: %s;
+        }
+    """;
+    public const string BICOLOR_CSS = """
+        .color-%s radio {
+            background: linear-gradient(
+                to bottom left,
+                %s 50%,
+                %s 50%
+            );
+            border: 0.25em solid %s;
+            color: #888;
         }
     """;
 
@@ -44,31 +57,41 @@ public class Dialogs.Settings : Gtk.Dialog {
 
         var settings_01_label = new Gtk.Label (_("Theme"));
 
-        var theme_01 = new Gtk.RadioButton (null);
+        var theme_auto = new Gtk.RadioButton (null);
+        theme_auto.valign = Gtk.Align.START;
+        theme_auto.halign = Gtk.Align.START;
+        theme_auto.tooltip_text = _("Byte Auto");
+        apply_styles_auto ("01", "#ffffff", "#111111", "#fe2851", theme_auto);
+
+        var theme_01 = new Gtk.RadioButton.from_widget (theme_auto);
         theme_01.valign = Gtk.Align.START;
         theme_01.halign = Gtk.Align.START;
-        theme_01.tooltip_text = _("Byte");
-        apply_styles ("01", "#fe2851", theme_01);
+        theme_01.tooltip_text = _("Byte Light");
+        apply_styles ("02", "#fe2851", "#fefefe", "#333333", theme_01);
 
         var theme_02 = new Gtk.RadioButton.from_widget (theme_01);
         theme_02.valign = Gtk.Align.START;
         theme_02.halign = Gtk.Align.START;
-        theme_02.tooltip_text = _("Black");
-        apply_styles ("02", "#333333", theme_02);
+        theme_02.tooltip_text = _("Dark");
+        apply_styles ("03", "#fe2851", "#333333", "#fefefe", theme_02);
 
         var theme_03 = new Gtk.RadioButton.from_widget (theme_01);
         theme_03.valign = Gtk.Align.START;
         theme_03.halign = Gtk.Align.START;
-        theme_03.tooltip_text = _("Turquoise");
-        apply_styles ("04", "#36E683", theme_03);
+        theme_03.tooltip_text = _("Boreal Turquoise");
+        apply_styles ("04", "#36E683", "#333333", "#fefefe", theme_03);
 
         var theme_box = new Gtk.Box (Gtk.Orientation.HORIZONTAL, 0);
+        theme_box.pack_start (theme_auto, false, false, 6);
         theme_box.pack_start (theme_01, false, false, 6);
         theme_box.pack_start (theme_02, false, false, 6);
         theme_box.pack_start (theme_03, false, false, 6);
 
         // I think switch most better here (redian23)
         switch (Byte.settings.get_enum ("theme")) {
+          case 0 :
+            theme_auto.active = true;
+            break;
           case 1 :
             theme_01.active = true;
             break;
@@ -377,31 +400,63 @@ public class Dialogs.Settings : Gtk.Dialog {
             message_dialog.destroy ();
         });
 
+        theme_auto.toggled.connect (() => {
+            Byte.settings.set_enum ("theme", 0);
+            Byte.utils.auto_apply_theme ();
+        });
+
         theme_01.toggled.connect (() => {
             Byte.settings.set_enum ("theme", 1);
-            Byte.utils.apply_theme (1);
+            Byte.utils.manual_apply_theme (1);
         });
 
         theme_02.toggled.connect (() => {
             Byte.settings.set_enum ("theme", 2);
-            Byte.utils.apply_theme (2);
+            Byte.utils.manual_apply_theme (2);
         });
 
         theme_03.toggled.connect (() => {
             Byte.settings.set_enum ("theme", 3);
-            Byte.utils.apply_theme (3);
+            Byte.utils.manual_apply_theme (3);
         });
     }
 
-    private void apply_styles (string id, string color, Gtk.RadioButton radio) {
+    private void apply_styles (
+        string id, string theme_color, string accent_color, string tick_color, Gtk.RadioButton radio
+    ) {
         var provider = new Gtk.CssProvider ();
         radio.get_style_context ().add_class ("color-%s".printf (id));
         radio.get_style_context ().add_class ("color-radio");
 
         try {
             var colored_css = COLOR_CSS.printf (
                 id,
-                color
+                accent_color,
+                theme_color,
+                tick_color
+            );
+
+            provider.load_from_data (colored_css, colored_css.length);
+
+            Gtk.StyleContext.add_provider_for_screen (Gdk.Screen.get_default (), provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
+        } catch (GLib.Error e) {
+            return;
+        }
+    }
+
+    private void apply_styles_auto (
+        string id, string color_1, string color_2, string accent_color, Gtk.RadioButton radio
+    ) {
+        var provider = new Gtk.CssProvider ();
+        radio.get_style_context ().add_class ("color-%s".printf (id));
+        radio.get_style_context ().add_class ("color-radio");
+
+        try {
+            var colored_css = BICOLOR_CSS.printf (
+                id,
+                color_1,
+                color_2,
+                accent_color
             );
 
             provider.load_from_data (colored_css, colored_css.length);

src/Services/Lastfm.vala

@@ -63,7 +63,7 @@ public class Services.Lastfm : GLib.Object {
     private void get_musicbrainz_artist_cover (Objects.Track track, string mbid) {
         var url = "https://musicbrainz.org/ws/2/artist/" + mbid + "?inc=url-rels&fmt=json";
         var message = new Soup.Message ("GET", url);
-        message.request_headers.append ("User-Agent", "Byte/0.4.2 ( https://github.com/alainm23/byte )");
+        message.request_headers.append ("User-Agent", "Byte/0.4.3 ( https://github.com/alainm23/byte )");
 
         session.queue_message (message, (sess, mess) => {
             if (mess.status_code == 200) {

src/Utils.vala

@@ -21,10 +21,12 @@ public class Utils : GLib.Object {
     string colorPrimary;
     string colorAccent;
     string textColorPrimary;
+    Granite.Settings granite_settings; 
 
     public Utils () {
         MAIN_FOLDER = Environment.get_home_dir () + "/.local/share/com.github.alainm23.byte";
         COVER_FOLDER = GLib.Path.build_filename (MAIN_FOLDER, "covers");
+        granite_settings = Granite.Settings.get_default (); 
     }
 
     public void set_items (Gee.ArrayList<Objects.Track?> all_items, bool shuffle_mode, Objects.Track? track) {
@@ -371,4 +373,27 @@ public class Utils : GLib.Object {
             return;
         }
     }
+
+    private void apply_system_theme () {
+        var theme_id = 1;
+        if (granite_settings.prefers_color_scheme == Granite.Settings.ColorScheme.DARK) {
+            theme_id = 2;
+        }
+        apply_theme (theme_id);
+    }
+
+    public void auto_apply_theme () {
+        // Apply the current system theme
+        apply_system_theme ();
+
+        // Then listen for future system theme changes
+        granite_settings.notify["prefers-color-scheme"].connect (apply_system_theme);
+    }
+
+    public void manual_apply_theme (int id) {
+        apply_theme (id);
+
+        // Disable following system theme
+        granite_settings.notify["prefers-color-scheme"].disconnect (apply_system_theme);
+    }
 }

src/Widgets/TrackRow.vala

@@ -91,6 +91,7 @@ public class Widgets.TrackRow : Gtk.ListBoxRow {
         image_cover.valign = Gtk.Align.START;
 
         duration_label = new Gtk.Label (Byte.utils.get_formated_duration (track.duration));
+        duration_label.width_chars = 4;
 
         var options_button = new Gtk.Button.from_icon_name ("view-more-horizontal-symbolic", Gtk.IconSize.MENU);
         options_button.valign = Gtk.Align.CENTER;