published on

Using Waybar

Part 0 - Prerequisites

Make sure to install Waybar if you haven’t already.

$ sudo dnf install waybar

Part 1 - Using Waybar

First we’ll make a Waybar directory in the home folder and copy the default config and style page into it.

$ mkdir -p ~/.config/waybar
$ cp /etc/xdg/waybar/* ~/.config/waybar/

We can edit this version in the home folder to customise Waybar.

Now we need to edit the Sway config so that it uses Waybar, to do this edit the ~/.config/sway/config file and make sure the bar section is set to use Waybar:

bar {
    swaybar_command waybar
}

Part 2 - Modules

This easiest way to learn about viable modules you can use is to look at the documentation online, available here. This, along with the default config we just copied should give you a good idea of how things work.

Note that Custom will be useful to write your own modules for scripts etc.

Part 3 - Customisation

Waybar has some example configs and style sheets to go along with it that you can find here. Alternatively to get an idea you can look for other people using Waybar and look at their configs.

Waybar recommends having Font Awesome installed for module icons to work nicely.

I have changed my Waybar to the following, ~/.config/waybar/config:

{
    // "layer": "top", // Waybar at top layer
    // "position": "bottom", // Waybar position (top|bottom|left|right)
    "height": 21, // Waybar height (to be removed for auto height)
    // "width": 1280, // Waybar width
    // Choose the order of the modules
    "modules-left": ["sway/workspaces", "sway/mode"],
    //"modules-center": ["sway/window"],
    "modules-right": ["custom/arrow1", "pulseaudio", "custom/arrow6", "idle_inhibitor", "custom/arrow7", "custom/dnf", "custom/arrow8", "custom/test", "custom/arrow9", "temperature", "custom/arrow2", "memory","custom/arrow3", "clock", "custom/arrow4", "tray", "custom/arrow5", "custom/powermenu"],
    // Modules configuration
    "sway/workspaces": {
         "disable-scroll": false,
         "all-outputs": true,
         "current-only": false,
     },
    "sway/mode": {
        "format": "<span style=\"italic\">{}</span>"
    },

    "tray": {
        // "icon-size": 21,
        "spacing": 5
    },

    "idle_inhibitor": {
        "format": "{icon}",
        "format-icons": {
            "activated": "",
            "deactivated": ""
        }
    },

    "temperature": {
        "hwmon-path": "/sys/class/hwmon/hwmon2/temp1_input",
        "critical-threshold": 80,
        "format-critical": "{temperatureC}°C ",
        "format": "{temperatureC}°C "
     },

    "clock": {
        // "timezone": "America/New_York",
          "tooltip-format": "<big>{:%Y %B}</big>\n<tt><big>{calendar}</big></tt>",
        // "format-alt": "{:%Y-%m-%d}"
	  "interval": 1,
          "format": "{:%H:%M:%S %e %b %Y}",
          "max-length": 25
    },
    "memory": {
       // "format": "{}% "
          "format": "{used:0.1f}G/{total:0.1f}G ",
          "interval": 1,
          "on-click": "alacritty -e bashtop"
    },
    "pulseaudio": {
        "scroll-step": 5, // %, can be a float
        "format": "{volume}% {icon} {format_source}",
        "format-bluetooth": "{volume}% {icon} {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"
    },
    "custom/powermenu": {
    "format": "<span font='Font Awesome 5 Free 9'>{icon}</span>{}",
    "format-icons": [""],
    "interval": 3600,
    "escape": true,
    "on-click": "wlogout -p layer-shell &>/dev/null"
    },
    "custom/dnf": {
        "format": "{} ",
	"interval": 600,
	"exec": "dnf check-update | grep 'updates' | wc -l",
	"exec-if": "exit 0",
	"signal": 8
    },
    "custom/test": {
	"format": "{} ",
	"interval": 3600,
	"exec": "echo 'kek'",
	"exec-if": "exit 0",
	"signal": 8
    },
     "custom/arrow1": {
        "format": "",
        "tooltip": false
    },

    "custom/arrow2": {
        "format": "",
        "tooltip": false
    },

    "custom/arrow3": {
        "format": "",
        "tooltip": false
    },

    "custom/arrow4": {
        "format": "",
        "tooltip": false
    },

    "custom/arrow5": {
        "format": "",
        "tooltip": false
    },

    "custom/arrow6": {
        "format": "",
        "tooltip": false
    },

    "custom/arrow7": {
        "format": "",
        "tooltip": false
    },
    "custom/arrow8": {
	"format": "",
	"tooltip": false
    },
    "custom/arrow9": {
        "format": "",
	"tooltip": false
    }
}

The corresponding style sheet ~/.config/waybar/style.css:

* {
    border: none;
    border-radius: 0;
    /* `otf-font-awesome` is required to be installed for icons */
    font-family:"MesloLGS NF";
/*    font-family:"Source Code Pro";*/
    font-size: 12px;
    font-weight: 600;
    min-height: 0;
}

window#waybar {
    /*background-color: #282c34;*/
    background-color: #282828;
    /*border-bottom: 1px solid @unfocused_borders;*/
}

window#waybar.hidden {
    opacity: 0.2;
}

/*
window#waybar.empty {
    background-color: transparent;
}
window#waybar.solo {
    background-color: #FFFFFF;
}
*/

#workspaces button {
    padding: 0 5px;
    background-color:#282828;
    color: #ebdbb2;
    /* Use box-shadow instead of border so the text isn't offset */
    /* box-shadow: inset 0 -3px transparent;*/
}

/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
#workspaces button:hover {
    background: #282828;
   /* box-shadow: inset 0 -3px #ffffff;*/
}

#workspaces button.focused {
    background-color: #ebdbb2;
    color:#282828;
   /* box-shadow: inset 0 -3px #ffffff;*/
}

#workspaces button.urgent {
    background-color: #fb4934;
}

#mode {
    background-color: #b8bb26;
   /* border-bottom: 3px solid #ffffff;*/
}

#custom-test,
#custom-dnf,
#temperature,
#idle_inhibitor,
#clock,
#memory,
#pulseaudio,
#tray,
#mode{
     padding-left:10px;
     padding-right:10px;
    /* margin: 0 0px;*/
     color: #282828;
}
#custom-powermenu{
        padding-left:10px;
        padding-right:10px;
        margin:  0 0px;
        background-color:#fb4934;
        color:#282828;
}
#window{
       margin-right: 40px;
       margin-left: 40px; 
}
#workspaces {
    margin: 0 0px;
}

/* If workspaces is the leftmost module, omit left margin */
.modules-left > widget:first-child > #workspaces {
    margin-left: 0;
}

/* If workspaces is the rightmost module, omit right margin */
.modules-right > widget:last-child > #workspaces {
    margin-right: 0;
}
#idle_inhibitor {
    background-color: #928374;
    color:#282828;
}
#custom-dnf {
    background-color: #504945;
    color: #ebdbb2;
}

#custom-test {
    background-color: #928374;
    color: #282828;
}

#temperature {
    background-color: #504945;
    color:#ebdbb2;
}

#clock {
    background-color: #504945;
    color:#ebdbb2;
}
@keyframes blink {
    to {
        background-color: #ffffff;
    }
}

label:focus {
    background-color: #000000;
}

#memory {
    background-color: #928374;
    color:#282828;
}

#pulseaudio {
    background-color: #504945;
    color:#ebdbb2;
}

#pulseaudio.muted {
    background-color: #ebdbb2;
    color: #2a5c45;
}

#tray {
    background-color: #fe8019;
}
#custom-arrow1 {
    font-size: 16px;
    color:#504945;
    background:transparent ;
}

#custom-arrow2 {
    font-size: 16px;
    color:#928374;
    background: #504945;
}

#custom-arrow3 {
    font-size: 16px;
    color: #504945;
    background: #928374;
}

#custom-arrow4 {
    font-size: 16px;
    color: #fe8019;
    background: #504945;
}

#custom-arrow5 {
    font-size: 16px;
    color: #fb4934;
    background: #fe8019;
}

#custom-arrow6 {
    font-size: 16px;
    color:#928374;
    background: #504945;
}

#custom-arrow7 {
    font-size: 16px;
    color: #504945;
    background: #928374;
}

#custom-arrow8 {
    font-size: 16px;
    color:#928374;
    background: #504945;
}

#custom-arrow9 {
    font-size: 16px;
    color: #504945;
    background: #928374;
}

Remember to reload Sway in order to see any changes you’ve made with:

mod+Shift+c

Part 4 - Modify

Now that you have a working bar you should just be able to modify the config and style sheet to your desire!