From fac35b501001a9d972913644f0509a89657b886f Mon Sep 17 00:00:00 2001 From: _cry64 Date: Thu, 26 Mar 2026 09:36:33 +1000 Subject: [PATCH] add waybar to hyprland --- homes/modules/de/waybar/colors.css | 19 +++ homes/modules/de/waybar/default.nix | 101 ++++++++++++++++ homes/modules/de/waybar/style.css | 164 ++++++++++++++++++++++++++ homes/modules/wm/hyprland/default.nix | 1 + 4 files changed, 285 insertions(+) create mode 100644 homes/modules/de/waybar/colors.css create mode 100644 homes/modules/de/waybar/default.nix create mode 100644 homes/modules/de/waybar/style.css diff --git a/homes/modules/de/waybar/colors.css b/homes/modules/de/waybar/colors.css new file mode 100644 index 0000000..98bb26f --- /dev/null +++ b/homes/modules/de/waybar/colors.css @@ -0,0 +1,19 @@ +@define-color colorbg #26233a; +@define-color colorfg #eb6f92; + +@define-color color00 #26233a; /* black (Overlay) */ +@define-color color01 #eb6f92; /* red (Love) */ +@define-color color02 #9ccfd8; /* green (Foam) */ +@define-color color03 #f6c177; /* yellow (Gold) */ +@define-color color04 #31748f; /* blue (Pine) */ +@define-color color05 #c4a7e7; /* magenta (Iris) */ +@define-color color06 #ebbcba; /* cyan (Rose) */ +@define-color color07 #e0def4; /* white (Text) */ +@define-color color08 #47435d; /* bright black (lighter Overlay) */ +@define-color color09 #ff98ba; /* bright red (lighter Love) */ +@define-color color10 #c5f9ff; /* bright green (lighter Foam) */ +@define-color color11 #ffeb9e; /* bright yellow (lighter Gold) */ +@define-color color12 #5b9ab7; /* bright blue (lighter Pine) */ +@define-color color13 #eed0ff; /* bright magenta (lighter Iris) */ +@define-color color14 #ffe5e3; /* bright cyan (lighter Rose) */ +@define-color color15 #fefcff; /* bright white (lighter Text) */ diff --git a/homes/modules/de/waybar/default.nix b/homes/modules/de/waybar/default.nix new file mode 100644 index 0000000..33e7a42 --- /dev/null +++ b/homes/modules/de/waybar/default.nix @@ -0,0 +1,101 @@ +{upkgs, ...}: { + programs.waybar = { + enable = true; + settings = { + mainBar = { + layer = "top"; + position = "top"; + height = 30; + # modules-left = ["hyprland/workspaces" "wlr/taskbar" "custom/media"]; + modules-left = ["hyprland/workspaces" "wlr/taskbar"]; + modules-center = ["clock"]; + modules-right = ["cpu" "memory" "network" "pulseaudio" "privacy" "tray"]; + + # left + "hyprland/workspaces" = { + format = "{id}"; + }; + "ext/workspaces" = { + # not enabled yet, hyprland and mango need two different configs ;-; + format = "{id}"; + ignore-hidden = true; + on-click = "activate"; + }; + "wlr/taskbar" = { + format = "{icon}"; + icon-size = 12; + }; + # "custom/media" = { + # exec = "auroramedia"; + # return-type = "json"; + # escape = true; + # restart-interval = 1; + # }; + + # center + "clock" = { + format = "{:%Y %b %a %d %H:%M:%S}"; + interval = 1; + tooltip = false; + }; + + # right + "cpu" = { + format = " {usage}%"; + interval = 1; + }; + "memory" = { + format = " {used:0.1f} / {total:0.1f} GiB"; + interval = 1; + }; + "network" = { + format = "{bandwidthUpBytes}  {bandwidthDownBytes}  {ifname}"; + format-wifi = " {bandwidthUpBytes}  {bandwidthDownBytes} "; + format-ethernet = "󰈀 {bandwidthUpBytes}  {bandwidthDownBytes} "; + format-disconnected = "no internet ~ rawr! ~ x3"; # empty format hides module + interval = 1; + max-length = 32; + }; + "pulseaudio" = { + format = "{icon} {volume}%"; + format-muted = " {volume}%"; + format-icons = { + default = [ + "" + "" + "" + ]; + }; + "scroll-step" = 5; + }; + "privacy" = { + icon-size = 12; + icon-spacing = 5; + transition-duration = 200; + modules = [ + { + type = "screenshare"; + tooltip = true; + tooltip-icon-size = 12; + } + { + type = "audio-in"; + tooltip = true; + tooltip-icon-size = 12; + } + ]; + }; + "tray" = { + icon-size = 12; + spacing = 10; + # fixes spotify not showing up when "close button should minimize the Spotify window" is false + show-passive-items = true; + }; + }; + }; + + style = + builtins.readFile ./colors.css + + builtins.readFile ./style.css; + }; +} diff --git a/homes/modules/de/waybar/style.css b/homes/modules/de/waybar/style.css new file mode 100644 index 0000000..294991c --- /dev/null +++ b/homes/modules/de/waybar/style.css @@ -0,0 +1,164 @@ +* { + border: none; + border-radius: 0; + font-family: 'GeistMono Nerd Font'; + font-size: 15px; + font-weight: bold; + min-height: 10px; +} +window#waybar { + background: rgba(0, 0, 0, 0); +} +/* +adds a margin around the edge of the taskbar, surrounding the modules, +spacing it out from the edge of the screen and windows below +*/ +window#waybar > box { + margin: 0px 12px; +} + +tooltip { + background: @colorbg; + color: @colorfg; + opacity: 0.9; + padding: 4px; + border-radius: 12px; + border: 1px solid @color01; +} +tooltip label { + background: rgba(0, 0, 0, 0); + color: @colorfg; +} + +#clock, +#memory, +#network, +#workspaces, +#taskbar, +#cpu, +#pulseaudio, +#privacy, +#tray, +#custom-media { + background: @colorbg; + color: @colorfg; + opacity: 0.9; + padding: 4px 16px; + border-radius: 32px; + border: 1px solid @color01; +} + +/* +left-side modules +*/ +#workspaces, +#taskbar, +#custom-media { + margin: 4px 4px 4px 0px; +} + +/* +center modules +*/ +#clock { + margin: 4px 0px 4px 0px; +} + +/* +right-side modules +*/ +#memory, +#network, +#cpu, +#pulseaudio, +#tray, +#privacy { + margin: 4px 0px 4px 4px; +} + +#workspaces, +#taskbar { + padding: 0px; +} + +#taskbar.empty { + opacity: 0; + padding: 0px; + margin: 0px; + border: none; +} +#tray.empty { + opacity: 0; + padding: 0; + margin: 0; + border: none; +} + +/* + connects the workspace and taskbar together :3 +*/ +/* +#workspaces { + margin: 4px 0px 4px 12px; + padding: 0px 8px 0px 0px; + border-radius: 100px 0px 0px 100px; + border-width: 1px 0px 1px 1px; +} +#taskbar { + margin: 4px 0px 4px 0px; + padding: 0px 0px 0px 8px; + border-radius: 0px 100px 100px 0px; +} +*/ + +#cpu { + margin: 4px 0 4px 0; + border-radius: 32px 0px 0px 32px; +} +#memory { + margin: 4px 0 4px 0; + border-radius: 0px; + border-width: 1px 0px 1px 0px; +} +#network { + margin: 4px 0 4px 0; + border-radius: 0px 32px 32px 0px; +} + +#workspaces button { + padding: 2px 4px; + border-radius: 32px; + color: @colorfg; +} +#workspaces button:hover { + background: @colorfg; + color: @colorbg; + opacity: 0.8; +} +#workspaces button.active { + background: @colorfg; + color: @colorbg; +} + +#taskbar button { + padding: 2px 4px; + border-radius: 32px; + color: @colorfg; +} +#taskbar button:hover { + background: @colorfg; + color: @colorbg; + opacity: 0.8; +} +#taskbar button.active { + background: @colorfg; + color: @colorbg; +} +/* + icons in each button on the taskbar to correct + for them not being properly centred sometimes :3 +*/ +#taskbar button box image { + padding-left: 2px; +} + diff --git a/homes/modules/wm/hyprland/default.nix b/homes/modules/wm/hyprland/default.nix index 8e4454f..de9666c 100755 --- a/homes/modules/wm/hyprland/default.nix +++ b/homes/modules/wm/hyprland/default.nix @@ -44,6 +44,7 @@ # TODO: make these independent of hyprland, add these to the "mako &" "awww-daemon &" + "waybar &" # "wl-paste --type text --watch cliphist store" # "wl-paste --type image --watch cliphist store"