[AGS] Fixes for bar

config/astal/util/colours.scss

@@ -1,4 +1,4 @@
 $fg-color: #E6E6E6;
 $bg-color: #141414;
-$accent-color: #154881;
-$accent-color-2: #ABADCD;
+$accent-color: #B27BD1;
+$accent-color-2: #5F50A6;

config/astal/util/hyprland.ts

@@ -0,0 +1,28 @@
+// ┌                                               ┐
+// │  From https://github.com/Neurarian/matshell   │
+// └                                               ┘
+import { App, Gdk } from "astal/gtk4";
+import Hyprland from "gi://AstalHyprland";
+
+/* Match Hyprland monitor to GDK monitor
+THIS MAY NOT WORK AS INTENDED IF YOU HAVE MONITORS OF THE SAME MODEL
+I did not find a more elegant solution to this. 
+On my setup GDK coordinates and hyprland coordinates are flipped,
+so I cant match by coordinates. */
+
+export function hyprToGdk(monitor: Hyprland.Monitor): Gdk.Monitor | null {
+    const monitors = App.get_monitors();
+    if (!monitors || monitors.length === 0) return null;
+
+    for (let gdkmonitor of monitors) {
+        if (
+            monitor &&
+            gdkmonitor &&
+            monitor.get_name() === gdkmonitor.get_connector()
+        )
+            return gdkmonitor;
+    }
+
+    // Default monitor with null safety
+    return monitors.length > 0 ? monitors[0] : null;
+}