The 244-Message Waybar

Date: December 3-4, 2025 Duration: Two evenings Messages: 244 (plus 166 for Polybar the day before) Issue: Making Waybar look perfect Result: A status bar worth the effort

The Context

I’d switched from Polybar to Waybar. Polybar on X11 had been fine. Hyprland on Wayland needed Waybar.

Same concept: a bar at the top (or bottom) showing workspaces, system info, clock. Different implementation. Different config format. Different quirks.

244 messages to recreate what I’d had - and then make it better.

The Waybar Config Structure

Waybar uses JSON for layout and CSS for styling:

~/.config/waybar/
├── config.jsonc    # What modules to show, where
├── style.css       # How they look
└── scripts/        # Custom module scripts

Two files control everything. Sounds simple. It’s not.

The Layout

{
    "layer": "top",
    "position": "top",
    "height": 32,

    "modules-left": [
        "hyprland/workspaces",
        "hyprland/window"
    ],
    "modules-center": [
        "clock"
    ],
    "modules-right": [
        "pulseaudio",
        "network",
        "cpu",
        "memory",
        "temperature",
        "battery",
        "tray"
    ]
}

Left: workspaces and active window title. Center: clock. Right: system stats.

The 244 Messages

Most of those messages were CSS. Waybar’s CSS support is powerful but underdocumented. Trial and error was the only way.

Message 1-50: Basic Colors

* {
    font-family: "JetBrainsMono Nerd Font";
    font-size: 13px;
}

window#waybar {
    background-color: rgba(26, 27, 38, 0.9);
    color: #c0caf5;
}

Base theme: Tokyo Night colors. Semi-transparent background.

Message 51-100: Workspace Styling

#workspaces button {
    padding: 0 8px;
    color: #565f89;
    background: transparent;
    border-radius: 4px;
    margin: 3px;
}

#workspaces button.active {
    color: #7aa2f7;
    background: rgba(122, 162, 247, 0.2);
}

#workspaces button:hover {
    background: rgba(122, 162, 247, 0.1);
}

Getting the active workspace to stand out without being garish. The hover effect adds interactivity without distraction.

Message 101-150: Module Padding

Every module needs spacing. Too tight looks cramped. Too loose wastes bar space.

#clock,
#cpu,
#memory,
#network,
#pulseaudio,
#temperature,
#battery {
    padding: 0 10px;
    margin: 3px 2px;
}

10px horizontal padding. 3px vertical margin. Tested against every font size.

Message 151-200: Icons

Nerd Fonts provide icons. But they don’t size consistently with text.

#network {
    padding-left: 14px;  /* Extra space for wifi icon */
}

#battery.charging::before {
    content: "󰂄 ";
}

Manual padding adjustments per icon. There’s no formula. You just look and tweak.

Message 201-244: Edge Cases

What happens when a module is empty? When the network disconnects? When battery is critical?

#battery.critical:not(.charging) {
    background-color: #f7768e;
    color: #1a1b26;
    animation: blink 1s linear infinite;
}

@keyframes blink {
    50% { opacity: 0.5; }
}

Critical battery blinks. Visible from across the room.

The Custom Modules

Waybar’s built-in modules cover most needs. But I wanted a few extras.

GPU Temperature

"custom/gpu": {
    "exec": "nvidia-smi --query-gpu=temperature.gpu --format=csv,noheader,nounits",
    "format": "󰢮 {}°C",
    "interval": 10
}

Polls nvidia-smi every 10 seconds. Shows GPU temp with an icon.

Now Playing

"custom/media": {
    "exec": "playerctl metadata --format '{{artist}} - {{title}}'",
    "format": " {}",
    "interval": 5,
    "max-length": 40
}

Shows current Spotify/Firefox/VLC track. Truncates if too long.

The Final Config

After 244 messages, the bar had:

• Hyprland workspace indicators with smooth hover transitions
• Active window title (truncated intelligently)
• Centered clock with date tooltip
• CPU, memory, temperature graphs
• GPU temp (NVIDIA)
• Network status with click-to-nmtui
• Volume with scroll-to-adjust
• Battery with critical warnings
• System tray for apps that need it

Polybar vs Waybar

I’d spent 166 messages on Polybar the day before, trying to make it work with Hyprland. It doesn’t. Polybar is X11-native. Hyprland is Wayland.

Waybar is what Polybar would be if it were born on Wayland:

• Native Wayland support
• Hyprland IPC integration
• JSON config (easier to validate than Polybar’s INI)
• CSS styling (more powerful than Polybar’s format strings)

The switch was worth it.

What 244 Messages Bought

A status bar that:

• Shows exactly what I need
• Looks consistent across monitors
• Has smooth animations
• Uses colors I chose
• Works reliably on Wayland

Is a status bar worth 244 messages? For something you see every second of every session? Yes.

The details matter. Especially the ones you see 10,000 times a day.