Skip to main content

​
Overview

This Waybar configuration features a Catppuccin Mocha color scheme with pill-style modules and 1px borders. It’s designed to integrate seamlessly with the Hyprland window manager.

​
Installation

​
Fedora Dependencies

sudo dnf install waybar jetbrains-mono-fonts sono-fonts pavucontrol brightnessctl

​
Optional Dependencies

  • Screenshots: hyprshot
  • Terminal: foot
  • Network Manager: network-manager-applet (for nm-connection-editor)
  • Power Management: power-profiles-daemon

​
Configuration Files

Waybar uses two main files:
  • ~/.config/waybar/config.jsonc - Module configuration and layout
  • ~/.config/waybar/style.css - Styling and colors

​
Module Layout

{
  "layer": "top",
  "position": "top",
  "height": 24,
  "modules-left": ["hyprland/workspaces", "hyprland/submap"],
  "modules-center": ["clock"],
  "modules-right": [
    "custom/screenshot",
    "custom/temp",
    "network",
    "power-profiles-daemon",
    "pulseaudio",
    "backlight",
    "battery",
    "tray"
  ]
}

​
Modules

​
Workspaces

"hyprland/workspaces": {
  "disable-scroll": true,
  "all-outputs": true,
  "format": "{name}",
  "on-click": "activate"
}
Shows Hyprland workspaces with click-to-switch functionality.

​
Clock

"clock": {
  "format": "<span>󰥔</span> {:%H:%M}",
  "format-alt": " {:%A, %B %d, %Y}",
  "tooltip-format": "<big>{:%Y %B}</big>\n<tt><small>{calendar}</small></tt>",
  "on-click": "right"
}
Displays time by default, switches to date on right-click.

​
Battery

"battery": {
  "states": {
    "good": 95,
    "warning": 30,
    "critical": 15
  },
  "format": "{capacity}% <span>{icon}</span>",
  "format-charging": "{capacity}% <span>󰂄</span>",
  "format-plugged": "{capacity}% <span>󰚥</span>",
  "format-icons": ["󰂎", "󰁺", "󰁻", "󰁼", "󰁽", "󰁾", "󰁿", "󰂀", "󰂁", "󰂂", "󰁹"]
}
Shows battery percentage with icons indicating charge level.

​
Network

"network": {
  "format-wifi": "<span></span>  {signalStrength}%",
  "format-ethernet": "<span></span> {ifname}",
  "format-disconnected": "Disconnected <span>⚠</span>",
  "on-click": "nm-connection-editor"
}
Click to open network manager.

​
Audio (PulseAudio)

"pulseaudio": {
  "format": "{volume}% <span>{icon}</span>",
  "format-muted": "<span></span>",
  "format-icons": {
    "default": ["󰕿", "󰖀", "󰕾"]
  },
  "on-click": "pavucontrol"
}
Click to open volume control.

​
Brightness

"backlight": {
  "device": "intel_backlight",
  "format": "{percent}% <span>{icon}</span>",
  "format-icons": ["󰃚", "󰃛", "󰃜", "󰃝", "󰃞", "󰃟", "󰃠", "󰃡"],
  "on-scroll-up": "brightnessctl set 1%+",
  "on-scroll-down": "brightnessctl set 1%-"
}
Scroll to adjust brightness.

​
Power Profiles

"power-profiles-daemon": {
  "format": "{icon}",
  "tooltip-format": "Power profile: {profile}\nDriver: {driver}",
  "format-icons": {
    "performance": "",
    "balanced": "",
    "power-saver": ""
  },
  "on-click": "~/.config/waybar/cycle-power-profile.sh"
}
Click to cycle through power profiles.

​
Custom Modules

"custom/screenshot": {
  "format": "󰄄",
  "on-click": "hyprshot -m region"
}
Click to take a screenshot of selected region.

​
Catppuccin Mocha Theme

​
Color Palette

@define-color base #1e1e2e;
@define-color mantle #181825;
@define-color crust #11111b;
@define-color text #cdd6f4;
@define-color subtext0 #a6adc8;
@define-color surface0 #313244;
@define-color surface1 #45475a;
@define-color blue #89b4fa;
@define-color lavender #b4befe;
@define-color green #a6e3a1;
@define-color yellow #f9e2af;
@define-color red #f38ba8;
@define-color mauve #cba6f7;

​
Module Styling

Modules use a pill-style design with rounded corners: 
.module {
    background-color: @surface0;
    border-radius: 5px;
    border: 1px solid @surface1;
    padding: 0 4px;
    margin: 0 2px;
}

​
Workspace Buttons

.ws-button {
    border-radius: 5px;
    background-color: transparent;
    color: @subtext1;
    transition: all 0.2s ease;
}

.ws-button:hover {
    background-color: @surface1;
    color: @text;
}

.ws-button.active {
    background-color: @blue;
    color: @base;
}

​
Reloading Waybar

killall waybar && waybar &

​
Customization

​
Adding a Module

  1. Add module to config.jsonc:
"modules-right": [
  "custom/my-module",
  // ... other modules
]
  1. Configure the module:
"custom/my-module": {
  "format": "{}",
  "exec": "~/.config/waybar/scripts/my-script.sh",
  "interval": 5
}
  1. Style in style.css:
#custom-my-module {
    color: @green;
}

​
Changing Colors

Modify color variables in style.css: 
@define-color blue #your-color;

​
Adjusting Module Order

Reorder arrays in config.jsonc: 
"modules-right": [
  "battery",      // moved to front
  "network",
  // ...
]

​
Scripts

​
Toggle Waybar Script

Referenced in Hyprland config: 
#!/bin/bash
# ~/.config/hypr/scripts/toggle_waybar.sh
pkill waybar || waybar &

​
Power Profile Cycle

#!/bin/bash
# ~/.config/waybar/cycle-power-profile.sh
current=$(powerprofilesctl get)

case $current in
  power-saver)
    powerprofilesctl set balanced
    ;;
  balanced)
    powerprofilesctl set performance
    ;;
  performance)
    powerprofilesctl set power-saver
    ;;
esac

​
FAQ

Check if Waybar is running:
ps aux | grep waybar
Start manually:
waybar
Check logs for errors:
waybar --log-level debug
Install required fonts:
sudo dnf install jetbrains-mono-fonts font-awesome-fonts
Ensure the font supports Nerd Font icons.
Edit config.jsonc:
"height": 32,  // increase from 24
For custom modules, check the interval setting:
"custom/my-module": {
  "interval": 5  // update every 5 seconds
}
Or use "interval": "once" for single execution.

​
Configuration Location

~/.config/waybar/
├── config.jsonc
├── style.css
├── cycle-power-profile.sh
├── toggle_temp.sh
└── README.md
  • See Hyprland for window manager setup
  • See Rofi for application launcher
  • See Kitty for terminal configuration

Build docs developers (and LLMs) love

Get started for freeTalk to us