feat: add accent color swatches UI to preferences

NOTE: this is still like the frontend so they are not
functional yet :(

but I am gonna work on it on weekends, gotta finish some
academics stuff first

Author: vani-tty1

src/preferences-dialog.blp

@@ -22,6 +22,93 @@ Adw.PreferencesDialog preferences_dialog {
       //TODO: add more performance related settings
     }
 
+    Adw.PreferencesGroup {
+      title: _("Appearance");
+      description: _("Accent color for Memerist only. Reset to follow the system.");
+
+      header-suffix: Gtk.Button accent_reset_button {
+        label: _("Reset");
+        valign: center;
+        styles ["flat"]
+      };
+
+      Adw.PreferencesRow {
+        activatable: false;
+
+        child: Gtk.Box {
+          halign: center;
+          spacing: 14;
+          margin-top: 18;
+          margin-bottom: 18;
+          margin-start: 12;
+          margin-end: 12;
+
+          Gtk.CheckButton {
+            styles ["accent-swatch", "blue"]
+            action-name: "prefs.accent-color";
+            action-target: "'blue'";
+            tooltip-text: _("Blue");
+          }
+
+          Gtk.CheckButton {
+            styles ["accent-swatch", "teal"]
+            action-name: "prefs.accent-color";
+            action-target: "'teal'";
+            tooltip-text: _("Teal");
+          }
+
+          Gtk.CheckButton {
+            styles ["accent-swatch", "green"]
+            action-name: "prefs.accent-color";
+            action-target: "'green'";
+            tooltip-text: _("Green");
+          }
+
+          Gtk.CheckButton {
+            styles ["accent-swatch", "yellow"]
+            action-name: "prefs.accent-color";
+            action-target: "'yellow'";
+            tooltip-text: _("Yellow");
+          }
+
+          Gtk.CheckButton {
+            styles ["accent-swatch", "orange"]
+            action-name: "prefs.accent-color";
+            action-target: "'orange'";
+            tooltip-text: _("Orange");
+          }
+
+          Gtk.CheckButton {
+            styles ["accent-swatch", "red"]
+            action-name: "prefs.accent-color";
+            action-target: "'red'";
+            tooltip-text: _("Red");
+          }
+
+          Gtk.CheckButton {
+            styles ["accent-swatch", "pink"]
+            action-name: "prefs.accent-color";
+            action-target: "'pink'";
+            tooltip-text: _("Pink");
+          }
+
+          Gtk.CheckButton {
+            styles ["accent-swatch", "purple"]
+            action-name: "prefs.accent-color";
+            action-target: "'purple'";
+            tooltip-text: _("Purple");
+          }
+
+          Gtk.CheckButton {
+            styles ["accent-swatch", "slate"]
+            action-name: "prefs.accent-color";
+            action-target: "'slate'";
+            tooltip-text: _("Slate");
+          }
+        };
+      }
+    }
+
     // TODO: Add more Adw.PreferencesGroup blocks here for other settings categories
   }
 }

src/style.css

@@ -42,3 +42,39 @@
 .theme-switcher checkbutton.dark radio {
   background-color: var(--dark-bg);
 }
+
+checkbutton.accent-swatch {
+  padding: 3px;
+  border: 3px solid transparent;
+  border-radius: 9999px;
+  min-width: 0;
+  min-height: 0;
+}
+
+checkbutton.accent-swatch:checked {
+  border-color: var(--swatch);
+}
+
+checkbutton.accent-swatch radio,
+checkbutton.accent-swatch radio:checked {
+  -gtk-icon-source: none;
+  background-image: none;
+  background-color: var(--swatch);
+  min-width: 24px;
+  min-height: 24px;
+  padding: 0;
+  margin: 0;
+  border: none;
+  box-shadow: none;
+  border-radius: 9999px;
+}
+
+.accent-swatch.blue { --swatch: #3584e4; }
+.accent-swatch.teal { --swatch: #2190a4; }
+.accent-swatch.green { --swatch: #3a944a; }
+.accent-swatch.yellow { --swatch: #c88800; }
+.accent-swatch.orange { --swatch: #ed5b00; }
+.accent-swatch.red { --swatch: #e62d42; }
+.accent-swatch.pink { --swatch: #d56199; }
+.accent-swatch.purple { --swatch: #9141ac; }
+.accent-swatch.slate { --swatch: #6f8396; }