Waybar Configuration

Waybar status bar configuration and module setup

Overview

Waybar is the status bar used in the Kanagawa dotfiles, providing system information, workspace indicators, and quick access to system controls.

Waybar configuration uses JSON/JSONC format and is split between config (structure) and modules.json (module definitions).

Configuration Structure

~/.config/waybar/
├── config           # Main configuration (layout)
├── modules.json     # Module definitions
├── style.css        # Styling and theming
└── scripts/         # Custom scripts
    └── weather      # Weather information script

Main Configuration

The main config file defines the bar layout and module positions:

{
  "layer": "top",
  "position": "top",
  "height": 36,
  "spacing": 4,
  
  "modules-left": [
    "custom/arch",
    "hyprland/workspaces"
  ],
  
  "modules-center": [
    "clock",
    "custom/weather"
  ],
  
  "modules-right": [
    "pulseaudio",
    "network",
    "backlight",
    "battery",
    "battery#bat2",
    "wlogout"
  ],
  
  "include": [
    "~/.config/waybar/modules.json"
  ]
}

Left Modules

Left Side Modules

Arch Logo

Custom Arch Linux logo with tooltip and wlogout integration

Workspaces

Hyprland workspace indicator with custom styling

Arch Logo Module

"custom/arch": {
  "format": "",
  "tooltip": true,
  "tooltip-format": "I use Arch btw",
  "on-click": "wlogout"
}

Workspaces Module

"hyprland/workspaces": {
  "disable-scroll": true,
  "all-outputs": true,
  "warp-on-scroll": false,
  "format": "{name}",
  "format-icons": {
    "urgent": "",
    "active": "",
    "default": ""
  }
}

Center Modules

Center Modules

Clock Module

"clock": {
  "format": "{:%H:%M}",
  "tooltip-format": "<big>{:%Y %B}</big>\n<tt><small>{calendar}</small></tt>",
  "format-alt": "{:%H:%M | %e %b} ",
  "timezone": "Europe/Madrid"
}

The clock displays time in 24-hour format and shows a calendar on hover.

Weather Module

"custom/weather": {
  "format": "{}",
  "exec": "/home/nico/.local/bin/weather",
  "interval": 1800,
  "tooltip": true
}

Weather information updates every 30 minutes (1800 seconds) using a custom script.

Right Modules

Right Side Modules

Audio Module

"pulseaudio": {
  "format": "{icon} {volume}%",
  "format-bluetooth": "{icon}  {volume}%  {format_source}",
  "format-bluetooth-muted": "  {icon}  {format_source}",
  "format-muted": "󰋐 {format_source}",
  "format-source": " {volume}%",
  "format-source-muted": "",
  "format-icons": {
    "headphone": "",
    "hands-free": "",
    "headset": "",
    "phone": "",
    "portable": "",
    "car": "",
    "default": ["", "", ""]
  },
  "on-click": "pavucontrol"
}

Click to open PulseAudio Volume Control (pavucontrol).

Network Module

"network": {
  "format-wifi": " {essid}",
  "format-ethernet": "{ipaddr}/{cidr} ",
  "tooltip-format": "{ifname} via {gwaddr} ({signalStrength}%)",
  "format-linked": "{ifname} (No IP) ",
  "format-disconnected": "Disconnected ⚠",
  "on-click": "nm-connection-editor"
}

Backlight Module

"backlight": {
  "format": "{percent}% {icon}",
  "format-icons": [
    "", "", "", "", 
    "", "", "", "", ""
  ]
}

Battery Modules

"battery": {
  "states": {
    "warning": 30,
    "critical": 15
  },
  "format": "{icon} {capacity}%",
  "format-full": "{icon} {capacity}%",
  "format-charging": "󰂄 {capacity}%",
  "format-plugged": "󰂉 {capacity}%",
  "format-alt": "{time} {icon}",
  "format-icons": [
    "", "", "", "", ""
  ]
}

Battery warnings appear at 30% (warning) and 15% (critical) levels.

Module Features

System Monitoring

Track CPU, memory, temperature, and network status

Power Management

Battery status with dual battery support

Audio Control

PulseAudio integration with multiple device support

Custom Scripts

Weather and other custom information modules

Optional Modules

Several modules are commented out in the default configuration:

Available Optional Modules

// Commented out by default:
"idle_inhibitor"     // Prevent screen sleep
"cpu"                // CPU usage percentage
"memory"             // RAM usage
"temperature"        // System temperature
"hyprland/language" // Keyboard layout indicator

Uncomment these in the config file to enable them.

Custom Scripts Integration

Waybar supports custom scripts for extending functionality:

Weather Script

Location: ~/.local/bin/weather

"custom/weather": {
  "format": "{}",
  "exec": "/home/nico/.local/bin/weather",
  "interval": 1800,
  "tooltip": true
}

The weather script runs every 30 minutes to fetch and display weather information.

Theme Integration

Waybar automatically integrates with the Kanagawa color scheme through style.css:

1. Colors Sourced

   Colors are pulled from the active theme in ~/.config/colors/

2. Dynamic Updates

   When you switch themes, Waybar reloads with new colors

3. CSS Styling

   All styling is defined in style.css with theme variables

Click Actions

Many modules support click actions for quick access:

Module	Action	Opens
custom/arch	Click	wlogout (power menu)
pulseaudio	Click	pavucontrol (volume mixer)
network	Click	nm-connection-editor (network settings)
battery	Click	Power menu script

System Integration

Hyprland Integration

Native workspace and window information

Auto-reload

Automatically reloads on config changes

Next Steps

Styling

Customize Waybar appearance

Scripts

Learn about custom scripts