waybar+pywal, work on monitor<->workspace mapping

Author: avindra

.config/hypr/hyprland.conf

@@ -47,6 +47,7 @@ env = __GL_THREADED_OPTIMIZATIONS,0
 # Refer to https://wiki.hyprland.org/Configuring/Variables/
 
 # https://wiki.hyprland.org/Configuring/Variables/#general
+
 general { 
     gaps_in = 3
     gaps_out = 10
@@ -112,13 +113,13 @@ master {
     new_status = master
 }
 
+
 # https://wiki.hyprland.org/Configuring/Variables/#misc
 misc { 
-    force_default_wallpaper = 0 # Set to 0 or 1 to disable the anime mascot wallpapers
-    disable_hyprland_logo = true # If true disables the random hyprland logo / anime girl background. :(
+    force_default_wallpaper = 0
+    disable_hyprland_logo = true
 }
 
-
 #############
 ### INPUT ###
 #############
@@ -236,3 +237,8 @@ bindm = $mainMod, mouse:273, resizewindow
 # windowrulev2 = float,class:^(kitty)$,title:^(kitty)$
 
 windowrulev2 = suppressevent maximize, class:.* # You'll probably like this.
+
+
+workspace = 1,monitor=DP-3
+workspace = 2,monitor=HDMI-A-1
+workspace = 3,monitor=DP-2

.config/hypr/hyprpaper.conf

@@ -0,0 +1,5 @@
+wallpaper {
+    preload = /home/avindra/.config/wallpaper
+    file = /home/avindra/.config/wallpaper
+    monitor = DP-3
+}

.config/waybar/style.css

@@ -1,13 +1,15 @@
+@import "../../.cache/wal/colors-waybar.css";
+
 * {
     /* `otf-font-awesome` is required to be installed for icons */
     font-family: FontAwesome, Roboto, Helvetica, Arial, sans-serif;
     font-size: 13px;
 }
 
 window#waybar {
-    background-color: rgba(43, 48, 59, 0.5);
     border-bottom: 3px solid rgba(100, 114, 125, 0.5);
-    color: #ffffff;
+		background: transparent;
+    color: @background;
     transition-property: background-color;
     transition-duration: .5s;
 }
@@ -45,7 +47,11 @@ button {
 /* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
 button:hover {
     background: inherit;
-    box-shadow: inset 0 -3px #ffffff;
+    box-shadow: inset 0 -3px @color3;
+}
+
+button.active {
+    box-shadow: inset 0 -3px @foreground;
 }
 
 /* you can set a style on hover for any module like this */
@@ -64,7 +70,7 @@ button:hover {
 }
 
 #workspaces button.focused {
-    background-color: #64727D;
+    background-color: red;
     box-shadow: inset 0 -3px #ffffff;
 }