configs/dot.config/waybar/style.css

* {
  font-family: "Monofur Nerd Font", monospace;
}
window.eDP-1 * { font-size: 14px; }
window.DP-1 * { font-size: 16px; }

window#waybar {
  color: #ffffff;
}
window#waybar.eDP-1 {
  background-color: rgba(42, 42, 42, 0.8);
  border: none;
}
window#waybar.DP-1 {
  background-color: rgba(42, 42, 42, 0.8);
  border-bottom: 3px solid rgba(115, 115, 115, 0.5);
  transition-property: background-color;
  transition-duration: .5s;
}

window#waybar.hidden {
 opacity: 0.2;
}
 
button {
    /* Use box-shadow instead of border so the text isn't offset */
    box-shadow: inset 0 -3px transparent;
    /* Avoid rounded borders under each button name */
    border: none;
    border-radius: 0;
}

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

#workspaces button {
    color: #ffffff;
}

#workspaces button:hover {
    background: #FABD2F;
}

#workspaces button.focused {
    background-color: #000;
    box-shadow: inset 0 -3px #FABD2F;
    color: #FABD2F;
}

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

#workspaces,
#sway-mode,
#sway-scratchpad,
#window,
#privacy,
#taskbar,
#power {
    background-color: black;
}

#window {
    padding-left: 1em;
    padding-right: 1em;
}

#custom-suffix,
#custom-prefix {
    background-color: transparent;
    color: black;
    font-size: 2.2em;
}
#custom-prefix {
    margin-right: .5em;
}

/* 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;
}

#privacy {
    color: white;
    background-color: #EB4D4B;
}