Status Bar - Hyprland Dotfiles

Waybar Overview

Waybar is a highly customizable status bar for Wayland compositors. This configuration provides a clean, informative bar with workspace indicators, window title, system metrics, and quick action buttons.

Configuration

Waybar is configured through two main files:

config.jsonc - Module layout and behavior
style.css - Visual styling and colors

Layout Structure

{
  "layer": "top",
  "position": "top",
  "height": 42,
  "spacing": 0,
  "modules-left": [
    "custom/launcher",
    "hyprland/workspaces",
    "hyprland/window"
  ],
  "modules-center": [
    "clock"
  ],
  "modules-right": [
    "pulseaudio",
    "network",
    "group/hardware",
    "tray",
    "custom/power"
  ]
}

Left Section

Launcher, workspaces, and active window

Center Section

Date and time display

Right Section

System status and controls

Modules and Widgets

Custom Launcher

Application launcher button that opens Rofi:

"custom/launcher": {
  "format": "󰣇",
  "on-click": "rofi -show drun",
  "tooltip": false
}

Click the launcher icon to open Rofi application menu.

Hyprland Workspaces

Interactive workspace indicators:

"hyprland/workspaces": {
  "on-click": "activate",
  "format": "{icon}",
  "format-icons": {
    "default": "",
    "1": "1",
    "2": "2",
    "3": "3",
    "4": "4",
    "5": "5",
    "6": "6",
    "7": "7",
    "8": "8",
    "9": "9",
    "10": "0",
    "active": "󱓻"
  }
}

Workspace States

Empty: Dimmed opacity (0.4)
Occupied: Normal color (subtext0)
Focused: Bold purple/mauve color
Urgent: Red with blinking animation

Active Window

Displays the title of the currently focused window:

"hyprland/window": {
  "format": "󰖲 {title}",
  "max-length": 60,
  "separate-outputs": true
}

Clock

Central clock with date information:

"clock": {
  "interval": 1,
  "format": "{:%A %H:%M:%S}",
  "format-alt": "{:%d %B %V %Y}",
  "tooltip": false
}

Click the clock to toggle between time (with day name) and full date display.

Audio (PulseAudio)

Volume control with visual feedback:

"pulseaudio": {
  "format": "{icon} {volume}%",
  "format-muted": "󰝟 {volume}%",
  "format-icons": {
    "default": ["󰕿", "󰖀", "󰕾"],
    "headphone": "",
    "headset": "󰋎"
  },
  "scroll-step": 5,
  "on-click": "pavucontrol",
  "on-click-right": "pactl set-sink-mute @DEFAULT_SINK@ toggle"
}

Left Click

Open PulseAudio volume control (pavucontrol)

Right Click

Toggle mute/unmute

Scroll Wheel

Adjust volume in 5% increments

Visual States

Different icons for speakers, headphones, and headsets

Network

Network connectivity status:

"network": {
  "interface": "wl*",
  "format-wifi": "⇅ {signalStrength}%",
  "format-ethernet": "⇅",
  "format-disconnected": "⊘",
  "tooltip-format-wifi": "{essid}",
  "on-click": "kitty -e nmtui"
}

WiFi: Shows signal strength percentage
Ethernet: Simple connected indicator
Disconnected: Warning symbol
Click: Opens NetworkManager TUI in Kitty

Hardware Group

Collapsible CPU and memory monitors:

"group/hardware": {
  "orientation": "horizontal",
  "drawer": {
    "transition-duration": 300,
    "children-class": "not-memory"
  },
  "modules": ["cpu", "memory"]
}

CPU Monitor

"cpu": {
  "interval": 2,
  "format": "󰍛 {usage}%",
  "states": {
    "warning": 70,
    "critical": 90
  },
  "on-click": "kitty -e btop"
}

CPU States

State	Threshold	Color
Normal	< 70%	Blue
Warning	70-90%	Yellow
Critical	> 90%	Red

Memory Monitor

"memory": {
  "interval": 5,
  "format": "󰟜 {percentage}%",
  "states": {
    "warning": 70,
    "critical": 90
  },
  "tooltip-format": "{used:0.1f}G / {total:0.1f}G",
  "on-click": "kitty -e btop"
}

Click either CPU or memory to launch btop, an interactive system monitor.

System Tray

Standard system tray for application icons:

"tray": {
  "icon-size": 16,
  "spacing": 8
}

Power/logout menu launcher:

"custom/power": {
  "format": "⏻",
  "on-click": "wlogout -b 5",
  "tooltip": false
}

Styling

Waybar uses Catppuccin color scheme for a cohesive look with the rest of the desktop.

Color Variables

@define-color bg #1e1e2e;
@define-color bg_alt #313244;
@define-color surface0 #45475a;
@define-color mauve #cba6f7;
@define-color blue #89b4fa;
@define-color red #f38ba8;
@define-color green #a6e3a1;
@define-color yellow #f9e2af;
@define-color teal #94e2d5;
@define-color text #cdd6f4;
@define-color subtext0 #a6adc8;

Base Styling

window#waybar {
  background-color: @bg;
  border-bottom: 1px solid @surface0;
}

* {
  font-family: "JetBrainsMono Nerd Font", "Roboto", sans-serif;
  font-size: 13px;
  font-weight: 500;
}

Workspace Styling

#workspaces button {
  color: @subtext0;
  background: transparent;
  padding: 4px 10px;
}

Module Colors

Each module has semantic coloring:

#pulseaudio { color: @yellow; }
#pulseaudio.muted { color: @subtext0; }

#network { color: @green; }
#network.disconnected { color: @red; }

#cpu { color: @blue; }
#cpu.warning { color: @yellow; }
#cpu.critical { color: @red; }

#memory { color: @green; }
#memory.warning { color: @yellow; }
#memory.critical { color: @red; }

#custom-launcher { color: @mauve; }
#custom-power { color: @red; }

Hover Effects

#pulseaudio:hover,
#network:hover,
#cpu:hover,
#memory:hover,
#clock:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

#custom-launcher:hover {
  background-color: @mauve;
  color: @bg;
}

#custom-power:hover {
  background-color: @red;
  color: @bg;
}

Customization Options

Changing Module Order

Edit the modules arrays in config.jsonc:

"modules-right": [
  "network",      // Reorder by changing position
  "pulseaudio",
  "group/hardware",
  "tray",
  "custom/power"
]

Adding New Modules

Waybar supports many built-in modules:

battery - Battery status
backlight - Screen brightness
bluetooth - Bluetooth status
idle_inhibitor - Prevent idle/sleep
temperature - System temperature
disk - Disk usage

Example battery module:

"battery": {
  "format": "{icon} {capacity}%",
  "format-icons": ["󰁺", "󰁻", "󰁼", "󰁽", "󰁾", "󰁿", "󰂀", "󰂁", "󰂂", "󰁹"],
  "format-charging": "󰂄 {capacity}%"
}

Custom Scripts

Create custom modules with scripts:

"custom/weather": {
  "exec": "~/.config/waybar/scripts/weather.sh",
  "interval": 1800,
  "return-type": "json"
}

Reload Waybar with Super + Shift + R (Hyprland reload) or killall waybar && waybar & to apply configuration changes.

Tooltips

Tooltips provide additional information on hover:

tooltip {
  background-color: @bg_alt;
  color: @text;
  border-radius: 4px;
  border: 1px solid @surface0;
  padding: 4px 8px;
}

Many modules include tooltip data (network SSID, memory usage details, etc.).

Performance

Module updates are throttled with configurable intervals
CSS transitions are GPU-accelerated
Minimal resource usage even with multiple active modules

Avoid setting very short update intervals (< 1 second) on CPU/memory modules to prevent excessive resource usage.

Getting Started

Configuration

Components

Guides

Reference

​Waybar Overview

​Configuration

​Layout Structure

Left Section

Center Section

Right Section

​Modules and Widgets

​Custom Launcher

​Hyprland Workspaces

​Active Window

​Clock

​Audio (PulseAudio)

Left Click

Right Click

Scroll Wheel

Visual States

​Network

​Hardware Group

​CPU Monitor

​Memory Monitor

​System Tray

​Power Menu

​Styling

​Color Variables

​Base Styling

​Workspace Styling

​Module Colors

​Hover Effects

​Customization Options

​Changing Module Order

​Adding New Modules

​Custom Scripts

​Tooltips

​Performance

Build docs developers (and LLMs) love

Waybar Overview

Configuration

Layout Structure

Modules and Widgets

Custom Launcher

Hyprland Workspaces

Active Window

Clock

Audio (PulseAudio)

Network

Hardware Group

CPU Monitor

Memory Monitor

System Tray

Power Menu

Styling

Color Variables

Base Styling

Workspace Styling

Module Colors

Hover Effects

Customization Options

Changing Module Order

Adding New Modules

Custom Scripts

Tooltips

Performance