Set accent color based on wallpaper

data/icons.gresource.xml

@@ -9,6 +9,7 @@
     <file alias="64x64/apps/application-default-icon-symbolic.svg" compressed="true" preprocess="xml-stripblanks">application-default-icon/64-symbolic.svg</file>
     <file alias="appearance-default.svg" compressed="true" preprocess="xml-stripblanks">appearance-default.svg</file>
     <file alias="appearance-dark.svg" compressed="true" preprocess="xml-stripblanks">appearance-dark.svg</file>
+    <file alias="auto.png" compressed="true">auto.png</file>
     <file alias="plug.css" compressed="true">plug.css</file>
   </gresource>
 </gresources>

data/plug.css

@@ -1,5 +1,5 @@
 /*
-* Copyright (c) 2018 elementary LLC. (https://elementary.io)
+* Copyright 2018–2021 elementary, Inc. (https://elementary.io)
 *
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the GNU General Public
@@ -80,3 +80,10 @@ radiobutton .card {
             alpha (@accent_color_500, 0.1)
         );
 }
+
+.color-button.auto radio {
+    background-image: url("auto.png");
+    background-position: -1px -1px;
+    background-repeat: no-repeat;
+    background-size: calc(100% + 2px);
+}

src/PantheonAccountsServicePlugin.vala

@@ -1,5 +1,6 @@
 [DBus (name = "io.elementary.pantheon.AccountsService")]
 private interface PantheonShell.Pantheon.AccountsService : Object {
+    public abstract int prefers_accent_color { get; set; }
     public abstract int prefers_color_scheme { get; set; }
 }
 

src/Views/Appearance.vala

@@ -248,13 +248,15 @@ public class PantheonShell.Appearance : Gtk.Grid {
 
             ((GLib.DBusProxy) pantheon_act).g_properties_changed.connect ((changed, invalid) => {
                 var color_scheme = changed.lookup_value ("PrefersColorScheme", new VariantType ("i"));
-                switch ((Granite.Settings.ColorScheme) color_scheme.get_int32 ()) {
-                    case Granite.Settings.ColorScheme.DARK:
-                        prefer_dark_radio.active = true;
-                        break;
-                    default:
-                        prefer_default_radio.active = true;
-                        break;
+                if (color_scheme != null) {
+                    switch ((Granite.Settings.ColorScheme) color_scheme.get_int32 ()) {
+                        case Granite.Settings.ColorScheme.DARK:
+                            prefer_dark_radio.active = true;
+                            break;
+                        default:
+                            prefer_default_radio.active = true;
+                            break;
+                    }
                 }
             });
 
@@ -311,36 +313,39 @@ public class PantheonShell.Appearance : Gtk.Grid {
             var accent_label = new Gtk.Label (_("Accent:"));
             accent_label.halign = Gtk.Align.END;
 
-            var blueberry_button = new ColorButton ("blueberry");
+            var blueberry_button = new PrefersAccentColorButton ("blueberry", pantheon_act, Granite.Settings.AccentColor.BLUE);
             blueberry_button.tooltip_text = _("Blueberry");
 
-            var mint_button = new ColorButton ("mint", blueberry_button);
+            var mint_button = new PrefersAccentColorButton ("mint", pantheon_act, Granite.Settings.AccentColor.MINT, blueberry_button);
             mint_button.tooltip_text = _("Mint");
 
-            var lime_button = new ColorButton ("lime", blueberry_button);
+            var lime_button = new PrefersAccentColorButton ("lime", pantheon_act, Granite.Settings.AccentColor.GREEN, blueberry_button);
             lime_button.tooltip_text = _("Lime");
 
-            var banana_button = new ColorButton ("banana", blueberry_button);
+            var banana_button = new PrefersAccentColorButton ("banana", pantheon_act, Granite.Settings.AccentColor.YELLOW, blueberry_button);
             banana_button.tooltip_text = _("Banana");
 
-            var orange_button = new ColorButton ("orange", blueberry_button);
+            var orange_button = new PrefersAccentColorButton ("orange", pantheon_act, Granite.Settings.AccentColor.ORANGE, blueberry_button);
             orange_button.tooltip_text = _("Orange");
 
-            var strawberry_button = new ColorButton ("strawberry", blueberry_button);
+            var strawberry_button = new PrefersAccentColorButton ("strawberry", pantheon_act, Granite.Settings.AccentColor.RED, blueberry_button);
             strawberry_button.tooltip_text = _("Strawberry");
 
-            var bubblegum_button = new ColorButton ("bubblegum", blueberry_button);
+            var bubblegum_button = new PrefersAccentColorButton ("bubblegum", pantheon_act, Granite.Settings.AccentColor.PINK, blueberry_button);
             bubblegum_button.tooltip_text = _("Bubblegum");
 
-            var grape_button = new ColorButton ("grape", blueberry_button);
+            var grape_button = new PrefersAccentColorButton ("grape", pantheon_act, Granite.Settings.AccentColor.PURPLE, blueberry_button);
             grape_button.tooltip_text = _("Grape");
 
-            var cocoa_button = new ColorButton ("cocoa", blueberry_button);
+            var cocoa_button = new PrefersAccentColorButton ("cocoa", pantheon_act, Granite.Settings.AccentColor.BROWN, blueberry_button);
             cocoa_button.tooltip_text = _("Cocoa");
 
-            var slate_button = new ColorButton ("slate", blueberry_button);
+            var slate_button = new PrefersAccentColorButton ("slate", pantheon_act, Granite.Settings.AccentColor.GRAY, blueberry_button);
             slate_button.tooltip_text = _("Slate");
 
+            var auto_button = new PrefersAccentColorButton ("auto", pantheon_act, Granite.Settings.AccentColor.NO_PREFERENCE, blueberry_button);
+            auto_button.tooltip_text = _("Automatic based on wallpaper");
+
             var accent_grid = new Gtk.Grid ();
             accent_grid.column_spacing = 6;
             accent_grid.add (blueberry_button);
@@ -353,6 +358,7 @@ public class PantheonShell.Appearance : Gtk.Grid {
             accent_grid.add (grape_button);
             accent_grid.add (cocoa_button);
             accent_grid.add (slate_button);
+            accent_grid.add (auto_button);
 
             var accent_info = new Gtk.Label (_("Used across the system by default. Apps can always use their own accent color.")) {
                 margin_bottom = 18,
@@ -382,21 +388,29 @@ public class PantheonShell.Appearance : Gtk.Grid {
         });
     }
 
-    private class ColorButton : Gtk.RadioButton {
-        public string color_name { get; construct; }
+    private class PrefersAccentColorButton : Gtk.RadioButton {
+        public string theme { get; construct; }
+        public Granite.Settings.AccentColor preference { get; construct; }
+
+        private Pantheon.AccountsService? pantheon_act = null;
 
         private static GLib.Settings interface_settings;
+        private static Granite.Settings granite_settings;
         private static string current_accent;
 
-        public ColorButton (string _color_name, Gtk.RadioButton? group_member = null) {
+        public PrefersAccentColorButton (string _theme, Pantheon.AccountsService? _pantheon_act, Granite.Settings.AccentColor _preference, Gtk.RadioButton? group_member = null) {
             Object (
-                color_name: _color_name,
+                theme: _theme,
+                preference: _preference,
                 group: group_member
             );
+
+            pantheon_act = _pantheon_act;
         }
 
         static construct {
             interface_settings = new GLib.Settings (INTERFACE_SCHEMA);
+            granite_settings = Granite.Settings.get_default ();
 
             var current_stylesheet = interface_settings.get_string (STYLESHEET_KEY);
             current_accent = current_stylesheet.replace (STYLESHEET_PREFIX, "");
@@ -405,16 +419,20 @@ public class PantheonShell.Appearance : Gtk.Grid {
         construct {
             unowned Gtk.StyleContext context = get_style_context ();
             context.add_class ("color-button");
-            context.add_class (color_name);
+            context.add_class (theme);
 
             realize.connect (() => {
-                active = current_accent == color_name;
-
                 toggled.connect (() => {
-                    interface_settings.set_string (
-                        STYLESHEET_KEY,
-                        STYLESHEET_PREFIX + color_name
-                    );
+                    if (preference != Granite.Settings.AccentColor.NO_PREFERENCE) {
+                        interface_settings.set_string (
+                            STYLESHEET_KEY,
+                            STYLESHEET_PREFIX + theme
+                        );
+                    }
+
+                    if (((GLib.DBusProxy) pantheon_act).get_cached_property ("PrefersAccentColor") != null) {
+                        pantheon_act.prefers_accent_color = preference;
+                    }
                 });
             });
         }