Waybar

config

{
  "layer": "top",
  "height": 30,
  "spacing": 4,
  "modules-left": ["hyprland/workspaces", "hyprland/window"],
  //   "modules-center": [],
  "modules-right": [
    "backlight",
    "cava",
    "pulseaudio",
    "network",
    "cpu",
    "memory",
    "temperature",
    "battery",
    "tray",
    "clock"
  ],
  // Left
  "hyprland/workspaces": {
    "format": "{icon}",
    "format-icons": {
      "urgent": "",
      "active": "",
      "default": "",
      "empty": "",
      "persistent": "󱡓",
      "special": ""
    },
    "all-outputs": true,
    "sort-by-number": true,
    "on-scroll-up": "hyprctl dispatch workspace e+1",
    "on-scroll-down": "hyprctl dispatch workspace e-1",
    "persistent-workspaces": {
      "*": [4, 5, 6, 7, 8, 9]
    }
  },
  "hyprland/window": {
    "max-length": 200,
    "separate-outputs": true
  },

  // Center

  // Right
  "backlight": {
    "device": "amdgpu_bl0",
    "format": "{percent}% {icon}",
    "format-icons": ["", ""],
    "on-scroll-up": "brightnessctl set +5%",
    "on-scroll-down": "brightnessctl set 5%-"
  },
  "cava": {
    // "cava_config": "$XDG_CONFIG_HOME/cava/config1",
    "framerate": 60,
    "bars": 12,
    "bar_delimiter": 0,
    "format-icons": ["▁", "▂", "▃", "▄", "▅", "▆", "▇", "█"],
    "actions": {
      "on-click-right": "mode"
    },
    "hide_on_silence": true
  },
  "pulseaudio": {
    // "scroll-step": 1, // %, can be a float
    "format": "{volume}% {icon}",
    "format-bluetooth": "{volume}% {icon}",
    "format-bluetooth-muted": "󰖁",
    "format-muted": "󰖁",
    "format-source": "{volume}% 󰕾",
    "format-source-muted": "󰖁",
    "format-icons": {
      "headphone": "",
      "hands-free": "󰋎",
      "headset": "󰕾",
      "phone": "",
      "portable": "",
      "car": "",
      "default": ["", "", ""]
    },
    "on-click": "pamixer -t",
  },
  "network": {
    // "interface": "wlp2*", // (Optional) To force the use of this interface
    "format-wifi": "{essid} ({signalStrength}%) 󰖩",
    "format-ethernet": "Connected 󰈁",
    "tooltip-format": "{ifname} via {gwaddr}/{cidr}",
    "format-linked": "{ifname} (No IP) 󰈁",
    "format-disconnected": "Disconnected 󰈂",
    "format-alt": "{ipaddr}"
  },
  "cpu": {
    "format": "{usage}% 󰻠"
  },
  "memory": {
    "format": "{}% 󰍛"
  },
  "temperature": {
    // "thermal-zone": 2,
    // "hwmon-path": "/sys/class/hwmon/hwmon2/temp1_input",
    // "critical-threshold": 80,
    // "format-critical": "{temperatureC}°C ",
    "format": "{temperatureC}°C "
  },
  "battery": {
    "bat": "BAT0",
    "interval": 60,
    "states": {
      "warning": 30,
      "critical": 15
    },
    "format": "{capacity}% {icon}",
    "format-icons": ["", "", "", "", ""],
    "max-length": 25
  },
  "tray": {
    // "icon-size": 21,
    "spacing": 10
  },
  "clock": {
    "format": "{:%H:%M}",
    "tooltip-format": "<big>{:%Y %B}</big>\n<tt><small>{calendar}</small></tt>",
    "format-alt": "{:%Y-%m-%d}"
  }
}

mocha.css

/*
*
* Catppuccin Mocha palette
* Maintainer: rubyowo
*
*/

@define-color base   #1e1e2e;
@define-color mantle #181825;
@define-color crust  #11111b;

@define-color text     #cdd6f4;
@define-color subtext0 #a6adc8;
@define-color subtext1 #bac2de;

@define-color surface0 #313244;
@define-color surface1 #45475a;
@define-color surface2 #585b70;

@define-color overlay0 #6c7086;
@define-color overlay1 #7f849c;
@define-color overlay2 #9399b2;

@define-color blue      #89b4fa;
@define-color lavender  #b4befe;
@define-color sapphire  #74c7ec;
@define-color sky       #89dceb;
@define-color teal      #94e2d5;
@define-color green     #a6e3a1;
@define-color yellow    #f9e2af;
@define-color peach     #fab387;
@define-color maroon    #eba0ac;
@define-color red       #f38ba8;
@define-color mauve     #cba6f7;
@define-color pink      #f5c2e7;
@define-color flamingo  #f2cdcd;
@define-color rosewater #f5e0dc;

style.css

@import "mocha.css";

* {
  font-family: "NotoSans Nerd Font", "NotoSans", sans-serif;
  font-size: 1rem;
  transition-property: background-color;
  transition-duration: 0.5s;
}

window#waybar {
  background-color: rgba(30, 30, 46, 0.5);
  color: @text;
}

window#waybar.hidden {
  opacity: 0.2;
}

#workspaces button {
  padding: 0 0.25em;
  background-color: transparent;
  color: @mauve;
  margin: 0.25em;
  border-radius: 0;
}

#workspaces button:hover {
  background-color: @surface0;
}

#workspaces button.active {
  background-color: @base;
  box-shadow: inset 0 -3px @teal;
}

#workspaces button.empty {
  color: @lavender;
}
#workspaces button.persistent {
  color: @pink;
}

#workspaces button.urgent {
  color: @red;
}

tooltip {
  color: @text;
  background: rgba(30, 30, 46, 0.5);
  border: 3px solid @teal;
}

#workspaces {
  margin: 0 4px;
}

#cava,
#pulseaudio,
#network,
#cpu,
#memory,
#temperature,
#backlight,
#battery,
#tray,
#clock {
  font-weight: bold;
  min-width: 100px;
  padding: 0 10px;
  margin: 0 4px;
  color: @base;
  border-radius: 1rem;
}

#cava {
  background-color: @flamingo;
  font-family: "FiraCode Nerd Font";
}

#pulseaudio {
  background-color: @pink;
}
#pulseaudio.muted {
  background-color: @subtext1;
}

#network {
  background-color: @mauve;
}
#network.disconnected {
  background-color: @subtext1;
}

#cpu {
  background-color: @red;
}

#memory {
  background-color: @maroon;
}

#temperature {
  background-color: @peach;
}

#backlight {
  background-color: @yellow;
}

#battery {
  background-color: @green;
}

#tray {
  background-color: @teal;
}
#tray > .passive {
  -gtk-icon-effect: dim;
}

#tray > .needs-attention {
  -gtk-icon-effect: highlight;
  background-color: @red;
}

#clock {
  background-color: @sky;
}