split off waybar styling to respective places

common/colors.nix

@@ -6,8 +6,8 @@
   ];
 
   colorScheme = {
-    slug = "test";
+    slug = "dracumod";
-    name = "TestScheme";
+    name = "ModifiedDracula";
     author = "Noa";
     palette = {
       base00 = "#26052e"; # background222c"; # background

modules/waybar/clock.nix

@@ -8,22 +8,34 @@ in
     enable = lib.mkEnableOption "enable ${name} waybar module";
   };
   config = lib.mkIf config.modules.waybar.enabled.${name}.enable {
-    programs.waybar.settings.mainBar.${name} = {
+    programs.waybar = {
-      tooltip-format = "<big>{:%Y %B}</big>\n\n{calendar}";
+      settings.mainBar.${name} = {
-      interval = 1;
+        tooltip-format = "<big>{:%Y %B}</big>\n\n{calendar}";
-      format = "{:%H:%M:%S}";
+        interval = 1;
-      format-alt = "{:%Y-%m-%d %H:%M:%S}";
+        format = "{:%H:%M:%S}";
-      on-click-middle = "gnome-clocks";
+        format-alt = "{:%Y-%m-%d %H:%M:%S}";
-      calendar = {
+        on-click-middle = "gnome-clocks";
-        weeks-pos = "left";
+        calendar = {
-        format = {
+          weeks-pos = "left";
-          today = "<span color='#FF6666'><u>{}</u></span>"; # TODO: use nix-colors
+          format = {
-          weeks = "<span color='#707A8C'>{}</span>"; # TODO: use nix-colors
+            today = "<span color='#FF6666'><u>{}</u></span>"; # TODO: use nix-colors
+            weeks = "<span color='#707A8C'>{}</span>"; # TODO: use nix-colors
+          };
         };
+        home.packages = [
+          pkgs.gnome.gnome-clocks
+        ];
       };
-      home.packages = [
+      style = ''
-        pkgs.gnome.gnome-clocks
+        #clock {
-      ];
+          color: #${config.colorScheme.palette.base04};
+          margin: 0px 2px;
+          padding: 0 15px;
+          
+          border-radius: 999px;
+          box-shadow: none;
+        }
+      '';
     };
   };
 }

modules/waybar/cpu.nix

@@ -3,14 +3,28 @@ let
   name = "cpu";
 in
 {
-  options.modules.waybar.modules = import ./addname.nix lib name;
+  options.modules.waybar = {
-  options.modules.waybar.enabled.${name} = {
+    modules = import ./addname.nix lib name;
-    enable = lib.mkEnableOption "enable ${name} waybar module";
+    enabled.${name} = {
+      enable = lib.mkEnableOption "enable ${name} waybar module";
+    };
   };
   config = lib.mkIf config.modules.waybar.enabled.${name}.enable {
-    programs.waybar.settings.mainBar."${name}" = {
+    programs.waybar = {
-      format = "cpu: {usage}%";
+      settings.mainBar."${name}" = {
-      tooltip = false;
+        format = "cpu: {usage}%";
+        tooltip = false;
+      };
+      style = ''
+        #cpu {
+          color: #${config.colorScheme.palette.base04};
+          margin: 0px 0px;
+          padding: 0 15px;
+          
+          border-radius: 999px 0px 0px 999px;
+          box-shadow: inset 0 0 0 1px #${config.colorScheme.palette.base01};
+        }
+      '';
     };
   };
 }

modules/waybar/default.nix

@@ -81,30 +81,10 @@ in
         };
         style = ''
           * {
-            /* `otf-font-awesome` is required to be installed for icons */
             font-family: "Maple Mono NF";
             font-size: 14px;
           }
 
-          window#waybar {
-            background-color: transparent;
-            border-radius: 999px;
-            color: #${config.colorScheme.palette.base05};
-            transition-property: background-color;
-            transition-duration: .5s;
-          }
-          window#waybar.hidden {
-            opacity: 0.2;
-          }
-
-          window#waybar.termite {
-            background-color: transparent;
-          }
-
-          window#waybar.chromium {
-            background-color: transparent;
-          }
-
           button {
             /* Use box-shadow instead of border so the text isn't offset */
             box-shadow: inset 0 -1px transparent;
@@ -113,170 +93,11 @@ in
             border-radius: 0;
           }
 
-          /* https://githbackground: #000000ub.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
           button:hover {
             background: inherit;
             border-radius: 999px;
           }
 
-          #workspaces button {    
-            transition: all 0.2s;
-            padding: 3px 3px 3px 5px;
-            margin: 3px;
-            min-width: 15px;
-            min-height: 15px;
-            background-color: transparent;
-            color: #${config.colorScheme.palette.base04};
-            border-radius: 999px;
-          }
-
-          #workspaces button:hover {
-            background-color: #${config.colorScheme.palette.base17};
-          }
-
-          #workspaces button.active {
-            font-weight: bold;
-            background-color: #${config.colorScheme.palette.base0E};
-          }
-
-          #workspaces button.urgent {
-            background-color: #${config.colorScheme.palette.base08};
-          }
-
-          #clock,
-          #battery,
-          #cpu,
-          #memory,
-          #disk,
-          #temperature,
-          #backlight,
-          #network,
-          #pulseaudio,
-          #wireplumber,
-          #custom-media,
-          #mode,
-          #idle_inhibitor,
-          #custom-vpn,
-          #scratchpad,
-          #tray,
-          #custom-updates,
-          #custom-poweroff,
-          #mpd {
-            color: #${config.colorScheme.palette.base04};
-            margin: 0px 2px;
-            padding: 0 15px;
-          
-            border-radius: 999px;
-            box-shadow: inset 0 0 0 1px #${config.colorScheme.palette.base01};
-          }
-
-          .modules-right > widget:last-child > #battery {
-            margin-right: 0px;
-          }
-
-          #tray {    
-            padding: 4px 10px;        
-            border-radius: 999px 999px 999px 999px;
-            box-shadow: inset 0px 0px 0 1px #${config.colorScheme.palette.base01};
-          }
-
-          #window { 
-            margin-left: 6px;
-            color: #${config.colorScheme.palette.base04};
-          }
-
-          #workspaces {   
-            margin: 0 4px;
-            padding: 4px 4px;   
-            border-radius: 999px;
-            box-shadow: inset 0px 0px 0 1px #${config.colorScheme.palette.base01};
-          }
-
-          #cpu {
-            border-radius: 999px 0px 0px 999px;
-            margin-right: 0px;        
-          }
-
-          #memory {
-            border-radius: 0px;
-            padding: 0 10px;
-            margin: 0px;
-            box-shadow: inset 0px 2px 0 -1px #${config.colorScheme.palette.base01},
-                  inset 0px -2px 0 -1px #${config.colorScheme.palette.base01};
-          }
-
-          #clock {    
-            box-shadow: none;
-          }
-
-
-          #battery {    
-            min-width: 50px;
-            border-radius: 999px;
-            box-shadow: inset 0 0 0 1px #${config.colorScheme.palette.base01};
-            background-color: #${config.colorScheme.palette.base01};
-            transition: all 0.3s;
-          }
-
-          #battery.charging, #battery.plugged {   
-            color: #${config.colorScheme.palette.base0B}; 
-            background-color: transparent;
-            animation: batteryCharging 1.2s linear 0s infinite normal forwards,               
-          }
-          #battery.full {
-            animation: batteryFull 7.0s linear 0s infinite normal forwards;    
-          }
-          #battery.critical:not(.charging) {    
-            background-color: #${config.colorScheme.palette.base00};
-            animation: batteryCritical 1.2s linear 0s infinite normal forwards;        
-          }
-
-          #network {     
-
-          }
-
-          #network.disconnected,
-          #pulseaudio.muted {
-            transition: all 0.2s;
-            color: #${config.colorScheme.palette.base01};
-          }
-
-          .custom-spotify {
-            color: #${config.colorScheme.palette.base14};
-            margin-right: 10px;
-          }
-
-          #temperature {
-            margin-left: 0px;
-            border-radius: 0px 999px 999px 0px;
-          }
-
-          #temperature.critical {
-            background-color: transparent;
-            color: #${config.colorScheme.palette.base08};
-          }
-
-          #tray {    
-            background-color: transparent;
-          }
-
-
-          #tray > .passive {
-            -gtk-icon-effect: dim;
-          }
-
-          #tray > .needs-attention {
-            background-color: #${config.colorScheme.palette.base08};
-            border-radius: 999px;
-          }
-
-          #scratchpad {
-            background: rgba(0, 0, 0, 0.1);
-          }
-          #scratchpad.empty {
-            background-color: transparent;
-          }
-
           tooltip {
             background-color: #${config.colorScheme.palette.base00};
             border: 1px solid;

modules/waybar/memory.nix

@@ -3,14 +3,28 @@ let
   name = "memory";
 in
 {
-  options.modules.waybar.modules = import ./addname.nix lib name;
+  options.modules.waybar = {
-  options.modules.waybar.enabled.${name} = {
+    modules = import ./addname.nix lib name;
-    enable = lib.mkEnableOption "enable ${name} waybar module";
+    enabled.${name} = {
+      enable = lib.mkEnableOption "enable ${name} waybar module";
+    };
   };
   config = lib.mkIf config.modules.waybar.enabled.${name}.enable {
-    programs.waybar.settings.mainBar."${name}" = {
+    programs.waybar = {
-      format = "mem: {}%";
+      settings.mainBar."${name}" = {
-      tooltip = false;
+        format = "mem: {}%";
+        tooltip = false;
+      };
+      style = ''
+        #memory {
+          border-radius: 0px;
+          padding: 0 10px;
+          color: #${config.colorScheme.palette.base04};
+          margin: 0px;
+          box-shadow: inset 0px 2px 0 -1px #${config.colorScheme.palette.base01},
+                inset 0px -2px 0 -1px #${config.colorScheme.palette.base01};
+        }
+      '';
     };
   };
 }

modules/waybar/network.nix

@@ -3,18 +3,33 @@ let
   name = "network";
 in
 {
-  options.modules.waybar.modules = import ./addname.nix lib name;
+  options.modules.waybar = {
-  options.modules.waybar.enabled.${name} = {
+    modules = import ./addname.nix lib name;
-    enable = lib.mkEnableOption "enable ${name} waybar module";
+    enabled.${name} = {
+      enable = lib.mkEnableOption "enable ${name} waybar module";
+    };
   };
   config = lib.mkIf config.modules.waybar.enabled.${name}.enable {
-    programs.waybar.settings.mainBar."${name}" = {
+    programs.waybar = {
-      format-wifi = "{essid} ({signalStrength}%) 󰖩";
+      settings.mainBar."${name}" = {
-      format-ethernet = "{ipaddr}/{cidr} 󰛳";
+        format-wifi = "{essid} ({signalStrength}%) 󰖩";
-      tooltip-format = "{ifname} via {gwaddr} 󰛳";
+        format-ethernet = "{ipaddr}/{cidr} 󰛳";
-      format-linked = "{ifname} (No IP) 󰛳";
+        tooltip-format = "{ifname} via {gwaddr} 󰛳";
-      format-disconnected = "Disconnected ";
+        format-linked = "{ifname} (No IP) 󰛳";
-      format-alt = "{ifname}: {ipaddr}/{cidr}";
+        format-disconnected = "Disconnected ";
+        format-alt = "{ifname}: {ipaddr}/{cidr}";
+      };
+      style = ''
+        #network {
+            color: #${config.colorScheme.palette.base04};
+            margin: 0px 2px;
+            padding: 0 15px;
+            border-radius: 999px;
+            box-shadow: inset 0 0 0 1px #${config.colorScheme.palette.base01};
+        }
+
+        #network.disconnected,
+      '';
     };
   };
 }

modules/waybar/power.nix

@@ -14,10 +14,21 @@ in
   ];
   config = lib.mkIf config.modules.waybar.enabled.${name}.enable {
     modules.wofi.enable = true;
-    programs.waybar.settings.mainBar."${name}" = {
+    programs.waybar = {
-      format = "";
+      settings.mainBar."${name}" = {
-      on-click = "wofi-power";
+        format = "";
-      on-click-right = "swaylock"; # TODO: change to whatever lock screen i want
+        on-click = "wofi-power";
+        on-click-right = "swaylock"; # TODO: change to whatever lock screen i want
+      };
+      style = ''
+        #custom-poweroff {
+          color: #${config.colorScheme.palette.base04};
+          margin: 0px 2px;
+          padding: 0 15px;
+          border-radius: 999px;
+          box-shadow: inset 0 0 0 1px #${config.colorScheme.palette.base01};
+        }
+      '';
     };
   };
 }

modules/waybar/spotify.nix

@@ -10,22 +10,21 @@ in
     };
   };
   config = lib.mkIf config.modules.waybar.enabled.${name}.enable {
-    programs.waybar.settings.mainBar.${name} = {
+    programs.waybar = {
-      tooltip-format = "<big>{:%Y %B}</big>\n\n{calendar}";
+      settings.mainBar.${name} = {
-      interval = 1;
+        exec = ''${pkgs.playerctl}/bin/playerctl metadata --player=spotify -f "{{ status }}: {{ artist }} - {{ title }}"'';
-      format = "{:%H:%M:%S}";
+        format = "{}";
-      format-alt = "{:%Y-%m-%d %H:%M:%S}";
+        interval = 1;
-      on-click-middle = "gnome-clocks";
+        on-click = "${pkgs.playerctl}/bin/playerctl --player=spotify play-pause";
-      calendar = {
+        on-scroll-up = "${pkgs.playerctl}/bin/playerctl --player=spotify volume 0.01+";
-        weeks-pos = "left";
+        on-scroll-down = "${pkgs.playerctl}/bin/playerctl --player=spotify volume 0.01-";
-        format = {
-          today = "<span color='#FF6666'><u>{}</u></span>"; # TODO: use nix-colors
-          weeks = "<span color='#707A8C'>{}</span>"; # TODO: use nix-colors
-        };
       };
-      home.packages = [
+      style = ''
-        pkgs.gnome.gnome-clocks
+        #custom-spotify {
-      ];
+          color: #${config.colorScheme.palette.base14};
+          margin-right: 10px;
+        }
+      '';
     };
   };
 }

modules/waybar/tray.nix

@@ -3,13 +3,40 @@ let
   name = "tray";
 in
 {
-  options.modules.waybar.modules = import ./addname.nix lib name;
+  options.modules.waybar = {
-  options.modules.waybar.enabled.${name} = {
+    modules = import ./addname.nix lib name;
-    enable = lib.mkEnableOption "enable ${name} waybar module";
+    enabled.${name} = {
+      enable = lib.mkEnableOption "enable ${name} waybar module";
+    };
   };
   config = lib.mkIf config.modules.waybar.enabled.${name}.enable {
-    programs.waybar.settings.mainBar."${name}" = {
+    programs.waybar = {
-      spacing = 10;
+      settings.mainBar."${name}" = {
+        spacing = 10;
+      };
+      style = ''
+        #tray {
+          color: #${config.colorScheme.palette.base04};
+          margin: 0px 2px;
+          padding: 4px 10px;
+          border-radius: 999px 999px 999px 999px;
+          box-shadow: inset 0px 0px 0 1px #${config.colorScheme.palette.base01};
+        }
+
+        #tray {
+          background-color: transparent;
+        }
+
+
+        #tray > .passive {
+          -gtk-icon-effect: dim;
+        }
+
+        #tray > .needs-attention {
+          background-color: #${config.colorScheme.palette.base08};
+          border-radius: 999px;
+        }
+      '';
     };
   };
 }

modules/waybar/window.nix

@@ -3,13 +3,43 @@ let
   name = "hyprland/window";
 in
 {
-  options.modules.waybar.modules = import ./addname.nix lib name;
+  options.modules.waybar = {
-  options.modules.waybar.enabled.${name} = {
+    modules = import ./addname.nix lib name;
-    enable = lib.mkEnableOption "enable ${name} waybar module";
+    enabled.${name} = {
+      enable = lib.mkEnableOption "enable ${name} waybar module";
+    };
   };
   config = lib.mkIf config.modules.waybar.enabled.${name}.enable {
-    programs.waybar.settings.mainBar."${name}" = {
+    programs.waybar = {
-      max-length = 36;
+      settings.mainBar."${name}" = {
+        max-length = 36;
+      };
+      style = ''
+        window#waybar {
+          background-color: transparent;
+          border-radius: 999px;
+          color: #${config.colorScheme.palette.base05};
+          transition-property: background-color;
+          transition-duration: .5s;
+        }
+
+        window#waybar.hidden {
+          opacity: 0.2;
+        }
+
+        window#waybar.termite {
+          background-color: transparent;
+        }
+
+        window#waybar.chromium {
+          background-color: transparent;
+        }
+
+        #window { 
+          margin-left: 6px;
+          color: #${config.colorScheme.palette.base04};
+        }
+      '';
     };
   };
 }

modules/waybar/wireplumber.nix

@@ -10,11 +10,22 @@ in
     };
   };
   config = lib.mkIf config.modules.waybar.enabled.${name}.enable {
-    programs.waybar.settings.mainBar."${name}" = {
+    programs.waybar = {
-      format = "{volume}% {icon}";
+      settings.mainBar."${name}" = {
-      format-muted = "";
+        format = "{volume}% {icon}";
-      on-click = "helvum";
+        format-muted = "";
-      format-icons = [ "" "" "" ];
+        on-click = "helvum";
+        format-icons = [ "" "" "" ];
+      };
+      style = ''
+        #wireplumber {
+          color: #${config.colorScheme.palette.base04};
+          margin: 0px 2px;
+          padding: 0 15px;
+          border-radius: 999px;
+          box-shadow: inset 0 0 0 1px #${config.colorScheme.palette.base01};
+        }
+      '';
     };
   };
 }

modules/waybar/workspaces.nix

@@ -3,15 +3,51 @@ let
   name = "hyprland/workspaces";
 in
 {
-  options.modules.waybar.modules = import ./addname.nix lib name;
+  options.modules.waybar = {
-  options.modules.waybar.enabled.${name} = {
+    modules = import ./addname.nix lib name;
-    enable = lib.mkEnableOption "enable ${name} waybar module";
+    enabled.${name} = {
+      enable = lib.mkEnableOption "enable ${name} waybar module";
+    };
   };
   config = lib.mkIf config.modules.waybar.enabled.${name}.enable {
-    programs.waybar.settings.mainBar."${name}" = {
+    programs.waybar = {
-      format = "{name}";
+      settings.mainBar."${name}" = {
-      on-click = "activate";
+        format = "{name}";
-      sort-by = "id";
+        on-click = "activate";
+        sort-by = "id";
+      };
+      style = ''
+        #workspaces button {    
+          transition: all 0.2s;
+          padding: 3px 3px 3px 5px;
+          margin: 3px;
+          min-width: 15px;
+          min-height: 15px;
+          background-color: transparent;
+          color: #${config.colorScheme.palette.base04};
+          border-radius: 999px;
+        }
+
+        #workspaces button:hover {
+          background-color: #${config.colorScheme.palette.base17};
+        }
+
+        #workspaces button.active {
+          font-weight: bold;
+          background-color: #${config.colorScheme.palette.base0E};
+        }
+
+        #workspaces button.urgent {
+          background-color: #${config.colorScheme.palette.base08};
+        }
+
+        #workspaces {   
+          margin: 0 4px;
+          padding: 4px 4px;   
+          border-radius: 999px;
+          box-shadow: inset 0px 0px 0 1px #${config.colorScheme.palette.base01};
+        }
+      '';
     };
   };
 }