Skip to content

Waybar

Jump to bottom
NullString1 edited this page Jan 13, 2026 · 1 revision

Waybar Configuration

Waybar is the status bar used in NullOS, providing system information, workspace indicators, and quick controls.

Overview

Configuration File: home/waybar/default.nix
Module Location: home/waybar/
Style: Automatically themed by Stylix

Waybar displays:

  • Workspace indicators
  • Window title
  • System tray
  • Clock and calendar
  • CPU/Memory/Temperature
  • Network status
  • Audio volume
  • Battery status (laptops)

Configuration Structure

Waybar configuration in NullOS uses Nix to define the JSON config and CSS styling.

# home/waybar/default.nix
{
  programs.waybar = {
    enable = true;
    settings = {
      mainBar = {
        # Configuration here
      };
    };
    style = ''
      /* CSS styling here */
    '';
  };
}

Module Configuration

Position and Layout

mainBar = {
  layer = "top";
  position = "top";
  height = 30;
  spacing = 4;
  
  modules-left = [ "hyprland/workspaces" "hyprland/window" ];
  modules-center = [ "clock" ];
  modules-right = [ "tray" "cpu" "memory" "pulseaudio" "network" "battery" ];
};

Workspaces Module

"hyprland/workspaces" = {
  format = "{icon}";
  format-icons = {
    "1" = "一";
    "2" = "二";
    "3" = "三";
    "4" = "四";
    "5" = "五";
    default = "";
  };
  persistent-workspaces = {
    "*" = 5;
  };
};

Clock Module

clock = {
  format = "{:%H:%M}";
  format-alt = "{:%A, %B %d, %Y (%H:%M)}";
  tooltip-format = "<tt><small>{calendar}</small></tt>";
  calendar = {
    mode = "month";
    mode-mon-col = 3;
    weeks-pos = "right";
    on-scroll = 1;
    format = {
      months = "<span color='#ffead3'><b>{}</b></span>";
      days = "<span color='#ecc6d9'><b>{}</b></span>";
      weeks = "<span color='#99ffdd'><b>W{}</b></span>";
      weekdays = "<span color='#ffcc66'><b>{}</b></span>";
      today = "<span color='#ff6699'><b><u>{}</u></b></span>";
    };
  };
};

CPU Module

cpu = {
  format = " {usage}%";
  tooltip = true;
  interval = 2;
  on-click = "ghostty -e btop";
};

Memory Module

memory = {
  format = " {}%";
  tooltip-format = "RAM: {used:0.1f}G / {total:0.1f}G\nSwap: {swapUsed:0.1f}G / {swapTotal:0.1f}G";
  interval = 5;
  on-click = "ghostty -e btop";
};

Network Module

network = {
  format-wifi = " {signalStrength}%";
  format-ethernet = "";
  format-disconnected = "󰤭";
  tooltip-format = "{ifname}: {ipaddr}/{cidr}";
  tooltip-format-wifi = "{essid} ({signalStrength}%)\n{ipaddr}";
  on-click = "nm-connection-editor";
};

Audio Module

pulseaudio = {
  format = "{icon} {volume}%";
  format-muted = "󰝟";
  format-icons = {
    headphone = "";
    hands-free = "";
    headset = "";
    phone = "";
    portable = "";
    car = "";
    default = [ "" "" "" ];
  };
  on-click = "pavucontrol";
  scroll-step = 5;
};

Battery Module

battery = {
  states = {
    warning = 30;
    critical = 15;
  };
  format = "{icon} {capacity}%";
  format-charging = " {capacity}%";
  format-plugged = " {capacity}%";
  format-icons = [ "" "" "" "" "" ];
  tooltip-format = "{timeTo}, {capacity}%\nPower: {power}W";
};

System Tray

tray = {
  icon-size = 16;
  spacing = 8;
};

Styling

Basic CSS Structure

* {
  border: none;
  border-radius: 0;
  font-family: "JetBrainsMono Nerd Font";
  font-size: 13px;
  min-height: 0;
}

window#waybar {
  background: rgba(30, 30, 46, 0.9);
  color: #cdd6f4;
}

#workspaces {
  margin: 0 5px;
}

#workspaces button {
  padding: 0 10px;
  background: transparent;
  color: #cdd6f4;
  border-bottom: 2px solid transparent;
}

#workspaces button.active {
  color: #89b4fa;
  border-bottom: 2px solid #89b4fa;
}

#workspaces button:hover {
  background: rgba(137, 180, 250, 0.2);
}

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

#battery.charging {
  color: #a6e3a1;
}

#battery.warning:not(.charging) {
  color: #f9e2af;
}

#battery.critical:not(.charging) {
  color: #f38ba8;
  animation: blink 1s linear infinite;
}

@keyframes blink {
  to {
    color: #cdd6f4;
  }
}

Using Stylix Colors

Waybar can use Stylix color variables:

window#waybar {
  background: @base00;
  color: @base05;
}

#workspaces button.active {
  color: @base0D;
  border-bottom: 2px solid @base0D;
}

Custom Modules

Weather Module

"custom/weather" = {
  format = "{}°";
  tooltip = true;
  interval = 3600;
  exec = "wttrbar";
  return-type = "json";
};

Media Player Module

"custom/media" = {
  format = "{icon} {}";
  format-icons = {
    Playing = "";
    Paused = "";
  };
  max-length = 40;
  exec = "playerctl metadata --format '{{ artist }} - {{ title }}'";
  on-click = "playerctl play-pause";
  interval = 2;
};

Power Menu

"custom/power" = {
  format = "";
  on-click = "wlogout";
  tooltip = false;
};

Updates Available

"custom/updates" = {
  format = " {}";
  interval = 3600;
  exec = "checkupdates | wc -l";
  exec-if = "exit 0";
  on-click = "ghostty -e sudo nixos-rebuild switch --flake .";
  signal = 8;
};

Multiple Bars

Create multiple Waybar instances:

programs.waybar = {
  enable = true;
  settings = {
    mainBar = {
      output = "eDP-1";
      # Primary monitor config
    };
    
    secondaryBar = {
      output = "HDMI-A-1";
      # Secondary monitor config
    };
  };
};

Tips & Tricks

Reload Waybar

killall waybar
waybar &

Or add keybinding in Hyprland:

bind = SUPER SHIFT, R, exec, killall waybar && waybar &

Debug Waybar

Run in terminal to see errors:

waybar --log-level debug

Custom Icons

Use Nerd Font icons: https://www.nerdfonts.com/cheat-sheet

format = " {capacity}%";  # Battery
format = " {usage}%";     # CPU
format = " {}%";          # Memory

Common Customizations

Transparent Background

window#waybar {
  background: transparent;
}

#workspaces,
#clock,
#cpu,
#memory {
  background: rgba(30, 30, 46, 0.8);
  border-radius: 10px;
  margin: 5px;
  padding: 0 15px;
}

Floating Modules

#workspaces,
#clock,
#tray {
  background: @base00;
  border-radius: 15px;
  margin: 5px 5px 5px 0;
  padding: 0 15px;
}

Bottom Bar

mainBar = {
  position = "bottom";
};

Troubleshooting

Waybar Not Showing

Check if running:

pgrep waybar

Start manually:

waybar

Icons Not Displaying

Ensure Nerd Fonts are installed:

home.packages = [ pkgs.nerd-fonts ];

Module Not Updating

Increase interval or check exec command:

# Test command manually
playerctl metadata

Next Steps

Clone this wiki locally