Sway Configuration Part 3: 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. The config file is quite easy to read and you can get module ideas from the Waybar Github page linked above.